【3D】three.js入门

资料来源：《黑马前端Web应用3D技术，Three.js实现3D汽车展厅_快速掌握Three.js基本概念》

一、背景

• Three.js 是基于 WebGL 封装的 API 库，在 javascript 中使用 Three.js 并实现 3D 场景

二、引入

• index.html 引入 js 文件

<script src="./three_exercise.js" type="module"></script>

• 下载 three.js

npm install three --s

• js 文件引入 three.js

import * as THREE from "three";

二、要素

（一）基础三要素

• 场景、像机、渲染器，三者结合才能渲染可见内容

1、scene

• 场景：3D 内容容器

import {
    
     Scene } from "three";

// 初始化场景
let scene;
function initScene(){
    
    
    scene = new Scene()
}
initScene()

2、camera

• 相机：人眼观察视角

// 初始化相机
let camera;
function initCamera(){
    
    
    camera = new PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000)	// 透视相机
    camera.position.z = 10	// 相机拉远
}

3、renderer

• 渲染器：3D 页面画布

// 初始化渲染器
let renderer;
function initRenderer(){
    
    
    renderer = new WebGLRenderer({
    
    
        antialias: true	// 去锯齿					
    })
    renderer.setSize(window.innerWidth, window.innerHeight)	// 画布大小
    document.body.appendChild(renderer.domElement)	// 挂载
}
initScene()

辅助条件

• 坐标轴

import {
    
     AxesHelper } from "three";

// 初始化坐标轴
function initAxesHelper(){
    
    
    const axesHelper = new AxesHelper(3)	// 调整坐标轴长度
    scene.add(axesHelper)	// 将坐标轴添加到场景
}
initAxesHelper()

• 轨道控制器

import {
    
    OrbitControls} from 'three/examples/jsm/controls/OrbitControls'

// 初始化坐标轴
let controls;
function initOrbitControls(){
    
    
    controls = new OrbitControls(camera, renderer.domElement)
}
initOrbitControls()

• 地面网格

import {
    
     GridHelper } from "three";

// 绘制地面网格
let grid;
function initGridHelper(){
    
    
    grid = new GridHelper(20, 40, 'red', '0xffffff')
    grid.material.opacity = 0.2
    grid.material.transparent = true
    scene.add(grid)
}
initGridHelper()

• 动画

// 动画
function render(time){
    
    
    renderer.render(scene, camera)	// 场景、相机、渲染器结合
    requestAnimationFrame(render)
    TWEEN.update(time)
}
render()

• 响应式

window.addEventListener('resize', function(){
    
    
    // camera
    camera.aspect = window.innerWidth / window.innerHeight
    camera.updateProjectionMatrix()
    // renderer
    renderer.setSize(window.innerWidth, window.innerHeight)
})

（二）mesh

• 几何体：3D 对象

import {
    
     Mesh } from "three";

// 创建网格/几何体
let mesh;
function initMesh(){
    
    
    // 形状
    const geometry = new BoxGeometry(1, 1, 1)
    // 纹理
    const texture = new TextureLoader().load(dream)
    // 材质
    const materal = new MeshBasicMaterial({
    
    
        color: 'white',
        map: texture
    })
    // 网格
    mesh = new Mesh(geometry, materal)
    scene.add(mesh)
}
initMesh()

（三）light

• 光源：灯光效果

// 光源
let spotLight;
spotLight = new SpotLight( 0xffffff );
spotLight.position.set( -40, 60, -10 );
scene.add( spotLight )