Demo代码地址:

​https://gitee.com/s0611163/three.js-demo​

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;

场景(Scene)

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

let scene = new THREE.Scene();

相机(Camera)

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

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

Three.js 入门_加载

渲染器(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);

灯光

//环境光
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);

相机控制

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();

加载模型

以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);

几何体、材质、网格

圆柱几何体的构造函数:
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);

动画

使用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);
});

着色器

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

WebGL和Three.js在线教程

​http://www.yanhuangxueyuan.com/​

Demo截图

Three.js 入门_默认值_02