Three.js 入门

Three.js下载

1. 从GitHub上下载一个Release版本，https://github.com/mrdoob/three.js，本Demo使用的是r112版本，下载地址：three.js-r112

2. 解压，复制build文件夹到Demo的threejs/build文件夹，examples/jsm文件夹到threejs/js文件夹，examples/textures/equirectangular/venice_sunset_1k.hdr文件复制到threejs/assets文件夹

3. threejs/js文件夹中的文件，引用three.module.js的路径需要修改

4. 修改threejs/js/OrbitControls.js，交换841和864行、843和866行即可，修改前鼠标右键控制旋转、中键控制放大缩小，修改后鼠标中键控制旋转，鼠标右键控制放大缩小

5. 修改threejs/js/OrbitControls.js，分别在文件开头和607行代码前添加如下代码

import { Euler } from "../../build/three.module.js";

var euler = new Euler(0, 0, 0, 'YXZ');
function getTarget(length) {
    var position = scope.object.position.clone();
    var length = length || (spherical.radius > 700 ? spherical.radius : 700);
    euler.setFromQuaternion(scope.object.quaternion);
    position.set(position.x - length * Math.sin(euler.y), position.y + length * Math.sin(euler.x), position.z - length * Math.cos(euler.y));
    return position;
}
this.getTarget = getTarget;

相关问答

Q1: 场景(Scene)

import * as THREE from '../build/three.module.js';

let scene = new THREE.Scene();

Q2: 相机(Camera)

let near = 1;
let far = ;
let el = document.querySelector("#threeContainer");

/*
    创建相机对象
    PerspectiveCamera透视投影相机
    OrthographicCamera正交投影相机
*/
let camera = new THREE.PerspectiveCamera(60, el.clientWidth / el.clientHeight, near, far);
scene.add(camera);

Q3: 渲染器(Renderer)

let renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.domElement.id = 'threeCanvas';
renderer.physicallyCorrectLights = true;
renderer.outputEncoding = THREE.sRGBEncoding;
renderer.setClearColor(0x002b4b);
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(el.clientWidth, el.clientHeight);

el.appendChild(renderer.domElement);

Q4: 灯光

//环境光
let ambientLight = new THREE.AmbientLight(0xFFFFFF, 0.5); 
camera.add(ambientLight);

//平行光
let directionalLight = new THREE.DirectionalLight(0xFFFFFF, 1); 
directionalLight.position.set(0.5, 0, 0.866); // ~60º
camera.add(directionalLight);

Q5: 相机控制

import { MapControls } from '../js/controls/OrbitControls.js';

//创建场景控制对象
let controls = new MapControls(this.camera, this.renderer.domElement);
controls.autoRotate = false;
controls.autoRotateSpeed = -10;

//设置相机位置和焦点
camera.position.set(-12.34, 120.88, -48.14); 
controls.target.set(-12.52, 3.72, -12.54);
controls.update();

Q6: 加载模型

以GLTF格式的模型为例

import { GLTFLoader } from '../js/loaders/GLTFLoader.js';

let onProgress = function (xhr) { }; //加载进度

let onError = function (xhr) { }; //加载出错

let url = '"./GLTF/four/hefeiqizhong/hfqz_yc.glb"';
let loader = new GLTFLoader();
loader.load(url, gltf => {
    const model = gltf.scene || gltf.scenes[0];
    scene.add(model);
}, onProgress, onError);

Q7: 几何体、材质、网格

圆柱几何体的构造函数：
CylinderGeometry(radiusTop : Float, radiusBottom : Float, height : Float, radialSegments : Integer, heightSegments : Integer, openEnded : Boolean, thetaStart : Float, thetaLength : Float)
radiusTop — 圆柱的顶部半径，默认值是1。
radiusBottom — 圆柱的底部半径，默认值是1。
height — 圆柱的高度，默认值是1。
radialSegments — 圆柱侧面周围的分段数，默认为8。
heightSegments — 圆柱侧面沿着其高度的分段数，默认值为1。
openEnded — 一个Boolean值，指明该圆锥的底面是开放的还是封顶的。默认值为false，即其底面默认是封顶的。
thetaStart — 第一个分段的起始角度，默认为0。（three o'clock position）
thetaLength — 圆柱底面圆扇区的中心角，通常被称为“θ”（西塔）。默认值是2*Pi，这使其成为一个完整的圆柱。

//圆柱几何体
let cylinder = new THREE.CylinderGeometry(0, 100, 300, 32); //参数分别表示 圆柱的顶部半径、圆柱的底部半径、圆柱的高度、圆柱侧面周围的分段数

//几何体旋转
cylinder.rotateX(Math.PI / 2); //绕x轴旋转90度

//基础网格材质
let material = new THREE.MeshBasicMaterial({ color: 0xff0000, opacity: 0.5, transparent: true });

//网格
let mesh = new THREE.Mesh(cylinder, material);

//将物体添加到场景中
scene.add(mesh);

Q8: 动画

使用tween.js实现动画

let position = [-205, 3479, 4412];
let target = [-179, 186, 519];

let tween = new TWEEN.Tween(camera.position).to({
    x: position[0],
    y: position[1],
    z: position[2]
}, 3000).start().onUpdate(() => {
    controls.target.set(...target);
    controls.update();
}).onComplete(() => {
    TWEEN.remove(this.tween);
});

Q9: 着色器

实现Three.js未提供的特殊效果时需要使用着色器语言，例如实现带箭头的线、火焰效果时可能会用到，语法类似C语言

Q10: WebGL和Three.js在线教程

http://www.yanhuangxueyuan.com/

Q11: Demo截图