下载three.js包

// npm方式下载完整包
npm install three@0.105.1

// 也可以到github或官网直接下载
github: https://github.com/mrdoob/three.js
org: https://threejs.org/

引入包

// 标签方式
<script src="./node_modules/three/build/three.min.js"></script>

// js库方式
import * as THREE from './node_modules/three/build/three.module.js'

创建场景

// 场景
scene = new THREE.Scene()

// 雾，颜色需与场景背景色一致
scene.fog = new THREE.Fog(0xf7d9aa, 100, 950)

// 相机
camera = new THREE.PerspectiveCamera(
  60, // 相机视锥体垂直视角
  WIDTH / HEIGHT, // 相机视锥体宽高比
  1,
  10000)
camera.position.set(-10, 100, 200)

// 环境光
var light = new THREE.AmbientLight( 0x888888 ) // soft white light
scene.add( light )

// 渲染器
renderer = new THREE.WebGLRenderer({ 
  alpha: true, 
  antialias: true 
})
renderer.setSize(WIDTH, HEIGHT)
renderer.shadowMap.enabled = true

// 添加canvas标签到页面
container.appendChild(renderer.domElement)

// 渲染场景 动画循环
function animate () {
   renderer.render(scene, camera)
   requestAnimationFrame(animate)  // 刷新频率，执行下一帧画面
}
animate()

帧数显示

引入包
import Stats from './node_modules/three/examples/js/libs/stats.min.js'

var statsBox = document.getElementById('stats')

// 创建帧数状态
var stats = initStats()

function initStats () {
  var stats = new Stats()
  statsBox.appendChild(stats.domElement)
  return stats
}

辅助坐标系

// 引入包
import { OrbitControls } from './node_modules/three/examples/jsm/controls/OrbitControls.js'

// 创建辅助坐标系
var axishHelper = new THREE.AxisHelper(250)
scene.add(axishHelper)

鼠标控制

// 引入包
import { OrbitControls } from './node_modules/three/examples/jsm/controls/OrbitControls.js'

// 鼠标控制 （第二个参数可选）
var controls = new OrbitControls( camera, renderer.domElement )

// 渲染场景 动画循环
function animate () {
  renderer.render(scene, camera)
  stats.update()
  controls.update()
  requestAnimationFrame(animate)  // 刷新频率，执行下一帧画面
}

材质贴纸

var material = new THREE.MeshPhongMaterial({ 
  map: THREE.ImageUtils.loadTexture('./img/crate.jpg', {}, function() {
      renderer.render(scene, camera)
    })
})

定义物体

var Box = function () {
  var geometry = new THREE.BoxGeometry(20, 20, 20) // 形状
  var material = new THREE.MeshBasicMaterial({ // 材质
    color: Colors.green,
    transparent: true,
    opacity:0.9
  })
  this.mesh = new THREE.Mesh(geometry, material) // 创建网格模型
  this.mesh.castShadow = true // 是否被渲染到阴影映射中
  this.mesh.receiveShadow = true // 是否接收阴影效果
}

将物体添加到场景中

var box = new Box()
box.mesh.position.x = Math.sin(a) * 1450 // x位置
box.mesh.rotateZ(Math.PI * 0.25 * Math.random()) // 旋转角度
box.mesh.scale.set(.25,.25,.25) // 缩放大小
sea.mesh.add(box.mesh)

立方体角数位置

var geomCockpit = new THREE.BoxGeometry(180,60,60,1,1,1)
  //       4 -------------- 1
  // 点 5 -|----------- 0   |
  //    |  6 -----------|-- 3
  //    7  ------------ 2
  // 可随意操作某个角，变换各式各样
  geomCockpit.vertices[7].x+=20
  geomCockpit.vertices[2].z-=20
  geomCockpit.vertices[3].z+=20

为应变屏幕变化，可监听屏幕大小变化

window.addEventListener('resize', handleWindowResize, false)

function handleWindowResize() {
  HEIGHT = window.innerHeight
  WIDTH = window.innerWidth
  renderer.setSize(WIDTH, HEIGHT)
  camera.aspect = WIDTH / HEIGHT
  camera.updateProjectionMatrix()
}