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