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>