ThreeJS不使用setAnimationLoop渲染立方体

Question

因此，我正在研究ThreeJS WebVR页面。 （我对three.js相当陌生）

所以我很疲倦地制作一个基本场景来测试一些东西。 但是，当我用renderer.setAnimationLoop(render)加载页面时，我得到了1帧的绿色立方体，然后消失了。

（我将其与requestAnimationFrame()一起使用，但这不适用于WebVR）

这是我的测试沙箱代码：

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.01, 10);

var renderer = new THREE.WebGLRenderer({
  antialias: true
});
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight); 
renderer.vr.enabled = true;

document.body.appendChild(renderer.domElement);

var geometry = new THREE.BoxGeometry(1, 1, 1);
var material = new THREE.MeshBasicMaterial({
  color: 0x00ff00
});
var cube = new THREE.Mesh(geometry, material);
scene.add(cube);

camera.position.z = 5;

function render() {
  cube.rotation.x += 0.01;
  cube.rotation.y += 0.01;

  renderer.render(scene, camera);
}

function animate() {
  renderer.setAnimationLoop(render);
}

animate();

//Button vor start VR Session
document.body.appendChild(WEBVR.createButton(renderer));

Answer 1

setAnimationLoop不是问题，问题是启用vr时无法设置摄像机位置，请检查此堆栈溢出问题。使用VRControls时无法更改摄像机位置

检查此CodePen链接 ，我在其中通过更改立方体而不是相机的位置来固定代码

var cube = new THREE.Mesh(geometry, material);
cube.position.z = -5; //added this instead of camera.position.z = 5;

如果要移动相机，则需要将其作为另一个对象的子对象并将其位置设置为该对象