PointerLockControlsを使用しているときにthree.jsがシーンをレンダリングできない

Question

PointerLockControlsオブジェクトを作成するとすぐに私のthree.jsシーンがレンダリングに失敗するという問題があります。私は問題が何であるかということを何の手がかりとしても知らない。

main.js：

const THREE = require("three"); 
var PointerLockControls = require('three-pointerlock'); 
//utils 
import detect from "./detect" 
import dialogs from "./dialogs" 
import calc from "./calc" 
import {Player} from "./charackters" 


//3D stuff 
import world from "./world" 

//Scene creation 
var scene = new THREE.Scene(); 
var camera = new THREE.PerspectiveCamera(45, window.innerWidth/window.innerHeight, 1, 1000); 

var controls = new PointerLockControls(camera); 

camera.position.y = -50; 
camera.position.z = 40; 
camera.rotation.x = calc.rad(90); 


//WebGL Renderer 
var renderer = new THREE.WebGLRenderer(); 
renderer.setSize(window.innerWidth, window.innerHeight); 
renderer.setClearColor(0x000000); 
document.body.appendChild(renderer.domElement); 

world.drawFloor(scene, THREE); 
var cGeo = new THREE.BoxGeometry(10,10,10); 
var cTexture = new THREE.MeshNormalMaterial(); 
var Cube = new THREE.Mesh(cGeo, cTexture); 
scene.add(Cube); 


//tick function 
var clock = new THREE.Clock(true); 
function animate() { 
    requestAnimationFrame(animate); 
    controls.update(clock.getDelta); 
    renderer.render(scene, camera); 
} 

if(detect.webgl()){ 
    animate(); 
}else{ 
    dialogs.error("Your browser does not support WebGL. Please install a modern Browser such as Google Chrome or Mozilla Firefox to play AlphaWars!", "Warning:") 
} 

あなたは私の追加ファイルのいずれかが必要な場合はコメントしてください。
ありがとうございます。

Answer 1

あなたは間違った方法でPointerLockControlsを使用することがあります。 scene.add（controls.getObject（））;を追加する必要があります。 の後に var controls = new PointerLockControls（camera）; PointerLockControlsオブジェクトにはpitchObjectという属性があり、シーンに追加する必要があるためです。