【three.js】简介和入门-编程知识

【three.js】简介和入门

Three.js简介

Three.js是一个基于JavaScript编写的开源3D图形库，利用WebGL技术在网页上渲染3D图形。它提供了许多高级功能，如几何体、纹理、光照、阴影等，以便开发者能够快速地创建复杂且逼真的3D场景。同时，Three.js还具有很好的跨平台和跨浏览器兼容性，让用户无需安装任何插件就可以在现代浏览器上观看3D内容。

Three.js的应用

互动式可视化，比如卖车卖房的商城，3D效果能更好的展示商品内部解构。
游戏开发，比如我的世界等很多游戏。
虚拟现实和增强现实，Three.js可以与WebVR和WebAR等技术结合，帮助开发者快速构建虚拟现实和增强现实应用。比如应用中通过物体的影子判断光线的方向等。
影视动画人物建模

Three.js的基础知识

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' } ), // rightnew THREE.MeshBasicMaterial( { color: 'yellow' } ), // leftnew THREE.MeshBasicMaterial( { color: 0xff0000} ), // topnew THREE.MeshBasicMaterial( { color: 'white' } ), // bottomnew THREE.MeshBasicMaterial( { color: 'green' } ), // backnew 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.01renderer.render(scene, camera);
}
animate();