Threejs操作模型之后复位

142 阅读1分钟

用Threejs做了一个3D文件的预览功能,其中有一个需求是复位操作,发现使用model.position.copy方法无法复位,调试之后发现是controls接管了这个渲染功能,要通过controls的reset方法去复位

在复位之前,需要在初始状态保存当前的位置信息。执行

loader.load(glbFile, function (gltf) {
  model = gltf.scene;

  // 设置模型的旋转角度
  model.rotation.y = Math.PI; // 旋转180度

  model.traverse((child) => {
    if (child.isMesh) {
      child.material.emissiveIntensity = 3.5;
      child.material.needsUpdate = true
    }
  });

  initialPosition = model.position.clone();
  initialRotation = model.rotation.clone();
  initialScale = model.scale.clone();

  // 主要是这一步
  controls.saveState()

  scene.add(model);
  animate();
}, undefined, function (error) {
  console.error(error);
});

在需要重置的地方,调用此方法即可

controls.reset()