No errors and not showing anything on screen

hello!
I’m trying to add PointerLockControls in my code and i dont see any errors in my code and screen only shows white screen…! anyone knows about this issue?

'use strict';

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

import { PointerLockControls } from './jsm/controls/PointerLockControls.js';

import { OBJLoader2 } from './jsm/loaders/OBJLoader2.js';
import { MTLLoader } from './jsm/loaders/MTLLoader.js';
import { MtlObjBridge } from './jsm/loaders/obj2/bridge/MtlObjBridge.js';

import { Water } from './jsm/objects/Water.js';
import { Sky } from './jsm/objects/Sky.js';

    let container;
    let renderer, scene, camera;
    let controls, water, sun, mesh;

    let keyboard = [];

    let prevTime = performance.now();


    main();
    animate();

    function main() {

        //renderer

        renderer = new THREE.WebGLRenderer();
        //prevent bluring output canvas
        renderer.setPixelRatio( window.devicePixelRatio );
        renderer.setSize( window.innerWidth, window.innerHeight );
        //?

        //scene

        scene = new THREE.Scene();
        
        //camera

        camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 0.1, 20000 );
        camera.position.set( 30, 30, 100  );


        sun = new THREE.Vector3();
        
        //controls
        
        controls = new PointerLockControls( camera, document.body );

        
        const blocker = document.getElementById( 'blocker' );
        const instructions = document.getElementById( 'instructions' );

        instructions.addEventListener( 'click', function () {

				controls.lock();

        }, false );

        controls.addEventListener( 'lock', function () {

				instructions.style.display = 'none';
				blocker.style.display = 'none';

        } );

        controls.addEventListener( 'unlock', function () {

				blocker.style.display = 'block';
				instructions.style.display = '';

        } );
        
        addEventListener('keydown',(e)=>{
            
            keyboard[e.key]=true
            
        });
        
        addEventListener('keyup',(e)=>{
            
            keyboard[e.key]=false
            
        });
        
        function processKeyboard() {
            
            if (keyboard['w']){
                controls.moveForward(0.2);
            }
            if (keyboard['s']){
                controls.moveForward(-0.2);
            }
        }
        

        // Water

        const waterGeometry = new THREE.PlaneBufferGeometry( 10000, 10000 );

        water = new Water(
					waterGeometry,
					{
						textureWidth: 512,
						textureHeight: 512,
						waterNormals: new THREE.TextureLoader().load( 'textures/waternormals.png', function ( texture ) {

							texture.wrapS = texture.wrapT = THREE.RepeatWrapping;

						} ),
						alpha: 1.0,
						sunDirection: new THREE.Vector3(),
						sunColor: 0xffffff,
						waterColor: 'pink',
						distortionScale: 20,
						fog: scene.fog !== undefined
					}
				);

        water.rotation.x = -Math.PI / 2;

        scene.add( water );

				// Skybox

        const sky = new Sky();
        sky.scale.setScalar( 10000 );
        scene.add( sky );

        //??var uniforms 아니면 에러남
        var uniforms = sky.material.uniforms;

        uniforms[ 'turbidity' ].value = 10;
        uniforms[ 'rayleigh' ].value = 2;
        uniforms[ 'mieCoefficient' ].value = 0.005;
        uniforms[ 'mieDirectionalG' ].value = 0.8;

        //빛 기울기, 방위각
        const parameters = {
					inclination: 0.4,
					azimuth: 0.4
				};
        
        //해상도 유지 도와줌
        const pmremGenerator = new THREE.PMREMGenerator( renderer );

        function updateSun() {

            const theta = Math.PI * ( parameters.inclination - 0.5 );
            const phi = 2 * Math.PI * ( parameters.azimuth - 0.5 );

					sun.x = Math.cos( phi );
					sun.y = Math.sin( phi ) * Math.sin( theta );
					sun.z = Math.sin( phi ) * Math.cos( theta );

					sky.material.uniforms[ 'sunPosition' ].value.copy( sun );
					water.material.uniforms[ 'sunDirection' ].value.copy( sun ).normalize();

					scene.environment = pmremGenerator.fromScene( sky ).texture;

				}

				updateSun();


        //lighting
        
        {
            const skyColor = 0xB1E1FF;  // light blue
            const groundColor = 'pink';  // brownish orange
            const intensity = 1;
            const light = new THREE.HemisphereLight(skyColor, groundColor, intensity);
            scene.add(light);
        }
        {
            const color = 0xFFFFFF;
            const intensity = 1;
            const light = new THREE.DirectionalLight(color, intensity);
            light.position.set(5, 10, 2);
            scene.add(light);
            scene.add(light.target);
        }
        
        
        
        
   //obj 
        
        {
            const mtlLoader = new MTLLoader();
            
            mtlLoader.load('textures/bunny.mtl', (mtlParseResult) => {
            const objLoader = new OBJLoader2();
            const materials =  
                MtlObjBridge.addMaterialsFromMtlLoader(mtlParseResult);
                for (const material of Object.values(materials)) {
                material.side = THREE.DoubleSide;
                objLoader.addMaterials(materials);
            } 
                
            objLoader.load('textures/bunny.obj', (root) => {
                scene.add(root);
                
      });
    });
  }
       
 
        window.addEventListener( 'resize', onWindowResize, false );

			} // 여기까지 main

    function onWindowResize() {

            camera.aspect = window.innerWidth / window.innerHeight;
            camera.updateProjectionMatrix();

            renderer.setSize( window.innerWidth, window.innerHeight );

			}

    function animate() {

				requestAnimationFrame( animate );
        
				render();

			}

    function render() {

				var time = performance.now() * 0.001;

				water.material.uniforms[ 'time' ].value += 1.0 / 60.0;

				renderer.render( scene, camera );

			}
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            
            		
			#blocker {
				position: absolute;
				width: 100%;
				height: 100%;
				background-color: rgba(0,0,0,0.5);
			}

			#instructions {
				width: 100%;
				height: 100%;

				display: -webkit-box;
				display: -moz-box;
				display: box;

				-webkit-box-orient: horizontal;
				-moz-box-orient: horizontal;
				box-orient: horizontal;

				-webkit-box-pack: center;
				-moz-box-pack: center;
				box-pack: center;

				-webkit-box-align: center;
				-moz-box-align: center;
				box-align: center;

				color: #ffffff;
				text-align: center;
				font-family: Arial;
				font-size: 14px;
				line-height: 24px;

				cursor: pointer;
			}

        
        </style>
    </head>
    <body>

  
    
        <script type = "module" src = "client.js"></script>

        		<div id="blocker">

			<div id="instructions">
				<span style="font-size:40px">Click to play</span>
				<br />
				(W, A, S, D = Move, SPACE = Jump, MOUSE = Look around)
			</div>

		</div>
    
    </body>
</html>

Do you see any errors or warnings in the browser console? Besides, you are adding a lot of logic at once to your app. Does everything works as expected if you do not add PointerLockControls?

i dont see any errors or warning in the browser…if i add a lot of logic at once to my app then would that be problems…? and if i remove the PointerLockControls and add
container = document.getElementById( ‘container’ );
container.appendChild( renderer.domElement );
code then it is working…!

///
document.body.appendChild( renderer.domElement ); this code was’nt there that was the reason why i dont see anything on screen!!!

1 Like

It’s sometimes problematic if new users add a lot of code at once to their app and then loose the overview. Better to enhance it gradually and always verify if the change works. Anyway, it seems you have already figured out what bit was missing^^.

2 Likes