https://gitee.com/s0/three.js-demo
创新互联建站服务项目包括曲松网站建设、曲松网站制作、曲松网页制作以及曲松网络营销策划等。多年来，我们专注于互联网行业，利用自身积累的技术优势、行业经验、深度合作伙伴关系等，向广大中小型企业、政府机构等提供互联网行业的解决方案，曲松网站推广取得了明显的社会效益与经济效益。目前，我们服务的客户以成都为中心已经辐射到曲松省份的部分城市，未来相信会继续扩大服务区域并继续获得客户的支持与信任！
从GitHub上下载一个Release版本，https://github.com/mrdoob/three.js，本Demo使用的是r112版本，下载地址：three.js-r112
解压，复制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;
import * as THREE from '../build/three.module.js';
let scene = new THREE.Scene();
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);
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语言
http://www.yanhuangxueyuan.com/
