Threejs 编辑器
在我们下载的threejs文件包中，有个editor目录，这里面是它的编辑器，我们可以将他部署后访问它的index.html文件，通过这个编辑器，我们可以更加直观的看到效果。可以设置成中文。
透视相机（PerspectiveCamera）使用透视投影进行渲染。在透视投影中，物体的大小会随着距离的增加而减小，这使得远离相机的物体看起来更小，符合现实世界中的透视效果。这种相机在制作 3D 游戏和仿真应用中非常常见。
视锥体是相机的可见空间。为了防止物体离摄像机过近，设置近裁剪面（Front Clipping Plane）。同时为了防止物体离摄像机太远而不可见，设置远裁剪面（Back Clipping Plane）。从摄像机发散的线4条线，与裁剪面相切构成的4个面是视锥面（Viewing Frustum），分别对应屏幕的四个边界。在视锥体中，视锥体就是：近裁剪面、远裁剪面以及四个视锥面围起来的区域，视锥体之外的区域对相机而言，是不可见的，也不会被渲染。
在threejs中创建透视相机的方法：
// 原型
let camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
// 例子
let camera = new THREE.PerspectiveCamera(75, 800 / 600, 0.1, 1000);
参数说明：
fov（视角）：视角表示相机的垂直视野范围，单位为度。较大的视角值会导致更大的视野，但可能会产生畸变。较小的视角值则会产生更窄的视野和更低的畸变。
aspect（宽高比）：高比表示相机水平视野范围与垂直视野范围的比值。通常，宽高比应该与渲染目标（如 Canvas 或 WebGLRenderTarget）的宽高比相同，以避免图像被拉伸或压缩。
near：相机视锥体近裁截面相对相机距离
far：相机视锥体远裁截面相对相机距离
相机位置
通过调整相机对象的position 属性可以调整相机的位置。
camera.position.set(500, 0, 0); //x轴方向观察
camera.position.set(0, 500, 0); //y轴方向观察
camera.position.set(0, 0, 500); //z轴方向观察
相机朝向
通过调用相机对象的 lookAt 方法可以设置相机在世界空间中面朝一个点。
camera.lookAt(0, 0, 0)
相机动画
连续不断地调整相机的位置，可以产生动画效果：
setInterval(function () {
// 改变相机的位置
camera.position.z -= 3;
camera.position.x -= 3;
renderer.render(scene, camera);
}, 100)
不过上面的方法虽然可以得到一个动画，但是不够优雅，也会有一些问题，BOM对象给我们提供的有一个内置的执行动画的定时器：requestAnimationFrame() 方法。它的作用是：告诉浏览器——你希望执行一个动画，并且要求浏览器在下次重绘之前调用指定的回调函数更新动画。所以上面的代码可以改成这样：
// 定义动画函数
function animate() {
camera.position.z -= 3;
camera.position.x -= 3;
renderer.render(scene, camera);
// 更新动画
requestAnimationFrame(animate);
}
// 执行
animate()
我们可以看到动画，但是，那个动画中的位置是沿直线改变的，体验并不好，我们可以将运动轨迹设置成一个圆。
let angle = 0; //用于圆周运动计算的角度值
const R = 300; //相机圆周运动的半径
// 定义动画函数
function animate() {
angle += 0.01;
// 相机y坐标不变，在XOZ平面上做圆周运动
camera.position.x = R * Math.cos(angle);
camera.position.z = R * Math.sin(angle);
//改变.position属性后，如果不执行.lookAt()方法，相机的观察方向是原来的位置，可以重新修正一下新的位置。
camera.lookAt(0, 0, 0)
renderer.render(scene, camera);
// 更新动画
requestAnimationFrame(animate);
}
// 执行
animate()
本课参考资料：
https://juejin.cn/post/7231089453695238204
https://juejin.cn/post/7062178363800027173
https://www.cnblogs.com/xiaohuochai/p/5777186.html
