Three.js简介
Three.js是一个基于JavaScript编写的开源3D图形库，利用WebGL技术在网页上渲染3D图形。它提供了许多高级功能，如几何体、纹理、光照、阴影等，以便开发者能够快速地创建复杂且逼真的3D场景。同时，Three.js还具有很好的跨平台和跨浏览器兼容性，让用户无需安装任何插件就可以在现代浏览器上观看3D内容。
Three.js的应用
- 互动式可视化，比如卖车卖房的商城，3D效果能更好的展示商品内部解构。
- 游戏开发，比如我的世界等很多游戏。
- 虚拟现实和增强现实，Three.js可以与WebVR和WebAR等技术结合，帮助开发者快速构建虚拟现实和增强现实应用。比如应用中通过物体的影子判断光线的方向等。
- 影视动画人物建模
Three.js的基础知识
利用Three.js实现一个3D页面
html代码：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite App</title>
<style>
*{
margin: 0;
padding: 0;
}
canvas{
position: fixed;
left: 0;
top: 0;
width: 100vw;
height: 100vh;
display: block;
}
</style>
</head>
<body>
<div id="app"></div>
<script type="module" src="src/main.js"></script>
</body>
</html>
js代码：
// 引入three.js
import * as THREE from "three";
// 创建一个场景
const scene = new THREE.Scene();
// 创建一个相机
const camera = new THREE.PerspectiveCamera(
/*
视角(FOV):视野角度就是无论在什么时候，
你所能在显示器上看到的场景的范围，它的单位是角度(与弧度区分开)
*/
45,
/*
长宽比(aspect ratio):长宽比（aspect ratio）。 也就是你用一个物体的宽除以它的高的值。
比如说，当你在一个宽屏电视上播放老电影时，可以看到图像仿佛是被压扁的。
*/
window.innerWidth / window.innerHeight,
/*
近截面(near)
*/
0.1,
/*
远截面(far)
*/
1000);
// 创建渲染器
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
// 创建几何体
const geometry = new THREE.BoxGeometry(2, 2, 2);
// 创建材质
// const material = new THREE.MeshBasicMaterial({ color: 0xff0000 });
const materials = [
new THREE.MeshBasicMaterial( { color: 'blue' } ), // right
new THREE.MeshBasicMaterial( { color: 'yellow' } ), // left
new THREE.MeshBasicMaterial( { color: 0xff0000} ), // top
new THREE.MeshBasicMaterial( { color: 'white' } ), // bottom
new THREE.MeshBasicMaterial( { color: 'green' } ), // back
new THREE.MeshBasicMaterial( { color: 'red' } ) // front
];
// 创建网格
const cube = new THREE.Mesh(geometry, materials);
// 将网格添加到场景中
scene.add(cube);
// 设置相机位置
camera.position.z = 5;
camera.lookAt(0, 0, 0);
// 渲染
// renderer.render(scene, camera)
function animate () {
requestAnimationFrame(animate)
cube.rotation.x += 0.01;
cube.rotation.y += 0.01
renderer.render(scene, camera);
}
animate();
效果图：