three.js - Basic scene

• three.js is the javascript library

• 4 elements:

  • a scene that will contain objects(scene likes a container), scene译为场景，可以理解为电影布景，在布景中一般会有演员、灯光、摄像机等
  • some objects
  • a camera
  • a renderer

• Mesh

  • combination of a geometry(the shape) and a material(how it looks)

• Camera

  • not visible
  • server as point of view when doing a render
  • can have multiple and switch between them different types
  • 垂直视野，视场（Field of View）
  • the aspect ratio 纵横比, the width of the render divided by the height of the render

• Renderer

  • render the scene from the camera point of view
  • result drawn into a canvas
  • a canvas is a HTML element in which you can draw stuff
  • three.js will use WebGL to draw the render inside this canvas

// main.js 

  // 导入three.js
  import * as THREE from 'three'

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

  /**
   * 2. 创建透视相机（近大远小，相机只渲染场景内的东西）
  **/
  const camera = new THREE.PerspectiveCamera(
    45, // 视角
    window.innerWidth / window.innerHeight, // 视椎体长宽比
    0.1, // 近端面
    1000 // 远端面
  )
  camera.position.z = 6 // 相机在z轴的位置

  /**
   * 3. 创建渲染器
  **/
  const renderer = new THREE.WebGLRenderer()
  renderer.setSize(window.innerWidth, window.innerHeight)
  document.body.appendChild(renderer.domElement) // 在body上添加渲染器，domElement指向canvas

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

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