Three Js - without NPM

[ragu]

Hi Guys,
i am new to three js, please guide me what is the issue with this code

import * as THREE from 'https://cdn.skypack.dev/three@0.129.0/build/three.module.js';
import { OrbitControls } from 'https://cdn.skypack.dev/three@0.129.0/examples/jsm/controls/OrbitControls.js';

let camera, scene, renderer;
let mesh;

init();
animate();

			function init() {
        
                container = document.getElementById('canvas');

				// Camera
				camera = new THREE.PerspectiveCamera( 75, container.clientWidth / container.clientHeight, 2, 1000 );
				camera.position.z = 450;
                camera.position.y = -70;

				scene = new THREE.Scene();

				const texture = new THREE.TextureLoader().load( 'images/top.jpg' );
                
				// GEOMETRY
				const geometry = new THREE.BoxGeometry( 500, 5, 500 );


				//  MATERIAL
				const material = new THREE.MeshBasicMaterial( { map: texture, side: THREE.FrontSide } );
                material.map.minFilter = THREE.LinearFilter;



				// MESH
				mesh = new THREE.Mesh( geometry, material );
				scene.add( mesh );
				mesh.position.y = 5;
                mesh.rotation.x = 0.5;

				// GROUND GROMETRY
				const groundGeometry = new THREE.BoxGeometry( 505, 0.01, 505 );
				const groundMaterial = new THREE.MeshBasicMaterial( { color: 0xc2c2c2 } );
				groundMesh = new THREE.Mesh( groundGeometry, groundMaterial );
				groundMesh.rotation.x = 0.5; //this value must be slightly lower than the planeConstant (0.01) parameter above
				groundMesh.position.y = mesh.position.y - 10;
				scene.add( groundMesh );

				// RENDERER
				renderer = new THREE.WebGLRenderer( { antialias: true, alpha: true} );
				renderer.setPixelRatio( window.devicePixelRatio );
				renderer.setSize( container.clientWidth, container.clientHeight );
				renderer.setClearColor(0xffffff, 0);
                container.appendChild(renderer.domElement);

				// Controls
				const controls = new OrbitControls( camera, renderer.domElement );
				controls.minDistance = 0.5;
				controls.maxDistance = 5;

				window.addEventListener( 'resize', onWindowResize );

			}

			function onWindowResize() {

				camera.aspect = container.clientWidth / container.clientHeight;
				camera.updateProjectionMatrix();
				renderer.setSize( container.clientWidth, container.clientHeight );

			}

			function animate() {

				requestAnimationFrame( animate );
				mesh.rotation.y += 0.002;
				groundMesh.rotation.y += 0.002;
				
				renderer.render( scene, camera );
			}```

[ragu]

i am not using any NPM Server, i am using STATIC HTML, with script tag to import this js file

[prisoner849]

Hi!
Any warnings or error messages in browser console?

[ragu]

Uncaught ReferenceError: container is not defined
at init (main.js:12)
at main.js:7

@prisoner849 this is the error message

[prisoner849]

So you have investigate why is this variable not defined

[ragu]

Instead of “import” in js file, i used script tag in HTML… for three js, it is working file… but when i add orbit controls again it is showing the same issue

[ragu]

Here is the HTML

<div id="canvas"></div>

<script src="js/three.js">
    import {OrbitControls} from 'js/OrbitControls.js';
    </script>
  <script src="js/main.js"></script>

this is JS Script

let camera, scene, renderer;
let mesh;

init();
animate();

			function init() {
        
                container = document.getElementById('canvas');

				// Camera
				camera = new THREE.PerspectiveCamera( 75, container.clientWidth / container.clientHeight, 2, 1000 );
				camera.position.z = 450;
                camera.position.y = -70;

				scene = new THREE.Scene();

				const texture = new THREE.TextureLoader().load( 'images/top.jpg' );
                
				// GEOMETRY
				const geometry = new THREE.BoxGeometry( 500, 5, 500 );


				//  MATERIAL
				const material = new THREE.MeshBasicMaterial( { map: texture, side: THREE.FrontSide } );
                material.map.minFilter = THREE.LinearFilter;



				// MESH
				mesh = new THREE.Mesh( geometry, material );
				scene.add( mesh );
				mesh.position.y = 5;
                mesh.rotation.x = 0.5;

				// GROUND GROMETRY
				const groundGeometry = new THREE.BoxGeometry( 505, 0.01, 505 );
				const groundMaterial = new THREE.MeshBasicMaterial( { color: 0xc2c2c2 } );
				groundMesh = new THREE.Mesh( groundGeometry, groundMaterial );
				groundMesh.rotation.x = 0.5; //this value must be slightly lower than the planeConstant (0.01) parameter above
				groundMesh.position.y = mesh.position.y - 10;
				scene.add( groundMesh );

				// RENDERER
				renderer = new THREE.WebGLRenderer( { antialias: true, alpha: true} );
				renderer.setPixelRatio( window.devicePixelRatio );
				renderer.setSize( container.clientWidth, container.clientHeight );
				renderer.setClearColor(0xffffff, 0);
                container.appendChild(renderer.domElement);

				// Controls
				const controls = new OrbitControls( camera, renderer.domElement );
				controls.minDistance = 0.5;
				controls.maxDistance = 5;
				// controls.update();

				window.addEventListener( 'resize', onWindowResize );

			}

			function onWindowResize() {

				camera.aspect = container.clientWidth / container.clientHeight;
				camera.updateProjectionMatrix();
				renderer.setSize( container.clientWidth, container.clientHeight );

			}

			function animate() {

				requestAnimationFrame( animate );
				mesh.rotation.y += 0.002;
				groundMesh.rotation.y += 0.002;
				
				// controls.update();

				renderer.render( scene, camera );
			}```

