[Three.js-01] Three.js 入门

这是我的学习总结，水平有限，如有错误或不妥的地方还希望大家能够指出来（^_^）respect！另外我自己收集的【webgl\three.js\图形学】相关的关资源我已经放在微信群（WX: Galloping_Leo ）里面了，需要的话，加群，一起学习共同进步。

First Demo

我们先来写一个简单的 three.js 应用来摸清基本套路。先看代码

canvas {
    width: 100%;
    height: 100%
}

import * as THREE from 'three'

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

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

  // 创建并设置相机
  const aspect = window.innerWidth / window.innerHeight
  const camera = new THREE.PerspectiveCamera(75, aspect, 0.1, 100)
  camera.position.set(0, 4, 20)
  camera.lookAt(0, 0, 0)

  // 创建集合体
  const geometry = new THREE.BoxGeometry(10, 10, 10)
  // 创建一种材质供mesh使用
  const material = new THREE.MeshPhongMaterial({ color: 0x158772 })
  // 用前面所创建的几何体和材质创建 mesh 对象
  const mesh = new THREE.Mesh(geometry, material)
  scene.add(mesh)

  // 环境光
  const ambientLight = new THREE.AmbientLight(0xf1f5bd)
  scene.add(ambientLight)
  // 平行光 类似于太阳光线
  const light = new THREE.DirectionalLight(0xffffff, 1)
  light.position.set(-5, 10, 10)
  scene.add(light)

  function animation() {
    // 旋转
    mesh.rotateX(0.01)
    mesh.rotateY(0.01)

    // 执行渲染函数
    renderer.render(scene, camera)
    requestAnimationFrame(animation)
  }

  animation()
  return null
}

export default useDemo

通过上面的代码可以得到一个正在旋转的绿色立方体

const renderer = new THREE.WebGLRenderer() 初始化 three.js 的渲染器，之后通过 renderer.setClearColor 方法设置了背景色。window.document.body.appendChild(renderer.domElement) 把three.js 画布插入到界面中。three.js 所有内容都是通过 canvas 画布展现的，setSize 方法设置了 canvas 的尺寸为 window 的宽高（注意不是 canvas css 的尺寸，后续在响应式中会具体介绍）。
const scene = new THREE.Scene() 创建了一个场景，场景是容纳 3D 对象的载体。
const camera = new THREE.PerspectiveCamera(75, aspect, 0.1, 100) 创建了一个透视相机，并通过 camera.position.set 方法来设置相机的位置，通过 lookAt 来设置相机的朝向。
const geometry = new THREE.BoxGeometry(10, 10, 10) 创建一个立方几何体。
const material = new THREE.MeshPhongMaterial({ color: 0x158772 }) 创建一中材料用于几何体的表面的渲染。
const mesh = new THREE.Mesh(geometry, material) 基于已经创建好的 geometry 和 material 来创建 Mesh（网格）对象。可以理解为包含更多信息的几何体（如位置信息、几何体形状、材质等...）
创建了环境光和平行光。
renderer.render(scene, camera) 开始执行渲染。

由此可见 renderer（渲染器）、scene（场景）、camera、geometry、material、mesh、光源是 three.js 应用的基本组成部分，接下来我们具体介绍其中的几个关键点。

Camera 摄像机，它决定了我们在 three.js 构建的场景中所能看到的内容，three.js 提供了一些常用的相机类，如PerspectiveCamera（透视相机）、OrthographicCamera（正交相机）等。
Geometry 几何体，如球体、立方体、平面、狗、猫、人、树、建筑等物体的顶点信息。
Material 材质，表示几何体表面的绘制属性，包括使用的颜色，和光亮程度，材质将包裹到几何体的表面。
Mesh 网格，是从摄影机的角度渲染的主要对象。可以理解为用一种特定的材质(Material)和一个特定的几何体(Geometry)绘制的成的3D对象。材质(Material)和几何体(Geometry)可以被多个网格(Mesh)对象使用。
Light 光线，在three.js 场景中添加光线的效果、可以影响Mesh的表面属性、可以产生阴影等。
Scene 场景，他是所有3D对象的承载者，所有需要渲染被展示的效果都需要加入场景中。
Renderer 渲染器，它会根据相机和场景中的信息来绘制图像。

本篇旨在建立一个对 three.js 的基本认识，知道基本概念和简单使用，后续会更详细地进行分享，一步一步来，不积跬步无以至千里。

参考资料

Learn Three.js Fourth Edition
three.js fundamentals