场景起步

• 引入three.js

import * as THREE from 'three'

• 新建场景

const scene = new THREE.Scene()

• 新建相机

/**
* 远景相机（透视投影）
* @param fov — 相机视锥体垂直视角，从下到上的观察角度
* @param aspect — 相机视锥体宽高比
* @param near — 相机视锥体近裁剪面
* @param far — 相机视锥体远裁剪面
*/
const camera = new THREE.PerspectiveCamera(
  75,
  window.innerWidth / window.innerHeight,
  0.1,
  1000
)

/**
* 正交相机（正交投影）
* @param left — 相机视椎体（Camera frustum）左面。
* @param right — 相机视椎体（Camera frustum）右面。
* @param top — 相机视椎体（Camera frustum）上面。
* @param bottom — 相机视椎体（Camera frustum）下面。
* @param near — 相机视椎体（Camera frustum）前面（靠近相机的这一面）。
* @param far — 相机视椎体（Camera frustum）后面（远离相机的这一面）
*/
const camera = new THREE.OrthographicCamera( 
  width / - 2,
  width / 2, 
  height / 2, 
  height / - 2, 
  1, 
  1000 
)

/**
* 立方体相机
* @param near -- 近裁剪面距离
* @param far -- 远裁剪面距离
* @param cubeResolution -- 设置立方体的宽度
*/
const camera = new THREE. CubeCamera( 
  1,
  100000,
  128
)

• 添加renderer

const renderer = new THREE.WebGLRenderer({ 
  // 会否开启抗锯齿（开启后渲染平滑，但有性能消耗）
  antialias: true 
})
renderer.setSize(window.innerWidth, window.innerHeight)
// retina
renderer.setPixelRatio(window.devicePixelRatio)
// 设置场景背景色
renderer.setClearColor(0x000000)

• 渲染到html

  document.body.appendChild(renderer.domElement)

• 执行渲染

 renderer.render(scene, camera)
// 窗口响应，更新相机视锥体、相机投影矩阵、渲染视图大小
window.addEventListener(
  'resize',
  function () {
    camera.aspect = window.innerWidth / window.innerHeight
    camera.updateProjectionMatrix()
    renderer.setSize(window.innerWidth, window.innerHeight)
  },
  false
)