javascript - 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 后无法设置相机位置检查这个堆栈溢出问题 Unable to change camera position when using VRControls

检查这个CodePen Link我通过改变立方体而不是相机的位置来修复你的代码

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

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