文章目录
前言
three.js是一个基于原生WebGL封装的JavaScript库，用于在Web上创建和展示3D图形。 它通过提供简单的API，帮助开发者创建复杂的3D场景，极大地简化了Web 3D应用的开发过程。
一、安装 three
使用npm或者pnpm包管理工具安装
npm install --save three
pnpm install --save three
二、使用步骤
1.导入three、建立场景、相机和渲染器
我们需要导入three库以及准备以下几个对象：场景（scene）、相机（camera）和渲染器（renderer）
<script setup>
// 导入three
import * as THREE from 'three';
// 场景、摄像机和渲染器设置
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
//这里将renderer（渲染器）的dom元素（renderer.domElement）添加到HTML 文档中
document.body.appendChild(renderer.domElement);
</script>
2.添加立方体
- 创建一个立方体需要BoxGeometry（立方体）对象，此对象包含了一个立方体中所有的顶点（vertices）和面（faces）。
- 然后再给这个立方体一个材质（它的外观），Three.js 自带几种材质，在这里我们使用的是 MeshBasicMaterial。
- 需要一个 Mesh（网格）， 网格包含一个几何体以及作用在此几何体上的材质。
<script setup>
//创建立方体
let geometry = new THREE.BoxGeometry( 1, 1, 1 );
//添加材质（外观）
const material = new THREE.MeshBasicMaterial( {color: 0x123456} );
//创建网格
const cube = new THREE.Mesh( geometry, material );
//调用scene.add( ) 将物体添加到场景中
scene.add( cube );
</script>
3.渲染循环
以上代码写好后，运行页面并不会看到任何东西。这时候还需要将它渲染出来，代码如下：
<script setup>
// 渲染循环
function animate() {
requestAnimationFrame(animate);
//让立方体旋转
cube.rotation.x += 0.01
cube.rotation.y += 0.01
renderer.render(scene, camera);
}
animate();
</script>
三、其他
1. 轨道控制器 OrbitControls 和 坐标轴辅助对象AxesHelper
轨道控制器 可以使得相机围绕目标进行轨道运动。
为了方便用户交互，提高代码的实用性，我们可以添加轨道控制器，并为其设置一些属性，但需要注意的是，设置属性后需要在循环渲染中调用update()更新轨道控制器。相关代码如下：
// 导入轨道控制器
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
// 添加OrbitControls来控制摄像机
const controls = new OrbitControls(camera, renderer.domElement);
//设置一些属性
controls.enableDamping = true //启用阻尼（惯性）
controls.dampingFactor = 0.05 //阻尼惯性有多大
controls.autoRotate = true // 自动旋转
controls.autoRotateSpeed = 10.0 //围绕目标旋转的速度将有多快
// 为了更清晰的看到物体的运动轨迹，可以添加坐标轴辅助对象AxesHelper
// 红色代表 X 轴. 绿色代表 Y 轴. 蓝色代表 Z 轴.
const axesHelper = new THREE.AxesHelper( 5 );
scene.add( axesHelper );
// 渲染循环
function animate() {
//注意：以上属性设置后，必须再动画循环里面调用update()更新控制器
controls.update()
requestAnimationFrame(animate);
//让立方体旋转
cube.rotation.x += 0.01
cube.rotation.y += 0.01
renderer.render(scene, camera);
}
animate();
2.GUI创建可交互的控件（点击全屏+退出全屏）
为方便用户调整和控制场景中的各种参数，我们可以使用gui调试器创建控件，代码如下：
// 导入gui调试开发
import {GUI} from 'three/examples/jsm/libs/lil-gui.module.min.js'
// 创建GUI
let gui = new GUI();
//准备一个对象，对象里包含点击全屏以及退出全屏的函数
let screenObj = {
Fullscreen:function(){
document.body.requestFullscreen()
console.log("点击全屏");
},
ExitFullscreen:function(){
document.exitFullscreen()
console.log("退出全屏");
}
}
gui.add(screenObj,"Fullscreen").name('点击全屏')
gui.add(screenObj,"ExitFullscreen").name("退出全屏")
3.监听窗口的变化 执行一些重置操作
// 监听窗口的变化
window.addEventListener('resize',()=>{
// 重置渲染器宽高比
renderer.setSize(window.innerWidth,window.innerHeight)
// 重置相机宽高比
camera.aspect = window.innerWidth / window.innerHeight
// 更新相机投影矩阵
camera.updateProjectionMatrix()
});
四、完整代码
<script setup>
import * as THREE from 'three';
// 导入轨道控制器
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
// 导入gui调试开发
import {GUI} from 'three/examples/jsm/libs/lil-gui.module.min.js'
// 场景、摄像机和渲染器设置
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
camera.position.set(1,1,5)
camera.lookAt(0,0,0)
//这里将renderer（渲染器）的dom元素（renderer.domElement）添加到HTML 文档中
document.body.appendChild(renderer.domElement);
//创建立方体
let geometry = new THREE.BoxGeometry( 1, 1, 1 );
//添加材质（外观）
const material = new THREE.MeshBasicMaterial( {color: 0x123456} );
//创建网格
const cube = new THREE.Mesh( geometry, material );
// 添加OrbitControls来控制摄像机
const controls = new OrbitControls(camera, renderer.domElement);
//设置一些属性
controls.enableDamping = true //启用阻尼（惯性）
controls.dampingFactor = 0.05 //阻尼惯性有多大
controls.autoRotate = true // 自动旋转
controls.autoRotateSpeed = 10.0 //围绕目标旋转的速度将有多快
// 为了更清晰的看到物体的运动轨迹，可以添加坐标轴辅助对象AxesHelper
// 红色代表 X 轴. 绿色代表 Y 轴. 蓝色代表 Z 轴.
const axesHelper = new THREE.AxesHelper( 5 );
scene.add( axesHelper );
//调用scene.add( ) 将物体添加到场景中
scene.add( cube );
// 渲染循环
function animate() {
//注意：以上属性设置后，必须再动画循环里面调用update()更新控制器
controls.update()
requestAnimationFrame(animate);
//让立方体旋转
cube.rotation.x += 0.01
cube.rotation.y += 0.01
renderer.render(scene, camera);
}
animate();
// 创建GUI
let gui = new GUI();
//准备一个对象，对象里包含点击全屏以及退出全屏的函数
let screenObj = {
Fullscreen:function(){
document.body.requestFullscreen()
console.log("点击全屏");
},
ExitFullscreen:function(){
document.exitFullscreen()
console.log("退出全屏");
}
}
gui.add(screenObj,"Fullscreen").name('点击全屏')
gui.add(screenObj,"ExitFullscreen").name("退出全屏")
// 监听窗口的变化
window.addEventListener('resize',()=>{
// 重置渲染器宽高比
renderer.setSize(window.innerWidth,window.innerHeight)
// 重置相机宽高比
camera.aspect = window.innerWidth / window.innerHeight
// 更新相机投影矩阵
camera.updateProjectionMatrix()
});
</script>
五、效果图
vue3简单使用threejs立方缓冲几何体（BoxGeometry）效果图