Three.js 上的自动旋转动画

Question

我正在使用 Three.js 来渲染 3D 元素。 我使用mousemove 来随着鼠标的移动旋转场景。

我希望添加一个自动轻微旋转场景的动画。

它本质上会模拟通过鼠标移动完成的旋转，但会自动进行，因此加载时对象不会显示为静态。

有人知道实现这一目标的简单方法吗？ 提前致谢，

$(function() {

var logoSrc = './assets/vector_gltf/scene.gltf';
var renderer,
    scene,
    camera,
    holder = document.getElementById('holder');
    canvas = document.getElementById('canvasLogo');

renderer = new THREE.WebGLRenderer({
  canvas: canvas,
  antialias: true,
  alpha: true,
});

renderer.setSize($(holder).width(), $(holder).height());
holder.appendChild(renderer.domElement);

renderer.setClearColor( 0x000000, 0 );
renderer.setPixelRatio(window.devicePixelRatio);
// renderer.setSize(window.innerWidth, window.innerHeight);
//on resize
window.addEventListener('resize', () => {
  // Update camera
  camera.aspect = window.innerWidth / window.innerHeight;
  camera.updateProjectionMatrix();
  // Update renderer
  // renderer.setSize(window.innerWidth, window.innerHeight);
  renderer.setSize($(holder).width(), $(holder).height());
  holder.appendChild(renderer.domElement);
  renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
});

camera = new THREE.PerspectiveCamera(55, window.innerWidth / window.innerHeight, 0.1, 1000 );

scene = new THREE.Scene();

var light = new THREE.AmbientLight(0x0000ff, 1);
scene.add(light);
var light2 = new THREE.PointLight(0xff0000, 1);
scene.add(light2);

var loader = new THREE.GLTFLoader();
loader.load(logoSrc, handle_load);
var s;var mesh;
function handle_load(gltf) {
  s = gltf.scene;
  mesh = s.children[0].children[0].children[0];
  // s.children[0].material = new THREE.MeshStandardMaterial({
  //   normalMap : logoSrc + 'textures/StingrayPBS1SG_normal.png',
  //   emissiveMap : logoSrc + 'textures/StingrayPBS1SG_emissive.png',
  //   metalnessMap : logoSrc + 'textures/StingrayPBS1SG_metallicRoughness.png',
  //   map : logoSrc + 'textures/StingrayPBS1SG_baseColor.png'
  // });
  scene.add(s);
  s.position.y = -0.2;
  s.position.z = -2;//15
}

$(".intro").on("mousemove", function(e){
  mesh.rotation.set(-0.003 * (e.pageY - window.innerHeight / 20),0, -0.02 * (e.pageX - (window.innerWidth / 2) - 3.14));
  //.set(0.0018 * (e.pageY - 291.45) - 1.45,0, 0.02 * (e.pageX - (window.innerWidth / 2) - 3.14))
});

//anim
const clock = new THREE.Clock();
const loop = () =>
{
  const elapsedTime = clock.getElapsedTime();//delta time
  // Render
  renderer.render(scene, camera);
  // Call tick again on the next frame
  window.requestAnimationFrame(loop);
}
loop();

});

Answer 1

这就是你想要的：http://threejs.org/examples/misc_controls_orbit.html

包括orbit controls（下载后）：

<script src="js/controls/OrbitControls.js"></script>

设置变量：

var controls;

将控件附加到相机并添加监听器：

controls = new THREE.OrbitControls( camera );
controls.addEventListener( 'change', render );

并在您的动画函数中更新控件：

controls.update();
controls.autoRotate();

最后一行 (autoRotate) 确实是您想要的旋转，但其他一切都在设置您的控件。

Answer 2

您可以使用一个名为 animate() 的函数，该函数使您的 3D 元素自动移动并将其组合到 render() 方法中。

function animate() {
  requestAnimationFrame( animate );
  group.rotation += 0.005;
  render();
}

function render() {
  renderer.render( scene, camera );
}