three.js--基础组件

基本组件

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(