基本组件
1. 场景
three中可以放多个场景
2. 摄像机
主要有正交相机和透视相机。
正交相机:
透视相机:
- 透视相机:即离视点近的物体大,离视点远的物体小,近大远小。
Three.PerspectiveCamera =function (fov,aspect,near,far) ;
(1)参数fox为视角,可以理解为眼睛睁开的角度,0闭眼,看不到任何物体,180视界很广阔,但是物体就会感觉很小,因为在你的可视范围内比例变小了。一般人的视角在60左右。
(2)参数aspect,实际窗口的纵横比,即宽度/高度,宽度越大屏幕越宽,宽大于高,纵横比数字大于1,类似电影院,如果小于1 ,则类似手机屏幕比例。
(3)后两个参数近平面,到近处裁面的距离;远平面,到远处裁面的距离。
var camrea = Three.PerspectiveCamera(45,width/height,1,1000); scene.add(camera);
- 正交相机:
THREEOrthographicCamera( left : Number, right : Number, top : Number, bottom : Number, near : Number, far : Number )
left — 摄像机视锥体左侧面。
right — 摄像机视锥体右侧面。
top — 摄像机视锥体上侧面。
bottom — 摄像机视锥体下侧面。
near — 摄像机视锥体近端面。
far — 摄像机视锥体远端面。
var camera = new THREE.OrthographicCamera(-2,2,1.5,-1.5,1,10);
3. 渲染器
渲染器决定了渲染的结果应该画在页面的什么元素上面,并且以怎样的方式来绘制,可以理解为计算过程。
// 创建渲染器
let renderer = new THREE.WebGLRenderer({
antialias: true, // 是否执行抗锯齿
});
renderer.setPixelRatio(window.devicePixelRatio); // 设置设备像素比率。通常用于HiDPI设备,以防止输出画布模糊。
renderer.setSize(window.innerWidth, window.innerHeight); // 设置渲染器大小
renderer.render(scene, camera); // 把场景摄像机组合在一起进行渲染
要想实现动画效果,需要渲染循环:
render();
function render(