一个案例带你从零入门Three.js，深度好文！

2024-08-05 59

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 【8月更文挑战第1天】本教程无需任何Threejs知识！本教程以入门为主，带你快速了解Three.js开发

简介

本教程无需任何Threejs知识！本教程以入门为主，带你快速了解Three.js开发。

基础3D案例

如图，我们创建一个基础3D场景，大致需要下面几步：

项目创建
创建3D场景Scene
创建几何体Geometry模型
创建虚拟相机Camera设置几何体观察角度
渲染3D场景到DOM上

vue项目创建

依赖安装

我们使用vite + vue3进行项目搭建，安装threejs依赖

项目搭建
npm install three

在componets中定义一个QuickStart.vue文件，用于写代码。

<template>
  <div ref="threeContainer"></div>
</template>
<script setup>
import * as THREE from "three";
import { onMounted, ref } from "vue";
// 创建3D场景渲染的DOM引用容器
const threeContainer = ref(null);
</script>
<style scoped></style>

在App.vue中引入QuickStart组件

创建3D场景Scene

场景很好理解，就是展示3D模型的三维空间。（你可以想像，默认的场景，就是是一团虚无的黑色混沌世界）

// 创建3D场景对象Scene
const scene = new THREE.Scene();

创建几何体Geometry模型

创建一个物体模型，分为如下几步：

创建不同类型的几何体（长方体、圆柱体球体等）
设置物体材质Material（物体的颜色、表面能不能反射光等）
使用材质和几何体生成一个物体的网格模型mesh
设置网格模型mesh在场景scene中的位置
网格模型mesh添加到3D场景scene中

创建几何体

Three.js提供了各种各样的几何体API，用来表示三维物体的几何形状。

我们创建一个长方体，并设置长宽高为100

//创建一个长方体几何对象Geometry
const geometry = new THREE.BoxGeometry(100, 100, 100);

设置物体材质Material

如果你想定义物体的外观效果，就需要通过材质Material相关的API实现。threejs提供很多材质

不同材质渲染效果不同，我们使用最简单的网格基础材质MeshBasicMaterial创建一个蓝色的材质效果

//创建一个材质对象Material
const material = new THREE.MeshBasicMaterial({
    color: 'blue'
});

生成物体的网格模型mesh

有了几何体和物体的材质，我们就可以生长物体的网格模型mesh了

// 两个参数分别为几何体geometry、材质material
const mesh = new THREE.Mesh(geometry, material); //网格模型对象Mesh

模型位置position

实际生活中，一个物体往往是有位置的，对于threejs而言也是一样的，你可以通过位置属性.position定义网格模型Mesh在三维场景Scene中的位置。

const mesh = new THREE.Mesh(geometry, material); //网格模型对象Mesh
//设置网格模型在三维空间中的位置坐标，默认是坐标原点
mesh.position.set(0,10,0);

将模型添加到3D场景scene中

scene.add(mesh);

使用虚拟相机观察模型

观察角度不同，物体展示给人的样子也不同。在3D建模中，我们使用相机来表示一个物体的观察角度。

其过程如下

创建一个相机
设置相机位置
相机观察目标

创建一个相机

// 实例化一个透视投影相机对象
const camera = new THREE.PerspectiveCamera();

设置相机位置.position

相机可以位于3D场景中的任意一个位置，因此我们需要基于坐标圆点设置

//相机在Three.js三维坐标系中的位置
// 根据需要设置相机位置具体值
camera.position.set(200, 200, 200);

相机观察目标.lookAt()

我们观察一个目标时，会注视物体的不同位置，看到的东西也是不一样的。我们可以直接观察模型的中心点

camera.lookAt(mesh.position);//指向mesh对应的位置

渲染3D场景到DOM上

要将3D场景渲染到DOM上需要如下几步操作

创建渲染器对象

// 创建渲染器对象
const renderer = new THREE.WebGLRenderer();

设置渲染尺寸

// 定义threejs输出画布的尺寸(单位:像素px)
const width = 800; //宽度
const height = 500; //高度
renderer.setSize(width, height); //设置three.js渲染区域的尺寸(像素px)

渲染

renderer.render(scene, camera); //执行渲染操作

挂载

onMounted(() => {
  threeContainer.value.appendChild(renderer.domElement);
});

完整代码

<template>
  <div class="wrap" ref="threeContainer"></div>
</template>
<script setup>
import * as THREE from "three";
import { onMounted, ref } from "vue";
const threeContainer = ref(null);
// 1、创建3D场景对象Scene
const scene = new THREE.Scene();
// 2、创建几何体Geometry模型
const geometry = new THREE.BoxGeometry(100, 100, 100);
const material = new THREE.MeshBasicMaterial({
  color: "blue", 
});
const mesh = new THREE.Mesh(geometry, material); 
scene.add(mesh);
// 3、使用虚拟相机观察模型
const camera = new THREE.PerspectiveCamera();
camera.position.set(200, 200, 200);
camera.lookAt(mesh.position); //坐标原点
// 4、渲染3D场景到DOM上
const width = 800; //宽度
const height = 500; //高度
const renderer = new THREE.WebGLRenderer();
renderer.setSize(width, height); //设置three.js渲染区域的尺寸(像素px)
renderer.render(scene, camera);
onMounted(() => {
  threeContainer.value.appendChild(renderer.domElement);
});
</script>
<style scoped></style>

三维坐标系

辅助观察坐标系

THREE.AxesHelper()的参数表示坐标系坐标轴线段尺寸大小，你可以根据需要改变尺寸

// AxesHelper：辅助观察的坐标系
const axesHelper = new THREE.AxesHelper(150);
scene.add(axesHelper);

three.js坐标轴颜色红R、绿G、蓝B分别对应坐标系的x、y、z轴，对于three.js的3D坐标系默认y轴朝上。

材质半透明设置

我们可以设置材质半透明,方便看到坐标系的坐标原点。

const material = new THREE.MeshBasicMaterial({
    color: 0x0000ff, //设置材质颜色
    transparent:true,//开启透明
    opacity:0.5,//设置透明度
});

设置模型在坐标系中的位置或尺寸

设置长方体xyz不同方向尺寸

// 设置几何体长宽高，也就是x、y、z三个方向的尺寸
//对比三个参数分别对应xyz轴哪个方向
new THREE.BoxGeometry(100, 60, 20);

改变位置

// 设置模型mesh的xyz坐标
mesh.position.set(90,0,0);

改变相机参数

camera.position.set(-200, 200, 200);
camera.lookAt(0, 0, 0); //坐标原点

现在我们观察的位置是（0,0,0），相机的位置位于（-200,200,200），如果我们把相机的位置改为（-200,0,0），此时看到的应该是模型的一个后视图

添加地面网格

// 添加网格地面
const gridHelper = new THREE.GridHelper(200, 10);
scene.add(gridHelper);

动画

threejs中最简单的动画实现方式就是不同角度重复渲染场景。

// 动画
renderer.setAnimationLoop(animation);
function animation(time) {
  mesh.rotation.x = time / 2000;
  mesh.rotation.y = time / 1000;
  renderer.render(scene, camera);
}

.setAnimationLoop ( callback : Function ) : undefined

callback — 每个可用帧都会调用的函数。如果传入‘null’,所有正在进行的动画都会停止。