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;

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

ThreeJS不使用setAnimationLoop

1 个答案: