Imported object cannot load in scene (I'm using notepad++ and serverz not visual studion or vite)

Questions
, , , , , ,
1

I was able to import the GLTF loader but it gives be this error that just keeps running forever when I add my object.

15
151919×803 160 KB

this is my script:

    <html>
    <head>
	
        <meta charset=utf-8>
        <title>Maze</title> 
        <script src="https://three.js.org/build/three.js"></script>
		<script type="importmap">
	{
		"imports": {
			"three": "https://unpkg.com/three@0.160.0/build/three.module.js",
      "three/addons/": "https://unpkg.com/three@0.160.0/examples/jsm/"
		}
	}
</script>
        <script type="module">
		// SOMGOLIE EJINKEONYE COSC3306 ASSIGNMENT 2
		
		
		// Import the Three.js module
		import * as THREE from 'https://unpkg.com/three@0.111.0/build/three.module.js';
        import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
		//import { OrbitControls } from 'three/addons/Controls/OrbitControls.js';
        window.onload = function() { // one big function for all our JavaScript code
  
        //Define the WebGL renderer:
            var object;
            const loader = new GLTFLoader();

loader.load( 'Pot Plant.glb',

 function ( gltf ) {

	object=gltf.scene ;
	scene.add(object);

});
 
        var renderer = new THREE.WebGLRenderer(); // Specify the use of WebGL
        renderer.setSize(1520, 750); // Scene size (Width, Height)
        document.body.appendChild(renderer.domElement);
  renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.PCFSoftShadowMap;

        //Initialize (create) the scene:
        var scene = new THREE.Scene();
   

         //THE CAMERA
        var camera = new THREE.PerspectiveCamera(
                35,             // Field of view
                800 / 600,      // Aspect ratio
                0.1,            // Near plane
                10000           // Far plane
            );
            camera.position.x= 0;  //default value anyway
            camera.position.y= 0;  //default value anyway
            camera.position.z = 100;  //We move the camera backwards to see all the scene
            camera.lookAt(scene.position);
            var object0


			// creating the terrain
             var terrainGeometry = new THREE.PlaneGeometry(600, 620, 199, 199);
             var terrainMaterial = new THREE.MeshLambertMaterial({ color: "brown" }); // Brown color
             var terrain = new THREE.Mesh(terrainGeometry, terrainMaterial);
			 terrain.castShadow=false;
			terrain.receiveShadow=true;
             terrain.rotation.x +=250
			 terrain.position.y -=15
             scene.add(terrain);
			//lights	
			 var pointLight = new THREE.PointLight(0xFFFFFF);
            // set the light position:
            pointLight.position.x = 10;
            pointLight.position.y = 50;
            pointLight.position.z = 100;
            // add the light to the scene:
            scene.add(pointLight);
			
			//the skydome
			var geometry =new THREE.SphereGeometry(100,60,80);
			var texture = new THREE.TextureLoader().load('bluesky.png');
			var material = new THREE.MeshBasicMaterial({map:texture});
			material.side =THREE.BackSide;
			var skydome = new THREE.Mesh(geometry,material);
            
           var geometry = new THREE.BoxGeometry( 6, 16, 6 );
           //It defines colour green:
		   
		   var texture2 = new THREE.TextureLoader().load('check.jpg');
           var material = new THREE.MeshLambertMaterial( {map:texture2} );
		 
           var cube = new THREE.Mesh(geometry,material);
		   cube.castShadow=true;
			cube.receiveShadow=false;
           cube.translateX(10);
           cube.translateZ(70);
			
           scene.add(cube);
		   
		   
		   var geometry = new THREE.BoxGeometry( 6, 16, 6 );
           //It defines colour green:
		   var texture2 = new THREE.TextureLoader().load('check.jpg');
           var material = new THREE.MeshLambertMaterial( {map:texture2} );
		 
           var cube2 = new THREE.Mesh(geometry,material);
		   cube2.castShadow=true;
			cube2.receiveShadow=true;
           cube2.translateX(-10);
           cube2.translateZ(70);
		   //scene.add(cube2);
		   var geometry = new THREE.BoxGeometry( 16, 16, 16 );
           //It defines colour green:
		   var texture2 = new THREE.TextureLoader().load('check.jpg');
           var material = new THREE.MeshLambertMaterial( {map:texture2} );
		 
           var cube3 = new THREE.Mesh(geometry,material);
		   cube3.castShadow=true;
			cube3.receiveShadow=true;
           cube3.translateX(5);
           cube3.translateZ(50);
		   //scene.add(cube3);
            // adding the skydome
           scene.add( skydome );
         //the fog 0.007 is the intensity 
		
const light = new THREE.SpotLight( 0xffffff );
light.castShadow = true; // default false

//Set up shadow properties for the light
light.shadow.mapSize.width = 12; // default
light.shadow.mapSize.height = 12; // default
light.shadow.camera.near = 0.5; // default
light.shadow.camera.far = 50; // default
light.shadow.focus = 1; // default
scene.add( light );




const spotLight = new THREE.SpotLight( 0xffffff ); spotLight.position.set( 100, 1000, 100 ); spotLight.map = new THREE.TextureLoader().load( "https://threejs.org/examples/#webgl_lights_spotlights" ); spotLight.castShadow = true; spotLight.shadow.mapSize.width = 1024; spotLight.shadow.mapSize.height = 1024; spotLight.shadow.camera.near = 500; spotLight.shadow.camera.far = 4000; spotLight.shadow.camera.fov = 30; scene.add( spotLight );
          



		
           			//render the skydome
             function render(){
               requestAnimationFrame(render);
              renderer.render( scene, camera );
            }
			
      

  
			render();
			
        }; // onload function
        </script>
    </head>
    <body></body>
    </html>

I’m required to use notepad++ and serverz :

14
141130×419 29.4 KB

13
13975×790 31.8 KB

How can I add the object to the scene?

2
  1. Does the GLB work ok when dropped in gltf-viewer ?
  2. Instead of scene.add(object) - check what appears in the devtools console if you console.info(object.scene) - is it a valid GLTF?
3

1.it does work
2.I’m sorry, I’m not sure I understand this is my console log after replacing it(the scene loads without error but there is no object):

18.PNG
18.PNG1869×927 67.3 KB

4

it’s still doesn’t work and all

5

The point of adding a console log there is to see the value you’re attempting to add to the scene. The fact that there’s no log in the console at all, means you’re not loading the model at all at the moment.

6

@Somgolie_Ejinkeonye you should probably remove the following line:

<script src="https://three.js.org/build/three.js"></script>

and also add the error logging to the loader:

loader.load( 'Pot Plant.glb',

 function ( gltf ) {

	object=gltf.scene ;
	scene.add(object);

}, undefined, function( error ) { console.log( error ) });

It is possible that it cannot find ‘Pot Plant.glb’.