Three.js 入门

Demo代码地址：https://gitee.com/s0611163/three.js-demo
Three.jsThree.js下载

从GitHub上下载一个Release版本， https://github.com/mrdoob/three.js ，本Demo使用的是r112版本，下载地址：three.js-r112
【Three.js 入门】解压，复制build文件夹到Demo的threejs/build文件夹， examples/jsm文件夹到threejs/js文件夹， examples/textures/equirectangular/venice_sunset_1k.hdr文件复制到threejs/assets文件夹
threejs/js文件夹中的文件，引用three.module.js的路径需要修改
修改threejs/js/OrbitControls.js ，交换841和864行、843和866行即可，修改前鼠标右键控制旋转、中键控制放大缩小，修改后鼠标中键控制旋转，鼠标右键控制放大缩小
修改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);

文章插图
渲染器(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); // ~60ocamera.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截图

文章插图