github three.js having one javascript file including these two paragraphs (js files) as mentioned in help file - github

Question

I have a question in gihub three.js
https://github.com/mrdoob/three.js
When I want to have one javascript file including these two paragraphs (js files) as mentioned in help file what should I do?
I used require but the browser error is about THREE object
first paragraph :
<script src="js/three.min.js"></script>
second paragraph:
var scene, camera, renderer;
var geometry, material, mesh;
init();
animate();
function init() {
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 10000 );
camera.position.z = 1000;
geometry = new THREE.BoxGeometry( 200, 200, 200 );
material = new THREE.MeshBasicMaterial( { color: 0xff0000, wireframe: true } );
mesh = new THREE.Mesh( geometry, material );
scene.add( mesh );
renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
}
function animate() {
requestAnimationFrame( animate );
mesh.rotation.x += 0.01;
mesh.rotation.y += 0.02;
renderer.render( scene, camera );
}
and the tempcubejava.js I had been created is this:
//------------------
//const tempthree = require('./three.js')({regl})
require('./three.js')()
//------------------
//-----------------
var scene
var camera2
var renderer;
var geometry, material
var mesh2;
init();
//animate();
function init() {
scene = new THREE.Scene();
camera2 = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 10000 );
camera2.position.z = 1000;
geometry = new THREE.BoxGeometry( 200, 200, 200 );
material = new THREE.MeshBasicMaterial( { color: 0xff0000, wireframe: true } );
mesh2 = new THREE.Mesh( geometry, material );
scene.add( mesh2 );
renderer = new THREE.WebGLRenderer();
renderer.autoClear = false;
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
renderer.render( scene, camera2 );
}
function animate() {
requestAnimationFrame( animate );
mesh.rotation.x += 0.05;
mesh.rotation.y += 0.02;
renderer.autoClear = false;
renderer.render( scene, camera2 );
}
//-----------------
so the result is :`
node tempcubejava.js
C:\femgl\tempcubejava.js:3
require('./three.js')()
^
TypeError: require(...) is not a function
at Object. (C:\femgl\tempcubejava.js:3:22)
at Module._compile (module.js:571:32)
at Object.Module._extensions..js (module.js:580:10)
at Module.load (module.js:488:32)
at tryModuleLoad (module.js:447:12)
at Function.Module._load (module.js:439:3)
at Module.runMain (module.js:605:10)
at run (bootstrap_node.js:427:7)
at startup (bootstrap_node.js:148:9)
and when I changed first lines as these:
//------------------
const tempthree = require('./three.js')
//require('./three.js')()
//------------------
I See this :
node tempcubejavaedited.js
C:\femgl\tempcubejavaedited.js:18
scene = new tempthree.THREE.Scene();
^
TypeError: Cannot read property 'Scene' of undefined
at init (C:\femgl\tempcubejavaedited.js:18:29)
at Object. (C:\femgl\tempcubejavaedited.js:13:1)
at Module._compile (module.js:571:32)
at Object.Module._extensions..js (module.js:580:10)
at Module.load (module.js:488:32)
at tryModuleLoad (module.js:447:12)
at Function.Module._load (module.js:439:3)
at Module.runMain (module.js:605:10)
at run (bootstrap_node.js:427:7)
at startup (bootstrap_node.js:148:9)
so what should I do to have a separated JS file
Best Regards

Answer 1

The recommended way is to simply include the three.js-library seperately in your HTML, like so:
<script src="/path/to/three.min.js"></script>
<script src="/path/to/your-script.js"></script>
This will make three.js available via the global variable THREE, or window.THREE and you can just use it from your script.
If you totally want to use three.js as a module (install the latest three.js version with npm install three), it should work like this:
var THREE = require('three');
However, for this to work in the browser you will need to use some sort of bundler (like browserify or webpack) which will combine both of the files into one.