Three.js使用详解

Three.js是一款强大的JavaScript 3D渲染引擎，可以用于创建各种3D场景、动画和交互应用。下面是Three.js的所有用法的详细介绍：

安装：

npm install three

在需要使用的页面引入：

import  * as Three from 'three'

1、创建场景

使用Three.js创建场景需要以下步骤：

// 创建场景
const scene = new THREE.Scene()

// 创建摄像机
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000)
camera.position.z = 5

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

// 将渲染器添加到DOM中
document.body.appendChild(renderer.domElement)

其中，PerspectiveCamera是一种透视摄像机，可以模拟人眼视角，参数分别为视角、宽高比、近裁剪面、远裁剪面。

2、创建几何体

使用Three.js创建几何体需要以下步骤：

// 创建几何体
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)

其中，BoxGeometry是一个立方体几何体，参数分别为宽、高、深。

3、创建光源

使用Three.js创建光源需要以下步骤：

// 创建点光源
const light = new THREE.PointLight(0xffffff, 1, 100)
light.position.set(0, 0, 10)

// 将光源添加到场景中
scene.add(light)

其中，PointLight是一种点光源，参数分别为颜色、强度、距离。

4、渲染场景

使用Three.js渲染场景需要以下步骤：

// 渲染场景
function render() {
  requestAnimationFrame(render)
  cube.rotation.x += 0.01
  cube.rotation.y += 0.01
  renderer.render(scene, camera)
}
render()

其中，requestAnimationFrame是浏览器提供的一种动画循环方法，用于实现流畅的动画效果。

5、加载模型

使用Three.js加载模型需要以下步骤：

// 加载模型
const loader = new THREE.GLTFLoader()
loader.load('model.gltf', function(gltf) {
  scene.add(gltf.scene)
}, undefined, function(error) {
  console.error(error)
})

其中，GLTFLoader是一种加载GLTF格式模型的加载器，参数分别为模型文件路径、加载完成回调、加载进度回调、加载错误回调。

6、创建动画

使用Three.js创建动画需要以下步骤：

// 创建动画
const mixer = new THREE.AnimationMixer(scene)
const clip = THREE.AnimationClip.findByName(gltf.animations, 'Animation1')
const action = mixer.clipAction(clip)
action.play()

// 更新动画
function animate() {
  requestAnimationFrame(animate)
  const delta = clock.getDelta()
  mixer.update(delta)
  renderer.render(scene, camera)
}
animate()

其中，AnimationMixer是动画混合器，用于管理动画的播放和更新；AnimationClip是动画片段，用于描述动画的属性和值；clipAction是动画控制器，用于控制动画的播放和暂停。

7、创建交互

使用Three.js创建交互需要以下步骤：

// 创建交互
const raycaster = new THREE.Raycaster()
const mouse = new THREE.Vector2()
const onClick = function(event) {
  event.preventDefault()
  mouse.x = (event.clientX / window.innerWidth) * 2 - 1
  mouse.y = -(event.clientY / window.innerHeight) * 2 + 1
  raycaster.setFromCamera(mouse, camera)
  const intersects = raycaster.intersectObjects(scene.children, true)
  if (intersects.length > 0) {
    const object = intersects[0].object
    console.log(object.name)
  }
}
window.addEventListener('click', onClick, false)

其中，Raycaster是光线投射器，用于检测与场景中物体的交互；Vector2是二维向量，用于描述鼠标位置。

以上就是Three.js的所有用法的详细介绍。