烟台网站营销,四川省安监站网址,石家庄网站建设布局,自己建网站的费用three.js由场景、相机、渲染器、灯光、控制器等几个要素组成。每个要素都有不同的类型#xff0c;例如光照有太阳光、环境光、半球光等等。每种光照都有不同的属性可以进行配置。
场景
场景#xff08;scene#xff09;#xff1a;场景是所有物体的容器#xff0c;如果要…three.js由场景、相机、渲染器、灯光、控制器等几个要素组成。每个要素都有不同的类型例如光照有太阳光、环境光、半球光等等。每种光照都有不同的属性可以进行配置。
场景
场景scene场景是所有物体的容器如果要显示一个物体就需要将物体对象加入场景中。
场景是一个三维空间是存放所有物品的容器可以把场景想象成一个空房间房间里面可以防止要呈现的物体、相机、光源等。
let scene new THREE.Scene();
相机
相机camera相机决定了场景中那个角度的景色会显示出来。相机就像人的眼睛一样人站在不同位置抬头或者低头都能看到不同的景色。
let camera new THREE.PerspectiveCamera(75,
window.innerWidth/window.innerHeight, 0.1, 1000)
three.js中有两种常用的相机【透视投影相机perspectiveCamera和正交投影相机OrthographicCamera 】
透视投影相机perspectiveCamera
特点透视相机的效果是模拟人眼看到的效果跟人眼看到的世界是一样的近大远小
用途大部分场景都适合使用透视投影相机因为跟真实世界的观测效果一样
创建透视投影相机let camera new THREE.PerspectiveCamera(fov, aspect, near, far);
参数介绍fov视野表示摄像机能看到的视野。推荐默认值50aspect指定渲染结果水平方向和竖直方向长度的比值推荐默认值为窗口的宽高比即window.innerWidth/window.innerHeight如果比例设置的不对会发现渲染出来的画面有拉伸或者压缩的感觉。near近端渲染距离指定从距离摄像机多近的位置开始渲染推荐默认值0.1far远端距离指定摄像机从它所在的位置最远能看到多远太小场景中的远处不会被渲染太大会浪费资源影响性能推荐默认值1000。
近端渲染距离和远端距离这两个是设置相机可以看到的场景内容的范围只有离相机的距离大于near值小于far值且在相机的可视角度之内才能被相机投影到。
let camera new THREE.PerspectiveCamera(75,window.innerWidth / window.innerHeight,0.1,1000
);// 创建透视投影相机// 设置相机位置
camera.position.x 5;
camera.position.y 10;
camera.position.z 10;
// 以上设置相机位置可以简写为
camera.position.set(5, 10, 10);正交投影相机OrthographicCamera
特点正交投影则远近都是一样的大小三维空间中平行的线投影到二维空间也一定是平行的。
用途一般是用在制图、建模等方面方便观察模型之间的大小比例。
创建正交投影相机let camera new THREE.OrthographicCamera( left,right, top,bottom, near, far )
参数介绍left可被渲染空间的左端面right可被渲染空间的右端面top可被渲染空间的上端面bottom可被渲染空间的下端面near基于相机所在位置可被渲染空间的近端面far基于相机所在位置可被渲染空间的远端面
以上6个参数规定了相机视景体的左、右、上、下、前、后六个面的位置这六个投影面围成的区域就是相机投影的可见区域。在三维空间内只有在这个区域内的物体才会被相机看到。
let camera new THREE.OrthographicCamera(-2, 2, 1, -1, 1, 10);
// 创建正交投影相机// 设置相机位置
camera.position.x 5;
camera.position.y 10;
camera.position.z 10;
// 以上设置相机位置可以简写为
camera.position.set(5, 10, 10);正交投影和透视投影对比
正交投影物体反射的光平行投射到屏幕上其大小始终不变所以远近的物体大小一样。
透视投影符合我们平时看东西的感觉近大远小。
渲染器
渲染器renderder) 渲染器决定了渲染的结果应该花在页面的什么元素上面
Three.js中有很多种类的渲染器例如webGLRenderer、canvasRenderer、SVGRenderer通常使用的是WebGLRenderer渲染器。
创建WebGLRenderer渲染器var renderer new THERR.WebGLRenderer();
创建完渲染器后需要调用render方法将之前创建好的场景和相机相结合从而渲染出来即调用渲染器的render方法renderer.render(scene,camera)
let renderer new THREE.WebGLRenderer();
// 创建一个 WebGL 渲染器
renderer.setSize(window.innerWidth, window.innerHeight);
// 通过调用 setSize() 方法设置渲染的长宽设置渲染器为全屏
document.body.appendChild(renderer.domElement);
// 将渲染结果展示到页面上
renderer.render(scene, camera);
// 结合场景和相机进行渲染即用摄像机拍下此刻的场景最后一步说明 setSize() 方法设置渲染的长宽。 renderer 的 domElement 元素表示渲染器中的画布所有的渲染都是画在 domElement 上所以这里的 appendChild 表示将这个 domElement 挂接在 body 下面这样渲染的结果就能够在页面中显示了。 render()方法中传递我们的场景和相机相当于传递了一张由相机拍摄场景得到的一张底片它将图像渲染到我们的画布中。 灯光
灯光light模拟显示环境中的光照
let directionalLight new THREE.DirectionalLight(0xffffff, 0.8);控制器
控制器controls对3D场景进行旋转、放大缩小等操作
let controls new OrbitControls(camera, renderer.domElement);three.js基本要素
物体拍摄对象几何体模型、材质、网格
光源 码字不易各位大佬点点赞呗。