[drcmda]

@ragu

import {OrbitControls} from 'js/OrbitControls.js';

this part i do not understand. why do you suddenly import from /js? you have to import from the same cdn, skypack. you normally can’t use npm without a bundler, sky auto bundles it for you.

i am not using any NPM Server, i am using STATIC HTML, with script tag to import this js file

i think you’re mixing up something. npm is for creating static builds. the files you pull are bundled into a static distribution that is then self contained and can just be uploaded anywhere. you are currently relying on a shaky remote server with downtimes, you literally pull files from an npm server.

[donmccurdy]

The imports in your first post looked fine. An error about container being undefined means that when this line runs…

container = document.getElementById('canvas');

There is no HTML element on the page with ID “canvas”. You’ll need to make sure that it’s in your HTML and that the JS script is running later.

[hofk]

As a beginner, the BeginnerExample from the Collection of examples from discourse.threejs.org may help you.

See also the documents at the bottom of the * discourse.threejs.hofk.de page.

[nishu-murmu]

You can also use Skypack cdn for all the third party modules if you’re not using any bundler or npm.

[chronobackup]

You can look at my source code . I use custom script + skypack
But not the best practice …

ChronoBackup.com : Visualisation 3D de la TimeLine

[ragu]

@drcmda

skypack

hi drcmda,
i am having a shared hosting server, where there is no node support, so i seperate it from bundler and put it in js file download… but still i have issues… when i work in local, everything works fine… but when i upload it online it is not… for ex: https://arackofideas.in/3dModal/ see this link… for me same files working fine in local but… when i put in sever… it is not working it is showing all the error is the world one by one… can you help with this… as i could not able to understand this node…

[drcmda]

hosting has nothing to do with npm. npm is only for local dev, as well as the bundler. you build with npm, you don’t publish it.

the bundler inlines your dependency into one self contained folder (dist) which you then upload to the hoster. from that point on your site does not depend on anything but its own static files. your project can then also run offline because there are no further remote connections being made.

if you use skypack though, it indeed goes to npm and pulls files, auto bundles them. it is shaky because cdn’s have down-times, it would not work offline.

[ragu]

will try doing that…
but in skypack i have got three js cdn… i couldnt able to find othres like gltf loader, orbit controls etc…

[drcmda]

as i said, you most likely don’t want to depend on skypack in production. and this stuff is a hundred times more complicated and bugged than just picking a bundler.

try this:

npm init vite

follow the instructions. then npm install three. and now just build your project. run npm run dev to debug it live in the browser. any change you make in your editor is reflected there.

import * as THREE from 'three'
import { OrbitControls } from 'three/examples/jsm/OrbitControls'
...

and when you’re done hit npm run build which creates a self contained dist folder for you. you upload that to your hoster and it’s done.

[ragu]

will try doing it from NPM,

https://arackofideas.in/3dModal/
the Above link is now updated with SkyPack CDN, but now another new error is raised.