three.js在使用PointerLockControls時無法呈現場景

我遇到問題，即我創建PointerLockControls對象後，我的three.js場景無法呈現。我有絕對的不知道問題是什麼。three.js在使用PointerLockControls時無法呈現場景

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:") 
}

，如果你需要我的任何其他文件請評論。
在此先感謝。

來源

2017-07-30 nictec

也許您以錯誤的方式使用PointerLockControls。你應該添加 scene.add（controls.getObject（））; var controls = new PointerLockControls（camera）; 由於PointerLockControls對象具有屬性pitchObject，因此應將其添加到場景中。

來源

2017-07-31 03:07:30

three.js在使用PointerLockControls時無法呈現場景

回答

相關問題