安装:cnpm install three #three库，安装下面之前必须先安装这个，不然报餐
引用：import * as THREE from 'three' 或 var THREE = require('three')
引用：import {CSS2DObject,CSS2DRenderer} from 'three/examples/jsm/renderers/CSS2DRenderer'; #绘制一个2D效果，还有个CSS3DRenderer
安装：cnpm install three-orbit-controls #模型鼠标转动，放大放小
引用：const OrbitControls = require("three-orbit-controls")(THREE);
安装：cnpm i --save three-obj-mtl-loader #该插件包括加载.obj和.mtl 文件的加载器
引用：import {MTLLoader,OBJLoader} from 'three-obj-mtl-loader';
安装：cnpm install --save d3-geo
引用：import * as d3 from 'd3-geo';
动画
安装cnpm install @tweenjs/tween.js -S
import TWEEN from '@tweenjs/tween.js';
方法封装
import { scene } from './scene/index.js'//Three.js三维场景
import { renderer, camera } from './RendererCamera.js'//渲染器对象和相机对象
// 渲染循环
function render() {
renderer.render(scene, camera); //执行渲染操作
requestAnimationFrame(render); //请求再次执行渲染函数render，渲染下一帧
// console.log(camera.position);//通过相机控件OrbitControls旋转相机，选择一个合适场景渲染角度
}
render();
export {renderer}
使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Three.js中文网：http://www.webgl3d.cn/</title>
<style>
body {
margin: 0;
overflow: hidden;
}
</style>
</head>
<body>
<script type="module">
import {renderer} from './RenderLoop.js'
//Three.js渲染结果Canvas画布插入到body元素中
document.body.appendChild(renderer.domElement);
</script>
</body>
</html>
简单使用three
1、引入
import * as THREE from 'three';
const OrbitControls = require("three-orbit-controls")(THREE);
import {MTLLoader,OBJLoader} from 'three-obj-mtl-loader';
import {CSS2DObject,CSS2DRenderer} from 'three/examples/jsm/renderers/CSS2DRenderer';
2、vue中使用
<template>
<div class="box">
<div id="container" style="width: 2608px;height: 990px;"></div>
</div>
</template>
<script>
export default {
data() {
return {
}
},
mounted () {
this.init()
},
methods: {
init () {
/**
* 创建场景对象Scene
*/
var scene = new THREE.Scene();
/**
* 创建网格模型
*/
// var geometry = new THREE.SphereGeometry(60, 40, 40); //创建一个球体几何对象
var geometry = new THREE.BoxGeometry(100, 100, 100); //创建一个立方体几何对象Geometry
var material = new THREE.MeshLambertMaterial({
color: 0x0000ff
}); //材质对象Material
var mesh = new THREE.Mesh(geometry, material); //网格模型对象Mesh
scene.add(mesh); //网格模型添加到场景中
/**
* 光源设置
*/
//点光源
var point = new THREE.PointLight(0xffffff);
point.position.set(400, 200, 300); //点光源位置
scene.add(point); //点光源添加到场景中
//环境光
var ambient = new THREE.AmbientLight(0x444444);
scene.add(ambient);
// console.log(scene)
// console.log(scene.children)
/**
* 相机设置
*/
var width = 2608; //窗口宽度
var height = 990; //窗口高度
var k = width / height; //窗口宽高比
var s = 200; //三维场景显示范围控制系数，系数越大，显示的范围越大
//创建相机对象
var camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 1000);
camera.position.set(200, 300, 200); //设置相机位置
camera.lookAt(scene.position); //设置相机方向(指向的场景对象)
/**
* 创建渲染器对象
*/
var renderer = new THREE.WebGLRenderer();
renderer.setSize(width, height);//设置渲染区域尺寸
renderer.setClearColor('#071f38', 1); //设置背景颜色
document.getElementById('container').appendChild(renderer.domElement); //body元素中插入canvas对象
//执行渲染操作 指定场景、相机作为参数
//间隔20ms周期性调用函数fun,20ms也就是刷新频率是50FPS(1s/20ms)，每秒渲染50次
var _this = this;
setInterval(function(){
_this.render(renderer,scene,camera,mesh);
// renderer.render(scene,camera);//执行渲染操作
// mesh.rotateY(0.01,1);//每次绕y轴旋转0.01弧度
},20);
// renderer.render(scene, camera);
},
// 渲染函数，转动
render(renderer,scene,camera,mesh) {
renderer.render(scene,camera);//执行渲染操作
mesh.rotateY(0.01,1);//每次绕y轴旋转0.01弧度
}
},
}
</script>
<style lang="scss">
</style>
创建对象
/**
* 创建场景对象Scene
*/
var scene = new THREE.Scene();
创建网格模型
var geometry = new THREE.SphereGeometry(60, 40, 40); //创建一个球体几何对象
var geometry = new THREE.BoxGeometry(100, 100, 100); //创建一个立方体几何对象Geometry
var geometry = new THREE.BoxGeometry(100, 100, 100);//长方体 参数：长，宽，高
var geometry = new THREE.SphereGeometry(60, 40, 40);// 球体 参数：半径60 经纬度细分数40,40
var geometry = new THREE.CylinderGeometry( 50, 50, 100, 25 );// 圆柱 参数：圆柱面顶部、底部直径50,50 高度100 圆周分段数
var geometry = new THREE.OctahedronGeometry(50);// 正八面体
var geometry = new THREE.DodecahedronGeometry(50);// 正十二面体
var geometry = new THREE.IcosahedronGeometry(50);// 正二十面体
创建材质（模型颜色）
//材质对象Material
var material = new THREE.MeshLambertMaterial({
color: 0x0000ff
});
//材质对象
var sphereMaterial=new THREE.MeshLambertMaterial({
color:0xff0000,
opacity:0.7,//透明度设置，0表示完全透明，1表示完全不透明
transparent:true//是否开启透明，默认false
});
//添加高光效果
var sphereMaterial=new THREE.MeshPhongMaterial({
color:0x0000ff,
specular:0x4488ee,
shininess:12
});//材质对象
模型和材质结合
var mesh = new THREE.Mesh(geometry, material); //网格模型对象Mesh
scene.add(mesh); //网格模型添加到场景中
光源设计
//点光源
var point = new THREE.PointLight(0xffffff);
point.position.set(400, 200, 300); //点光源位置
scene.add(point); //点光源添加到场景中
//环境光
var ambient = new THREE.AmbientLight(0x444444);
scene.add(ambient);
相机设置（眼睛）
var width = 2608; //窗口宽度
var height = 990; //窗口高度
var k = width / height; //窗口宽高比
var s = 200; //三维场景显示范围控制系数，系数越大，显示的范围越大
//创建相机对象
var camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 1000);
camera.position.set(300, 300, 200); //设置相机位置
camera.lookAt(scene.position); //设置相机方向(指向的场景对象)
参数说明
eft — 可被渲染空间的左平面，比这个左侧边界更远的对象不会被渲染
right — 可被渲染空间的右平面
top — 可被渲染空间的最上面
bottom — 可被渲染空间的最下面
near — 基于相机所在的位置，从这一点开始渲染场景
far — 基于相机所在的位置，一直渲染到场景中的这一点
相机终极版
var camera = new THREE.PerspectiveCamera(45,width/height,1,10000);
//设置相机坐标，就是当前视图位置
camera.position.set(66.1666,6.0761,971.3888);
// camera.position.x = 100;
// camera.position.y = 20;
// camera.position.z = 50;
距离屏幕x，y，z位置
camera.up.set(50,150,190);
// camera.up.x = 0;
// camera.up.y = 0;
// camera.up.z = 1;
camera.lookAt(new THREE.Vector3(1,1,1));//观察点
//camera.lookAt({x:0,y:0,z:0});
在下面打印获得相机位置
//执行渲染操作 指定场景、相机作为参数
function render() {
renderer.render(scene,camera);//执行渲染操作
//打印相机位置，改变position值，就是当前视图位置
console.log(camera)
//鼠标旋转移动
requestAnimationFrame(render);
}
render();
//鼠标旋转移动
var controls = new OrbitControls(camera,renderer.domElement);
渲染器对象
var renderer = new THREE.WebGLRenderer();
renderer.setSize(width, height);//设置渲染区域尺寸
renderer.setClearColor('#071f38', 1); //设置背景颜色
document.getElementById('container').appendChild(renderer.domElement); //container元素id中插入canvas对象
//执行渲染操作 指定场景、相机作为参数
function render() {
renderer.render(scene,camera);//执行渲染操作
//鼠标旋转移动
requestAnimationFrame(render);
}
render();
//鼠标旋转移动
var controls = new OrbitControls(camera,renderer.domElement);
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader'
/**
* 加载模型
*/
var loader = new GLTFLoader();
loader.load( '/static/gltf/wuxuanxian/a.gltf', function ( gltf ) {
scene.add( gltf.scene );
}, undefined, function ( error ) {
console.error( error );
} );
缩小
camera.scale.set(2,2,2);
显示xyz三维坐标
// 显示xyz三维坐标
var axes = new THREE.AxisHelper(1000);
scene.add(axes);
物体移动
/**
* 加载模型
*/
var loader = new GLTFLoader();
loader.load( '/static/gltf/wuxuanxian/a/a.gltf', function ( gltf ) {
gltf.scene.traverse( function ( child ) {
//给这个物体命名
child.name="main_mode";
if ( child.isMesh ) {
}
} );
scene.add( gltf.scene );
}, undefined, function ( error ) {
console.error( error );
});
写个方法点击
var object1 = scene.getObjectByName("main_mode");
object1.position.z=object1.position.z-100;
object1.rotateY(Math.PI/2);
for(var i=0;i<100;i++) {
(function(i) {
var timeoutInfo=setTimeout(function() {
console.log(i);
object1.position.set(object1.position.x + i, object1.position.y, object1.position.z);
console.log(object1.position.x);
}, (i + 1) * 1000);
})(i)
if(object1.position.x>1000) {
window.clearInterval(timeoutInfo);
alert("超出抵达世界边际点位置，已停止！");
}
}
获得物体名称改变里面的值
var object1 = scene.getObjectByName("main_mode");
object1.position.z=object1.position.z-100;
灯光效果
// 平行光1
var directionalLight = new THREE.DirectionalLight(0xffffff, 0.3);
directionalLight.position.set(400, 200, 300);
scene.add(directionalLight);
// 平行光2
var directionalLight2 = new THREE.DirectionalLight(0xffffff, 0.6);
directionalLight2.position.set(-300, 600, -300);
scene.add(directionalLight2);
//环境光
var ambient = new THREE.AmbientLight(0xffffff, 0.5);
scene.add(ambient);
//灯光效果
var ambient = new THREE.AmbientLight(0xffffff);
scene.add(ambient);
scene = new THREE.Scene();
var model = new THREE.Group();
var loader = new GLTFLoader(); //创建一个GLTF加载器
loader.load("/glb/上海外滩.glb", function (gltf) { //gltf加载成功后返回一个对象
// console.log('控制台查看gltf对象结构', gltf);
//把gltf.scene中的所有模型添加到model组对象中
model.add(gltf.scene);
})
scene.add(model);
改变导入的gltf里面的建筑或其它类型的材质
loader.load("/glb/上海外滩.glb", function (gltf) { //gltf加载成功后返回一个对象
// 设置地面材质
console.log(gltf.scene)
var Floor = gltf.scene.getObjectByName('地面');
Floor.material = new THREE.MeshLambertMaterial({
color: 0x000000,
});
// 设置河面材质
var River = gltf.scene.getObjectByName('河面');
River.material = new THREE.MeshLambertMaterial({
color: 0x336633,
});
// 所有建筑物递归遍历批量设置材质
gltf.scene.getObjectByName('楼房').traverse(function (object) {
if (object.type === 'Mesh') {
// console.log(object.material);//控制台查看mesh材质
// MeshLambertMaterial：受光照影响 MeshBasicMaterial：不受光照影响
object.material = new THREE.MeshLambertMaterial({
// color: object.material.color, //读取原来材质的颜色
color: 0xffffff,
})
}
})
// 单独设置东方明珠材质
var dongfang= gltf.scene.getObjectByName('东方明珠');
dongfang.material = new THREE.MeshLambertMaterial({
color: 0x996633,
});
// console.log('控制台查看gltf对象结构', gltf);
//把gltf.scene中的所有模型添加到model组对象中
model.add(gltf.scene);
})
多模型
//创建两个网格模型mesh1、mesh2
var geometry = new THREE.BoxGeometry(20, 20, 20);
var material = new THREE.MeshLambertMaterial({color: 0x0000ff});
var Group = new THREE.Group();
var mesh1 = new THREE.Mesh(geometry, material);
var mesh2 = new THREE.Mesh(geometry, material);
mesh2.position.set(50, 0, 0);//固定
mesh2.translateX(25);
//把mesh1型插入到组Group中，mesh1作为group的子对象
Group.add(mesh1);
//把mesh2型插入到组Group中，mesh2作为group的子对象
Group.add(mesh2);
//把Group插入到场景中作为场景子对象
scene.add(Group);
//沿着Y轴平移mesh1和mesh2的父对象，mesh1和mesh2跟着平移
Group.position.set(50, 0, 0);//固定
//Group.translateY(100);//累加
//父对象缩放，子对象跟着缩放
Group.scale.set(4,4,4);
/父对象旋转，子对象跟着旋转
Group.rotateY(Math.PI/6)
console.log('查看Group的子对象',Group.children);
console.log('查看Scene的子对象',scene.children);