Having one javascript file including these two paragraphs (js files) as mentioned in help file

Questions
1

Hello, I have a question.
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 :slight_smile:

 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