three.js 在使用 PointerLockControls 时无法渲染场景答案

【问题标题】：three.js fails to render scene when using PointerLockControlsthree.js 在使用 PointerLockControls 时无法渲染场景
【发布时间】：2017-07-30 20:23:07
【问题描述】：

我的问题是，我的 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:")
}

如果您需要我的任何其他文件，请发表评论。
提前致谢。

【问题讨论】：

标签： javascript three.js

【解决方案1】：

也许您以错误的方式使用 PointerLockControls。你应该添加场景.add(controls.getObject()); 后 var controls = new PointerLockControls(camera); 因为 PointerLockControls 对象有一个 pitchObject 属性，你应该将它添加到场景中。

【讨论】：