ThreeJS 不使用 setAnimationLoop 渲染 Cube

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 后无法设置相机位置检查这个堆栈溢出问题

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

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

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

ThreeJS 不使用 setAnimationLoop 渲染 Cube

ThreeJS not rendering Cube with setAnimationLoop

javascript

three.js

webvr