THREE js四大组件

最新推荐文章于 2025-05-23 13:15:00 发布

原创最新推荐文章于 2025-05-23 13:15:00 发布 · 535 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#three.js

WebGL 专栏收录该内容

1 篇文章

订阅专栏

在Three.js中，要渲染物体到网页，需要四个组件：场景（scene）、相机（camera）、渲染器（renderer）、几何体（geometry）

有了这四大组件，才能通过相机将场景渲染到网页上去。

四大组件：

场景：场景是所有物体的容器

 // 创建一个场景
var scene = new THREE.Scene()

相机：相机决定了场景中哪个角度的物体会显示出来，相机有很多种，我们在这里只介绍两种：透视相机和正投影相机。

透视相机：即离试点近的物体大，离视点远的物体小，远到几点即为消失，成为灭点；正投影相机: 即远处和近处的是一样大

// 定义一个相机
//var camera = new THREE.PerspectiveCamera=funtion(fov,aspect,near,far)
var camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);

相机参数：

视角fov:视角的大小，可以理解为眼睛睁开的大小，如果设置为0，就是闭上眼睛，什么都看不到；如果设置为180，可以认为视野广阔，但是在180度时，物体在整个可视区域比例会变小
近平面 near : 表示近处裁面的距离，不能设置为负值
远平面far : 表示远处的裁面
纵横比aspect : 实际窗口的纵横比，即宽度除以高度。这个值越大，说明宽度越大，看到的就是宽荧幕，如果这个值小于1 ，看到的就是竖屏的

3.渲染器

渲染器决定了怎么将场景画到屏幕上，通过计算显示到屏幕上，计算的过程叫做渲染。

//var renderer = new THREE.WebGLRenderer();
// 定义一个渲染器
var renderer = new THREE.WebGLRenderer();
// 设置渲染器的宽和高
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

4.网络模型：

网络模型（几何体）就是要显示在场景的对象

//var geometry = new THREE.Geometry();
// 定义一个几何体
var geometry = new THREE.CubeGeometry(1,1,1); 
// 设置几何体颜色
var material = new THREE.MeshBasicMaterial({color: 0x00ff00});
// 创建这个网络模型
var cube = new THREE.Mesh(geometry, material); 
// 将这个网络模型添加到场景中
scene.add(cube);