three.js入门------创建一个three.js

安装依赖

yarn => yarn add three

npm  => npm install three

pnpm => pnpm install three

引入并使用

// 导入three.js
import * as THREE from 'three'
// 导入轨道控制器
import { OrbitControls } from 'three/addons/controls/OrbitControls.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)
document.body.appendChild(renderer.domElement)

// 创建渲染器
const renderer = new THREE.WebGLRenderer()
renderer.setSize(window.innerWidth, window.innerHeight)
document.body.appendChild(renderer.domElement)

// 创建几何体
const geometry = new THREE.BufferGeometry()
// 创建材质
const material = new THREE.MeshBasicMaterial({
  color: 0xff0000
})
// 创建网格
const plane = new THREE.Mesh(geometry, material)
// 添加到场景中
scene.add(plane)

// 设置相机位置
camera.position.z = 15
camera.position.y = 2
camera.position.x = 2
camera.lookAt(1, 0, 0)  // 默认看向原点
// 添加世界坐标辅助器
const axesHelper = new THREE.AxesHelper(5);
scene.add(axesHelper);

// 添加轨道控制器
const controls = new OrbitControls(camera, renderer.domElement)
// 设置带阻尼的惯性
controls.enableDamping = true
// 设置阻尼系数
controls.dampingFactor = 0.05
// 设置旋转速度
controls.autoRotate = true

// 渲染函数
function animate() {
  controls.update()
  requestAnimationFrame(animate)
  // 渲染
  renderer.render(scene, camera)
  // 更新补间动画
  TWEEN.update()
}
animate()

// 监听窗口的变化
window.addEventListener('resize', () => {
  // 重新渲染宽高比
  renderer.setSize(window.innerWidth, window.innerHeight)
  // 重置相机高度
  camera.aspect = window.innerWidth / window.innerHeight
  // 更新相机投影矩阵
  camera.updateProjectionMatrix()
})