threejs(一)安装和创建第一个场景

Three.js 是一个功能强大且易于使用的 JavaScript 库,使开发人员能够在 Web 浏览器中创建出色的 3D 图形和动画效果。

1、安装步骤

方案一：在线引入对应的库

javascript 复制代码

import * as THREE from "https://esm.sh/three";
import { OrbitControls } from "https://esm.sh/three/examples/jsm/controls/OrbitControls";

方案二：使用 NPM 和构建工具进行安装（☆推荐）

css 复制代码

npm install --save three

在八青妹学习threejs的过程中，是在构建工具vite的基础上，使用npm安装的threejs库。

首先使用命令行，创建vite项目，按照步骤完成vite项目的搭建。创建一个项目名称threejs-project,选择无任何框架的Vanilla。

shell 复制代码

    npm create vite@latest
    Need to install the following packages:
    create-vite@5.3.0
    Ok to proceed? (y) y
    ? Project name: › threejs-project
    Select a framework: › Vanilla
    Select a variant: › JavaScript

2.进入到threejs-project项目中，并进行依赖的安装。

bash 复制代码

cd threejs-project
npm install

3.安装threejs插件

css 复制代码

npm install --save three

4.启动项目，检查安装是否成功

arduino 复制代码

npm run dev

启动后，打开给出的local地址 ,如下所示，说明第一个步骤完成。

2、第一个简易场景

2.1场景的基本对象

使用threejs搭建场景，有三个必不可缺的对象：场景（scene）、相机（camera）和渲染器（renderer）,这样能透过摄像机渲染出场景。

js 复制代码

//设置场景
const scene = new THREE.Scene();
//相机📷
const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
//渲染器
const renderer = new THREE.WebGLRenderer(); 
//渲染的尺寸
renderer.setSize( window.innerWidth, window.innerHeight ); 
//渲染到h5的地方
document.body.appendChild( renderer.domElement );

2.2了解透视摄像机的基本使用

其中，PerspectiveCamera（透视摄像机）来了解下基本使用。

PerspectiveCamera( fov : Number, aspect : Number, near : Number, far : Number )

fov --- 摄像机视锥体垂直视野角度
aspect --- 摄像机视锥体长宽比，一般情况使用渲染的屏幕尺寸：window.innerWidth / window.innerHeight
near --- 摄像机视锥体近端面
far --- 摄像机视锥体远端面

2.3往场景中添加元素

场景中，我们放置一个立方体(BoxGeometry)。并设置立方体的颜色为红色。

js 复制代码

//1.定义几何体形状
const geometry = new THREE.BoxGeometry( 1, 1, 1 ); 
//2.定义材质属性属性
const material = new THREE.MeshBasicMaterial( { color: 0xff0000 } );
//3.定义网格，网格包含一个几何体以及作用在此几何体上的材质
const cube = new THREE.Mesh( geometry, material );
//4.将网格添加到场景中
scene.add(cube)

2.4 相机与物体的位置

添加了小立方体，要让相机拍摄到,需要给相机的视角一个位置

js 复制代码

// 设置相机的位置
// 相机位于 (0, 1, 4) 的位置,即沿 x 轴位于原点,沿 y 轴位于 1 的高度,沿 z 轴位于 4 的距离
camera.position.set(0,1,4);
// 让相机看向场景的原点 (0, 0, 0)
// 这样可以确保相机正对着场景的中心
camera.lookAt(new THREE.Vector3());

2.6 渲染循环

要渲染场景，需要使用一个被叫做"渲染循环 "（render loop）或者"动画循环 "（animate loop）的东西。八青妹在webgl(五)简易动画和矩阵库的使用一文的开头讲到了 requestAnimationFrame()用来做循环绘制。requestAnimationFrame 有很多的优点。最重要的一点或许就是当用户切换到其它的标签页时，它会暂停，因此不会浪费用户宝贵的处理器资源，也不会损耗电池的使用寿命。在threejs中，我们仍然沿用该方法。

js 复制代码

function animate() { 
    requestAnimationFrame( animate ); 
    //立方体沿着x轴、y轴、z轴每帧旋转0.01
    cube.rotation.x += 0.01;
    cube.rotation.y += 0.01;
    cube.rotation.z += 0.01;
    renderer.render( scene, camera ); 
} 
animate();

具体的完整代码如下：

参考资料 threejs.org/docs

创建完第一个场景，是不是感觉比webgl简易多了。在webgl上创建一个立方体，是需要一个复杂的矩阵来实现。在threejs中，牢记场景、相机和渲染器，缺一不可。然后增加的元素都要scene.add(元素)，最后使用渲染循环，让元素动起来。