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;

如果要移動相機，則需要將其作為另一個對象的子對象並將其位置設置為該對象