基础入门

Three.js 是一个WebGL引擎，是基于javascript，可以直接运行CPU在浏览器端进行游戏驱动和图形驱动，我们可以用它来创建三维场景，包括摄影机、观影、材质等各种对象。

安装

在 vue3 项目中，使用 pnpm 安装 three.js（当前版本 0.165.0）：

// 安装
pnpm i three

// 引入
import * as THREE from "three"

入门示例

下方是官方入门示例，绘制一个绿色的立方体在屏幕中渲染，官方文档中讲解的很透彻！

在 three.js 中渲染物体，有三个核心对象：场景（scene）、相机（camera）和渲染器（renderer）。

<script setup lang="ts">
import * as THREE from "three"

// 创建场景
const scene = new THREE.Scene()
// 创建透视摄像机
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000)
// 创建渲染器，并设置大小尺寸
const renderer = new THREE.WebGLRenderer()
renderer.setSize(window.innerWidth, window.innerHeight)
document.body.appendChild(renderer.domElement)

// 创建一个立方体
const geometry = new THREE.BoxGeometry(1, 1, 1)
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 })
const cube = new THREE.Mesh(geometry, material)
scene.add(cube)

// 设置相机 Z 轴（垂直于屏幕）距离
camera.position.z = 5

// 创建旋转动画
function animate() {
  requestAnimationFrame(animate)

  cube.rotation.x += 0.01
  cube.rotation.y += 0.01

  renderer.render(scene, camera)
}

animate()
</script>