Three.js入门

Three.js入门

three.js 源码下载地址：

https://threejs.org/build/three.js

three.js 核心

1.创建场景

const scene = new THREE.Scene()

2.创建摄像机（透视）

摄像机视角两种方式：透视和投影
PerspectiveCamera API参数：视角，投影窗口的长宽比，最近距离（默认0.1），最远距离（默认1000）

const camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight,0.1,1000)

3.创建ThreeJS渲染器

// 创建渲染器
const renderer = new THREE.WebGLRenderer()
// 设置渲染器场景的大小（窗口大小）
renderer.setSize(window.innerWidth, window.innerHeight)
// 把渲染器添加到页面中去
document.body.appendChild(renderer.domElement)

4.创建基础几何模型

顺序：

1.创建几何体长宽高（THREE.BoxGeometry 参数：x轴的长，y轴的长，z轴的长，用来设置几何体的长宽高）

2.给几何体添加材质

3.将几何模型和材质结合成网格对象

4.添加到场景里

难点：

1.桢渲染 requestAnimationFrame（ 在浏览器下次重绘之前继续更新下一帧动画，那么回调函数为自身则再次调用）

2.摄像机空间位置 camera.postion.z （摄像机空间z轴位置，数值太小代表太近看不见）

3.网格自旋转 cube.rotation.x 和 cube.ratation.y

// 创建几何模型
const geometry = new THREE.BoxGeometry(2,2,2)
// 创建材质
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 })
// 创建网格对象
const cube = new THREE.Mesh(geometry, material)
// 把网格对象添加到场景中去
scene.add(cube)

// 桢渲染
function animate() {
  // 在浏览器下次重绘之前继续更新下一帧动画，那么回调函数为自身则再次调用
  requestAnimationFrame(animate)
  
  // 网格对象自旋转x和y轴
  cube.rotation.x += 0.01
  cube.ratation.y += 0.01
  
  //渲染器渲染场景和摄像机
  renderer.render(scene, camera)
}
animate()

// 摄像机空间z轴位置
camera.postion.z = 6

5.动态响应窗口尺寸

理解：涉及相关尺寸：摄像机（长宽比例）和 渲染器（长宽大小）

因为需要用摄像机透视到渲染器上

window.addEventListener('resize', () => {
  // 初始化摄像机
  camera.aspect = window.innerWidht / window.innerHeight
  camer.updateProjectionMatrix()
  
  // 初始化渲染器尺寸
  renderer.setSize(window.innerWidth, window.innerHeight)
})

6.给几何模型纹理贴图

// 去锯齿
const renderer = new THREE.WebGLRenderer({ antialias: true }) 
renderer.setSize(window.innerWidth, window.innerHeight)
document.body.appendChild(renderer.domElement)

// 创建几何模型
const geometry = new THREE.BoxGeometry(2,2,2)
// 创建纹理贴图
const texture = new THREE.TextureLoader().load("./image/wenli.png")
// 创建材质
const material = new THREE.MeshBasicMaterial({ map: texture })
// 创建网格对象
const cube = new THREE.Mesh(geometry, material)
// 把网格对象添加到场景中去
scene.add(cube)