No error but nothing happens. what could it be?

Questions
1

So I fixed a code from a previous version of three.js and fixed it so it could work for the latest release, nothing shows up and if I de-comment “controls.addEventListener(‘change’, renderer);” the code runs but nothings happens, just a grey square on the screen. This is the whole code:

    <canvas id='c'></canvas>
    <script>
        let scene, camera, renderer;
        const canvas = document.querySelector('#c');

        function init() 
        {    
            scene = new THREE.Scene();
            scene.background = new THREE.Color(0xdddddd);                

            camera = new THREE.PerspectiveCamera(40,window.innerWidth/window.innerHeight,1,5000);
            camera.rotation.y = 45/180*Math.PI;
            camera.position.x = 800;
            camera.position.y = 100;
            camera.position.z = 1000;

            controls = new THREE.OrbitControls(camera, canvas);
            controls.addEventListener('change', renderer);

            hlight = new THREE.AmbientLight (0x404040,100);
            scene.add(hlight);

            directionalLight = new THREE.DirectionalLight(0xffffff,100);
            directionalLight.position.set(0,1,0);
            directionalLight.castShadow = true;
            scene.add(directionalLight);

            light = new THREE.PointLight(0xc4c4c4,10);
            light.position.set(0,300,500);
            scene.add(light);

            light2 = new THREE.PointLight(0xc4c4c4,10);
            light2.position.set(500,100,0);
            scene.add(light2);

            light3 = new THREE.PointLight(0xc4c4c4,10);
            light3.position.set(0,100,-500);
            scene.add(light3);

            light4 = new THREE.PointLight(0xc4c4c4,10);
            light4.position.set(-500,300,500);
            scene.add(light4);

            renderer = new THREE.WebGLRenderer({canvas})
            document.body.appendChild(renderer.domElement);

            let loader = new THREE.GLTFLoader();

            loader.load('teapot_emb.gltf', function(gltf)
            {
                car = gltf.scene.children[0];
                car.scale.set(0.5,0.5,0.5);
                scene.add(gltf.scene);
                animate();
            });
        }

        function animate() 
        {
            renderer.render(scene,camera);
            requestAnimationFrame(animate);
        }

        init();
    </script>

This is the model that I tried to load, it’s just the utah teapot, nothing of complex.

teapot.gltf (359.4 KB)

2

Using this and an animation loop does not make sense. You have to choose between on-demand rendering or a a continuous render loop.

This line is not necessary since your canvas is already part of the DOM.

1 Like
3

So I removed the lines in the code but still nothing happens

    document.body.appendChild(renderer.domElement);
    controls.addEventListener('change', renderer);
4

Try it with:

import * as THREE from '../build/three.module.js';

import { OrbitControls } from './jsm/controls/OrbitControls.js';
import { GLTFLoader } from './jsm/loaders/GLTFLoader.js';

let scene, camera, renderer;
const canvas = document.querySelector( '#c' );

function init() {

	scene = new THREE.Scene();

	camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 0.1, 50 );
	camera.position.x = 8;
	camera.position.y = 1;
	camera.position.z = 10;

	const controls = new OrbitControls( camera, canvas );

	const hlight = new THREE.AmbientLight( 0x404040 );
	scene.add( hlight );

	const directionalLight = new THREE.DirectionalLight( 0xffffff );
	directionalLight.position.set( 0, 1, 0 );
	directionalLight.castShadow = true;
	scene.add( directionalLight );

	renderer = new THREE.WebGLRenderer( { canvas } );
	renderer.setPixelRatio( window.devicePixelRatio );
	renderer.setSize( window.innerWidth, window.innerHeight );

	const loader = new GLTFLoader();

	loader.load( './models/gltf/teapot.gltf', function ( gltf ) {

		const car = gltf.scene.children[ 0 ];
		car.scale.set( 0.5, 0.5, 0.5 );
		scene.add( gltf.scene );
		animate();

	} );

}

function animate() {

	renderer.render( scene, camera );
	requestAnimationFrame( animate );

}

init();

The camera was too far away and the light intensities way too high.