初识threejs

threejs官网速度慢

github git clone threejs最新版本到本地

git clone https://github.com/mrdoob/three.js.git
npm install // 安装依赖包
npm run start // 运行

即可在本地运行threejs，选择example目录即可在本地查看threejs案例，也可在本地查看文档，速度相当快～

创建第一个threejs项目

这里使用vite前端构建工具，vite快的原因是在开发过程中可以更快的启动项目，更便于开发；

npm init vite@latest my-vue-app --template vue
npm install // 安装依赖包
npm install three --save // 安装threejs
npm run dev // 运行

快速生成代码

vscode添加相关ai插件，可以自动生成代码

threejs核心

threejs使用WebGL作为底层技术 Three.js的核心原理主要包括：

场景图的构建：Three.js使用一个树状的场景图来表示3D空间中的各种元素，如摄像机、灯光、几何体、材质和纹理等。

WebGL渲染管线：Three.js封装了WebGL渲染流程，让开发者能够更简单地使用WebGL。

动画渲染：Three.js提供了一种方法来更新场景中的对象，以实现动画效果。

事件处理：Three.js提供了事件处理机制，如鼠标事件、键盘事件等，以便用户与3D场景交互。

扩展和插件：Three.js有一个活跃的社区，许多开发者为Three.js提供扩展和插件，以增强其功能。

// 引入Three.js
import * as THREE from 'three';
 
// 创建场景
const scene = new THREE.Scene();
 
// 创建摄像机
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); 
/* 参数说明：
fov: 摄像机视野的角度，通常定义为视野的垂直视角度，范围从0到180度。
aspect：画布的宽度与高度的比例。
near：摄像机的近剪裁面，这个距离以外的物体不会被渲染。
far：摄像机的远剪裁面，这个距离以内的物体不会被渲染。
/*

// 创建渲染器
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
 
// 创建几何体，threejs有很多几何体类型，具体参考文档
// 这里创建了立方体
const geometry = new THREE.BoxGeometry();
 
// 创建材质，threejs有很多材质类型，具体参考文档
// 这里创建基础颜色值为0x00ff00的基础材质
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
 
// 创建物体
// 创建了一个基础颜色值为0x00ff00的基础材质的立方体
const cube = new THREE.Mesh(geometry, material);
 
// 将物体添加到场景
scene.add(cube);
 
// 设置摄像机位置
// 物体摄像机默认添加到场景时坐标为(0,0,0),所以将摄像机设置z轴为5时，摄像机的位置在物体的正前方，这样才能清楚地看到物体
camera.position.z = 5;
 
// 渲染循环
function animate() {
 //requestAnimationFrame 是一个浏览器的API，用于在下一个动画帧上执行某段代码
  requestAnimationFrame(animate);
 
  // 旋转物体
  cube.rotation.x += 0.01;
  cube.rotation.y += 0.01;
 
  // 渲染场景
  renderer.render(scene, camera);
}
 
animate();