three.js是一个基于WebGL的轻量级、易于使用的3D库。它极大地简化了WebGL的复杂细节,降低了学习成本,同时提高了性能。
three.js的三大核心元素:
-
场景(Scene)
- 场景是一个三维空间,是所有物品的容器。可以将其想象成一个空房间,里面可以放置要呈现的物体、相机、光源等。
- 使用方法:通过
new THREE.Scene()
来创建一个新的场景。
/**1. 创建场景 -- 放置物体对象的环境*/
const scene = new THREE.Scene();
- 相机(Camera)
相机用来确定观察位置、方向、角度。相机看到的内容,就是最终在屏幕上看到的内容。
three.js中常用的相机类型包括:
透视投影相机(PerspectiveCamera):模拟人眼看到的效果,近大远小。通过指定视野(Field of View,FOV)、长宽比、近端渲染距离和远端距离来创建。
例如:new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000)
/** 2.创建相机(这里是 透视摄像机--用来模拟人眼所看到的景象)*/
const camera = new THREE.PerspectiveCamera(75, // 视野角度window.innerWidth / window.innerHeight, // 长宽比0.1, // 进截面1000 // 远截面
);
// 设置相机位置
camera.position.set(0, 0, 10);
scene.add(camera); // 将相机添加到场景中
- 使用THREE.PerspectiveCamera构造函数创建一个新的透视相机实例。
- 75:视野角度(Field of View,简称FOV),表示相机“看到”的角度范围。这里设置为75度。
- window.innerWidth / window.innerHeight:相机的纵横比(Aspect Ratio),通常设置为窗口的宽度与高度的比值,以确保渲染的图像不会拉伸或压缩。
- 0.1:近裁剪面(Near Clipping Plane),表示相机能够“看到”的最近距离。小于这个距离的物体将不会被渲染。
- 1000:远裁剪面(Far Clipping Plane),表示相机能够“看到”的最远距离。大于这个距离的物体将不会被渲染。
- 使用camera.position.set()方法设置相机的位置。这里的坐标是(0, 0, 10),意味着相机位于世界坐标的原点上方10个单位的位置(在Z轴上)。在3D空间中,这通常意味着相机是“俯视”场景的。
正交投影相机(OrthographicCamera):远近都是一样的大小,三维空间中平行的线,投影到二维空间也一定是平行的。
在程序运行过程中,可以调整相机的位置、方向、角度。
// 假设你已经有一个场景(scene)对象 // 创建正交相机
const camera = new THREE.OrthographicCamera( left, // 相机左平面 right, // 相机右平面 top, // 相机上平面 bottom, // 相机下平面 near, // 近裁剪面 far // 远裁剪面
); // 设定相机位置(对于正交相机来说,这不是必需的,但通常你需要设置它以获得期望的视角)
camera.position.set(0, 0, 10); // 将相机添加到场景中(注意:相机通常不直接添加到场景中,而是由渲染器使用)
// 但在这里,如果你只是为了存储它或做其他操作,你可以这样做
// scene.add(camera); // (这通常是不必要的)
为了设置正交相机的参数,你需要定义六个值:
- left:相机左平面与视图的左边界的距离。
- right:相机右平面与视图的右边界的距离。
- top:相机上平面与视图的上边界的距离。
- bottom:相机下平面与视图的下边界的距离。
- near:近裁剪面,相机能够“看到”的最近距离。
- far:远裁剪面,相机能够“看到”的最远距离。
在实际使用中,你可能需要根据你的场景大小和所需的视图范围来计算这些值。例如,如果你想要一个与窗口宽度和高度匹配的正交视图,你可以这样设置:
const aspectRatio = window.innerWidth / window.innerHeight;
const width = 10; // 假设你想要的视图宽度为10个单位
const height = width / aspectRatio; // 计算视图高度以保持相同的宽高比 const camera = new THREE.OrthographicCamera( -width / 2, // left width / 2, // right height / 2, // top -height / 2, // bottom 1, // near 1000 // far
);
-
渲染器(Renderer)
- 渲染器是用来通过相机把画面渲染到屏幕上的组件。
- 使用方法:创建一个WebGL渲染器实例,设置渲染的尺寸大小,然后将渲染器的canvas内容添加到HTML文档的body中。
- 例如:使用
new THREE.WebGLRenderer()
来创建一个WebGL渲染器,并通过renderer.setSize(width, height)
设置渲染尺寸,最后使用document.body.appendChild(renderer.domElement)
将渲染的canvas添加到页面中。
以下是如何创建一个THREE.WebGLRenderer并将其添加到HTML文档中的基本步骤:
1.创建渲染器实例:
使用new THREE.WebGLRenderer()来创建一个新的WebGL渲染器实例。
2.设置渲染器尺寸:
使用renderer.setSize(width, height)方法来设置渲染器的宽度和高度。这通常与HTML元素的尺寸相匹配,例如元素。
3.将渲染器的DOM元素添加到HTML文档中:
渲染器会创建一个canvas元素,你可以通过renderer.domElement访问它。将这个canvas元素添加到HTML文档的某个位置,通常是body元素内。
4.渲染场景:
使用renderer.render(scene, camera)方法来渲染场景。这个方法需要两个参数:场景(Scene)和相机(Camera)。它会将相机视角下的场景内容渲染到渲染器的canvas元素上。
下面是一个简单的示例代码:
// 假设你已经有了场景(scene)和相机(camera)// 1. 创建渲染器实例
const renderer = new THREE.WebGLRenderer();// 2. 设置渲染器尺寸(通常与canvas元素或窗口大小匹配)
renderer.setSize(window.innerWidth, window.innerHeight);// 3. 将渲染器的DOM元素添加到HTML文档中
document.body.appendChild(renderer.domElement);// 4. 渲染场景
renderer.render(scene, camera);// 注意:你可能还需要一个动画循环来持续更新和渲染场景
function animate() {requestAnimationFrame(animate); // 请求下一个动画帧// 更新场景中的物体(如果需要)// ...// 渲染场景renderer.render(scene, camera);
}
animate();// 另外,你可能还需要处理窗口大小变化事件来更新渲染器尺寸
window.addEventListener('resize', onWindowResize, false);
function onWindowResize() {camera.aspect = window.innerWidth / window.innerHeight; // 更新相机纵横比(如果需要)camera.updateProjectionMatrix(); // 更新投影矩阵renderer.setSize(window.innerWidth, window.innerHeight); // 更新渲染器尺寸
}
在这个示例中,animate函数使用requestAnimationFrame来创建一个动画循环,该循环在每个动画帧中更新场景并渲染它。同时,还添加了一个事件监听器来处理窗口大小变化事件,以确保渲染器的尺寸与窗口尺寸保持一致。