three.js project - adding import cause blanc page

Question

I am new to three.js, and frontend in general. Probably very basic, but I have this problem...

I have a demo three.js with the following: index.html:

<!DOCTYPE html>
<html>
<head>
    <meta charset=utf-8>
    <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
    <title>Beginning my Three.js Journey</title>
    <style>
        body { margin: 0; }
        canvas { width: 100%; height: 100% }
    </style>
</head>
<body>
<!-- CDN Link to Three.js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/87/three.js"></script>
<!--reference your JS file here. Mine looks like below-->
<script src="index.js"></script>
</body>
</html>

and index.js:

const fs = require('fs');
// We need 3 things everytime we use Three.js
// Scene + Camera + Renderer
const scene = new THREE.Scene()
const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 )
const renderer = new THREE.WebGLRenderer({ antialias: true})

renderer.setSize( window.innerWidth, window.innerHeight )
// sets renderer background color
renderer.setClearColor("#444444")
document.body.appendChild( renderer.domElement )
camera.position.z = 5

// resize canvas on resize window
window.addEventListener( 'resize', () => {
    let width = window.innerWidth
    let height = window.innerHeight
    renderer.setSize( width, height )
    camera.aspect = width / height
    camera.updateProjectionMatrix()
})

// basic cube
var geometry = new THREE.BoxGeometry( 2, 1, 1)
var material = new THREE.MeshStandardMaterial( { color: 0xff0051, flatShading: true, metalness: 0, roughness: 1 })
var cube = new THREE.Mesh ( geometry, material )
scene.add( cube )

// wireframe cube
var geometry = new THREE.BoxGeometry( 3, 3, 3)
var material = new THREE.MeshBasicMaterial( {
    color: "#dadada", wireframe: true, transparent: true
})
var wireframeCube = new THREE.Mesh ( geometry, material )
scene.add( wireframeCube )

// ambient light
var ambientLight = new THREE.AmbientLight ( 0xffffff, 0.2)
scene.add( ambientLight )

// point light
var pointLight = new THREE.PointLight( 0xffffff, 1 );
pointLight.position.set( 25, 50, 25 );
scene.add( pointLight );


function animate() {
    requestAnimationFrame( animate )
    cube.rotation.x += 0.04;
    cube.rotation.y += 0.04;
    wireframeCube.rotation.x -= 0.01;
    wireframeCube.rotation.y -= 0.01;
    renderer.render( scene, camera )
}
animate()

and it works as expected.

Adding any required to the js file (I've added const fs = require('fs');) cause the HTML to become blanc.

by the way, I return the HTML file using a simple express server:

const express = require('express');
const app = express();

app.use(express.static(__dirname))

app.listen(8080);
console.log("listening on port 8080");

Any suggestion? What else do I need to do to be able to load external libraries?

Thanks a lot!!!

I tried the same with a simple HTML (in the index.js I added only alert("alert text")), and when I added a import in the js file (const fs = require('fs');) nothing happens. So I understand it is a simple HTML, javascript question... — Asaf, Mar 17 '21 at 08:00
Does this answer your question? [JavaScript require() on client side](https://stackoverflow.com/questions/5168451/javascript-require-on-client-side) — callback, Mar 17 '21 at 08:19

score 1 · Accepted Answer · answered Mar 17 '21 at 08:51

1

require() in const fs = require('fs') is not part of the standard JavaScript API, it buit in Node JS. If you want to import some file, it can use tag in html, for example

<input type="file" id="file-selected" accept=".jpg">

answered Mar 17 '21 at 08:51

Fahrul Putr

59
2

That would be the preferred workaround indeed. You can also `fs` in express and serve files through the server, depending on the use case – Nino Filiu Mar 17 '21 at 08:58

three.js project - adding import cause blanc page

1 Answers1