threejs查看物体

开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的30天，点击查看活动详情

控制器

想要查看物体，首先要了解控制器，控制器是什么呢，控制器就是可以操纵相机大的东西，可以让控制随意移动相机的位置

轨道控制器（OrbitControls）

Orbit controls（轨道控制器）可以使得相机围绕目标进行轨道运动。
要使用这一功能，就像在/examples（示例）目录中的所有文件一样， 您必须在HTML中包含这个文件。 可以利用轨道控制器，将摄像机360度去移动，然后相机可以拍摄到不同角度的物体的不同的展示效果

直接导入轨道渲染器，在threejs的examples里面，然后new一个 OrbitControls ,将相机和renderer的dom传入进去，就可以通过鼠标移动相机了，但是虽然移动了相机，视图并不会更新，因为浏览器渲染的是一个快照，不会因为数据变了而自动重新渲染，此时，我们可以利用requestAnimationFrame这个方法，此方法是浏览器自带的方法，大多时候可以通过该方法实现复杂的动画，他的执行频率是没针执行一下，尽可能低的消耗浏览器的性能，从而实现流畅的视觉效果，实现一个render方法，里面是重新根据场景和相机渲染，然后每个关键帧都会重新渲染一次，此时，我们移动鼠标，就可以看到物体在自由自在的旋转。

import {
    OrbitControls
} from 'three/examples/jsm/controls/OrbitControls'

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



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

OrbitControls 接收的两个参数如下 object: （必须）将要被控制的相机。该相机不允许是其他任何对象的子级，除非该对象是场景自身。

domElement: 用于事件监听的HTML元素。