学习ThreeJS

创建第一个应用

  使用Three JS进行编程的时候，都是在调用new Three().XXX 来实现方法，让我们先根据官方文档创建一个demo

https://threejs.org/docs/index.html#manual/zh/introduction/Creating-a-scene

那我们需要什么东西才能让这个场景build起来呢？

• 一个相机（camera），一般是使用PerspectiveCamera，因为最接近人的眼睛成像效果，还有正交相机等
  • 75, // fov 垂直方向上视角的大小 field of view
  • window.innerWidth / window.innerHeight, // aspect 纵宽比
  • 0.1, // near
  • 1000 // far
• 一个场景(scene)
• 一个渲染器 (renderer)
• 需要渲染的东西：使用哪种几何图形，使用什么材质？ 这里演示使用基础材质（MeshBasicMaterial）和立方体（BoxGeometry）

拿到了所有的实例，接下来可以开始逻辑部分

然后将创建的实例(cube)加入（add）到场景(scene)中，如下代码：

    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)

接着把渲染器加入到浏览器的body中：

document.body.appendChild(renderer.domElement)

创建的渲染器其实就相当于appen了一个canvas到dom里，我们可以调整canvas的大小，这并不是实时resize，如果用户修改窗体可视大小会留白

留个悬念：可以实时监听addListener resize？

renderer.setSize(window.innerWidth, window.innerHeight)

由于创建的相机和cube几何体都默认出现在(0,0,0)的位置，需要对相机在z轴上进行平移

camera.position.z = 5

设置一下地面

// 网格地面
const gridHelper = new THREE.GridHelper(10, 10)
scene.add(gridHelper)

最后把场景和照相机作为参数传到renderer的render函数里

 renderer.render(scene, camera)

如果想做出一个动画效果，就像下面代码块一样加上一个animate函数,这段代码每帧都会执行（正常情况下是60次/秒）

function animate() {
  requestAnimationFrame(animate) // 不能写死循环，需要调用dom提供的这个动画帧函数
  // mdn：https://developer.mozilla.org/zh-TW/docs/Web/API/window/requestAnimationFrame

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

  renderer.render(scene, camera) // 将renderer渲染的时机放到每一帧的函数调用里
}

animate() //调用一下

点击查看代码

<script>
import * as THREE from 'three'

const scene = new THREE.Scene()
const camera = new THREE.PerspectiveCamera(
  75, // fov  垂直方向上视角的大小    field of view
  window.innerWidth / window.innerHeight, // aspect 纵宽比
  0.1, // near
  1000 // far
)
camera.position.z = 5
camera.position.y = 2

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)

// 网格地面
const gridHelper = new THREE.GridHelper(10, 10)
cube.position.set(0, 3, 0)
scene.add(gridHelper)

function animate() {
  requestAnimationFrame(animate)

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

  renderer.render(scene, camera)
}

animate()
</script>