Three.js使用教程

一、部署

首先进入到官网:Three.js – JavaScript 3D Library

如图所示：

这个就是官方提供的一个文档，在这个文档里面我们可以点击document的manual并且切换为中文：

如果平时要学习的话，我们可以在本地部署一个网站，通过本地访问这个文档：

首先点击首页的版本号，然后我们就会跳转到github网页上：

下拉，找到我们想使用的对应版本的three.js：这里以153版本为例：

找到153之后，点进去，拉到最下面：

下载压缩包。

然后打开vscode，解压后直接放进来：

部署之前要安装node环境，直接搜node.js官网然后下载一个：

安装完毕之后在终端输入npm install：

回车后会自动按照package.json里面的内容进行安装。

安装完毕后再package.json文件里面有这一行命令：

我们在终端里面输入npm run start：

点击第一个链接，就能进入本地的文件：

点击docs：

也可以点击editor：

二、创建第一个应用

文件夹下创建一个目录：

然后在终端中：

比如使用vite脚手架来创建一个项目，我们就输入npm init vite@latest

然后输入项目名称回车：

在这里可以使用我们想要的框架，第一个选择就是不适用任何框架，我们选第一个，回车

然后选JavaScript，回车：

这样就创建了我们的项目，我们先进入到我们项目的文件下：

因为这个脚手架需要依赖一些文件，所以我们也npm install 一下：

然后输入npm run dev进行运行：点进网页，下面是我做的一个网页：

然后中间这个模型是混元3D做的：腾讯混元3D

生成模型之后可以导出模型文件。

这是threestudio的3D生成模型，本地生成:threestudio-project/threestudio: A unified framework for 3D content generation.

import * as THREE from 'three';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
// 导入水面
import { Water } from 'three/examples/jsm/objects/Water2';
// 导入gltf载入库
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';// 初始化场景
const scene = new THREE.Scene();// 初始化相机
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 2000); // 透视相机，参数分别为视角，宽高比，近裁剪面，远裁剪面// 设置相机位置
camera.position.set(-250,350,330);// 更新摄像头的宽高比例
camera.aspect = window.innerWidth / window.innerHeight;// 更新摄像头投影矩阵
camera.updateProjectionMatrix();scene.add(camera) // 将相机添加到场景中// 初始化渲染器
const renderer = new THREE.WebGLRenderer({antialias: true, // 抗锯齿
});renderer.outputEncoding = THREE.sRGBEncoding; // 输出颜色空间为sRGB// 设置渲染器宽高
renderer.setSize(window.innerWidth, window.innerHeight);// 监听屏幕的大小改变，修改渲染器的宽高，相机的比例
window.addEventListener('resize', () => {renderer.setSize(window.innerWidth, window.innerHeight);camera.aspect = window.innerWidth / window.innerHeight;camera.updateProjectionMatrix();
});// 将渲染器的输出添加到dom元素中,也就是将渲染器添加到页面
document.body.appendChild(renderer.domElement);
const controls = new OrbitControls(camera, renderer.domElement); // 实例化控制器
function render() {// 渲染场景renderer.render(scene, camera);// 引擎自动更新渲染器，调用render函数requestAnimationFrame(render);
}
render();// 添加平面
const geometry = new THREE.PlaneGeometry(5200,5200); // 定义平面宽高
const material = new THREE.MeshBasicMaterial({ color: 0xffffff // 定义材质颜色
}); const plane = new THREE.Mesh(geometry, material); // 定义平面网格
plane.rotation.x = -Math.PI / 2;
scene.add(plane); // 将平面添加到场景中// 创建一个巨大的球背景
let texture = new THREE.TextureLoader().load('./public/sky4.jpg.png'); // 加载纹理
const skySphere = new THREE.SphereGeometry(2000, 60, 40); // 定义球体几何体,1000为半径，60为横向分段数，40为纵向分段数
const skyMaterial = new THREE.MeshBasicMaterial({ map: texture
}); const sky = new THREE.Mesh(skySphere, skyMaterial); // 定义球体网格
skySphere.scale(1, 1, -1); // 反转球体的方向
scene.add(sky); // 将球体添加到场景中scene.background = texture; // 设置背景纹理
scene.environment = texture; // 设置环境纹理
// 视频纹理
const video = document.createElement('video');
video.src = "./public/sky.mp4";
video.loop = true; // 循环播放
window.addEventListener("click",(e)=>{//当鼠标点击时播放视频//判断视频是否处于播放状态if(video.paused){video.play();let texture = new THREE.VideoTexture(video); // 视频纹理skyMaterial.map = texture; // 视频纹理skyMaterial.map.needsUpdate = true; // 更新材质}    
})
// 载入环境纹理hdr// // 创建水面
// const waterGeometry = new THREE.CircleGeometry(300, 64); // 定义水面几何体// const water1 = new Water(waterGeometry, {
//     textureWidth: 1024,
//     textureHeight: 1024,
//     color: 0xeeeeff,
//     flowDirection: new THREE.Vector2(1, 1), // 水流方向
//     scale: 6, // 增大这个值可以让波纹更明显
//     speed: 0.5, // 控制波纹流动速度（默认可能没有这个参数，根据版本调整）
// });// // 水面旋转至水平
// water1.rotation.x = -Math.PI / 2;
// scene.add(water1);
// 加载GLB模型
const loader = new GLTFLoader();// 使用相对路径加载模型（假设HTML文件在项目根目录）
loader.load('./public/b3fe3169a84d3f24c0c7fd48d7deebf5.glb',(gltf) => {// 模型加载成功const model = gltf.scene;// 可以根据需要调整模型的位置、旋转和缩放model.position.set(0, 100, 0); // 将模型放在原点model.scale.set(500, 500, 500); // 缩放模型，如果模型太大或太小可以调整这个值// 将模型添加到场景scene.add(model);console.log('模型加载成功');},(xhr) => {// 加载进度console.log((xhr.loaded / xhr.total * 100) + '% 已加载');},(error) => {// 加载错误console.error('模型加载错误:', error);}
);// 添加环境光 - 环境光会均匀照亮所有物体
const ambientLight = new THREE.AmbientLight(0xffffff, 0.5); // 颜色和强度
scene.add(ambientLight);// 添加平行光 - 模拟太阳光
const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8);
directionalLight.position.set(50, 100, 70); // 设置光源位置
scene.add(directionalLight);// 可以添加光源辅助线，帮助调试光源位置
const helper = new THREE.DirectionalLightHelper(directionalLight, 10);
scene.add(helper);