使用threejs渲染模型后,模型的角度和大小不是自己想要的怎么办?

threejs yekong

如果在 Three.js 中渲染模型后,模型的角度和大小不是你想要的,可能是因为模型的初始朝向和尺寸与你期望的不一致。解决这个问题可以通过调整相机的位置来实现。

在threejs项目中,相机的位置会影响我们看到的模型的大小以及角度,所以如果模型的角度和大小不符合我们的期望,我们只需要设置相机的位置即可。

那么问题来了:我们不知道相机放在什么位置才能正好符合我们的要求。

大概流程分为三步走

1 通过鼠标设置好角度和大小
2 获取相机坐标
3 设置相机坐标

通过鼠标设置好角度和大小

我们可以通过控件对象,通过鼠标拖动来将模型的大小和角度调整成我们想要的效果。

var controls = new OrbitControls(camera, renderer.domElement);

获取相机坐标

我们通过在render里面实时输出相机的信息,来获取我们想要的坐标

function render() {
  renderer.render(scene, camera); //执行渲染操作
  requestAnimationFrame(render); //请求再次执行渲染函数render,渲染下一帧
  console.log(camera);//通过相机控件OrbitControls旋转相机,选择一个合适场景渲染角度
}
render();

获取相机的坐标信息positon
获取相机的坐标信息positon

回填设置相机坐标

通过camera.position.set重新设置相机坐标。

camera.position.set(245, 140, -246);//通过相机控件OrbitControls旋转相机,选择一个合适场景渲染角度

刷新页面后会发现默认模型的角度和大小就是我们想要的效果了。

喜欢