Threejs - 相机? 什么是相机? 照相机?

简介: Threejs - 相机? 什么是相机? 照相机?

相机

常见的相机有两类:透视相机 和 正交相机


透视相机

成像有近大远小的感觉,最接近自然的视图(图片引用网络图片)image.png

/*一:透视相机*/    /**     * 视角 :45度     * 宽高比 :window.innerWidth / window.innerHeight     * 近平面距离 :1     * 远平面距离 :1000     */    const camera = new THREE.PerspectiveCamera(45, width / height, 1, 1000); //视角 宽高比 近平面距离    //相机位置    // camera.position.x = 10;    // camera.position.y = 10;    // camera.position.z = 10;    // camera.up.x = 0;    // camera.up.y = 0;    // camera.up.z = 0;    // camera.lookAt(0,0,0);//x,y,z    camera.position.set(10,10,10); // 相机的位置    camera.lookAt(0,0,0); // 相机看着的方向


正交相机

成像有近大远小的感觉,最接近自然的视图(图片引用网络图片)image.png

/*二:正交相机*/    /**     * OrthographicCamera( left, right, top, bottom, near, far )     * 这里的 上下左右  是偏移量     * 这里添加了一个比例,如果相机的宽度个高度的比例和渲染的比例对不上,最后渲染出来就会变形     * near 观察者到最近的裁剪面的距离     * far 观察者到最远的裁剪面的距离     */    const acspet = width / height;    const camera2 = new THREE.OrthographicCamera(-5 * acspet, 5 * acspet, 5, -5, 1, 100);    camera2.position.set(10,10,10)    camera2.lookAt(0, 0, 0);

除了上述两种常用的相机,还有 CubeCamera(立方体相机或全景相机)和 StereoCamera(3D相机),这里就不做过多的阐述,想要学习的同学可以翻看threejs 官方文档


这一节我们说到相机,经过这两节的代码熟悉 我们知道了 THREE的 三大必要条件 :scene,camera,renderer 场景中必然有物体,有物体就可能有灯光,有灯光就可能有阴影...

下一章节我们将详细阐述灯光和阴影(后面章节我们会重点学习)


相关文章
|
8天前
|
图形学
unity 物体震动
在Unity中实现物体震动效果,主要通过改变物体的位置、旋转或缩放属性来模拟震动。以下是位置震动的实现原理及代码示例:通过随机生成微小偏移量并累加到物体位置上,在短时间内不断改变位置产生震动效果。生成随机偏移,并结合时间控制持续震动。
|
4月前
ThreeJs给物体添加贴图
这篇文章详细说明了在Three.js中如何给3D物体添加贴图,并展示了实现局部贴图的技术和方法。
225 1
ThreeJs给物体添加贴图
|
6月前
|
开发框架
threejs做特效:实现物体的发光效果-EffectComposer详解!
【8月更文挑战第7天】实现物体的发光效果-EffectComposer详解!
812 6
threejs做特效:实现物体的发光效果-EffectComposer详解!
|
7月前
相机镜头选择和计算
相机镜头选择和计算
47 0
|
9月前
THREE实战2_正交投影相机与透视相机
THREE实战2_正交投影相机与透视相机
105 1
|
传感器 编解码 监控
Baumer工业相机堡盟工业相机如何通过BGAPISDK显示彩色相机和黑白相机的图像(C#)
Baumer工业相机堡盟工业相机如何通过BGAPISDK显示彩色相机和黑白相机的图像(C#)
127 0
|
传感器 编解码 监控
Baumer工业相机堡盟工业相机如何通过BGAPISDK设置显示彩色相机和黑白相机的图像(C++)
Baumer工业相机堡盟工业相机如何通过BGAPISDK设置显示彩色相机和黑白相机的图像(C++)
100 0
|
传感器 算法 计算机视觉
Baumer工业相机堡盟相机彩色相机如何实现白平衡
Baumer工业相机堡盟相机彩色相机如何实现白平衡
178 0
检测使用校准的立体摄像头拍摄的视频中的人物并确定其与摄像头的距离
检测使用校准的立体摄像头拍摄的视频中的人物,并确定他们与摄像头的距离。
157 0
|
前端开发
WebGL雾和物体旋转
WebGL雾和物体旋转