three.js是JavaScript编写的WebGL第三方库。提供了非常多的3D显示功能。
相关插件
- npm i three
- npm i stats.js - 性能插件
- npm i dat.gui - 页面调试插件
- npm i three-orbitcontrols - 相机控制插件
- npm i tween.js - 补间动画插件
基本用法
<template>
<div id="three-index"></div>
</template>
<script>
import * as THREE from 'three'
import * as Stats from 'stats.js'
import * as dat from 'dat.gui'
import OrbitControls from 'three-orbitcontrols'
import * as TWEEN from 'tween.js'
export default {
name: 'Index',
data() {
return {}
},
mounted() {
this.init()
// this.tween()
},
methods: {
init() {
//创建场景
let scene = new THREE.Scene()
//创建相机 - 视野、长宽比、近、远裁剪平面
let camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 200)
camera.position.set(0, 0, 15)
//创建渲染器 - 设置显示窗口大小
let renderer = new THREE.WebGLRenderer()
renderer.setSize(window.innerWidth, window.innerHeight)
document.body.appendChild(renderer.domElement)
//创建性能检测
let stats = new Stats()
stats.showPanel(0) // 0: fps, 1: ms, 2: mb, 3+: custom
document.body.appendChild(stats.dom)
//创建相机控件
let control = new OrbitControls(camera, renderer.domElement)
control.enableDamping = true
control.dampingFactor = 0.25
control.enableZoom = false
//创建模型
this.demo(scene, camera, renderer, stats, control)
},
demo(scene, camera, renderer, stats, control) {
//创建几何体
let geometry = new THREE.BoxGeometry(1, 1, 1)
//创建材质
// let material = new THREE.MeshBasicMaterial({color: 0x00ff00})
// material.color.set(0xff00ff)
let material = new THREE.MeshNormalMaterial()
//创建网格
let cube = new THREE.Mesh(geometry, material)
//添加网格模型
scene.add(cube)
//移动相机
camera.position.z = 5
//创建页面调试
let gui = new dat.GUI()
let controls = {positionX: 0, positionY: 0, positionZ: 0}
gui.add(controls, "positionX", -1, 1).name("X轴").onChange(updatePosition)
gui.add(controls, "positionY", -1, 1).name("Y轴").onChange(updatePosition)
gui.add(controls, "positionZ", -1, 1).name("Z轴").onChange(updatePosition)
function updatePosition() {
cube.position.set(controls.positionX, controls.positionY, controls.positionZ)
}
//监听相机方向变化
control.addEventListener('change', () => {
console.log("相机动了!")
})
let animate = () => {
//循环调用函数
requestAnimationFrame(animate)
//设置动画
cube.rotation.x += 0.01 //每帧网格模型的沿x轴旋转0.01弧度
cube.rotation.y += 0.02 //每帧网格模型的沿y轴旋转0.02弧度
//更新性能插件
stats.update()
//更新相机控件
control.update()
//渲染界面
renderer.render(scene, camera)
}
animate()
},
//补间动画实例
tween() {
let scene = new THREE.Scene();
let renderer = new THREE.WebGLRenderer({antialias: true});
renderer.setSize(window.innerWidth, window.innerHeight);
//告诉渲染器需要阴影效果
renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.PCFSoftShadowMap; // 默认的是,没有设置的这个清晰 THREE.PCFShadowMap
document.body.appendChild(renderer.domElement);
let camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.set(0, 100, 200);
camera.lookAt(new THREE.Vector3(0, 0, 0));
//创建灯光
let ambientLight = new THREE.AmbientLight("#111111");
scene.add(ambientLight);
let directionalLight = new THREE.DirectionalLight("#ffffff");
directionalLight.position.set(40, 60, 10);
directionalLight.shadow.camera.near = 1; //产生阴影的最近距离
directionalLight.shadow.camera.far = 400; //产生阴影的最远距离
directionalLight.shadow.camera.left = -50; //产生阴影距离位置的最左边位置
directionalLight.shadow.camera.right = 50; //最右边
directionalLight.shadow.camera.top = 50; //最上边
directionalLight.shadow.camera.bottom = -50; //最下面
//这两个值决定生成阴影密度 默认512
directionalLight.shadow.mapSize.height = 1024;
directionalLight.shadow.mapSize.width = 1024;
//告诉平行光需要开启阴影投射
directionalLight.castShadow = true;
scene.add(directionalLight);
//底部平面
let planeGeometry = new THREE.PlaneGeometry(100, 100);
let planeMaterial = new THREE.MeshLambertMaterial({color: 0xaaaaaa, side: THREE.DoubleSide});
let plane = new THREE.Mesh(planeGeometry, planeMaterial);
plane.rotation.x = -0.5 * Math.PI;
plane.position.y = -5.1;
plane.receiveShadow = true; //可以接收阴影
scene.add(plane);
//立方体
let cubeGeometry = new THREE.CubeGeometry(10, 10, 10);
let cubeMaterial = new THREE.MeshPhongMaterial({color: 0x00ffff});
let cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
cube.position.x = -40;
cube.position.z = -30;
cube.castShadow = true; //开启阴影
scene.add(cube);
//设置tween
let position = {x:-40, y:0, z:-30};
let tween = new TWEEN.Tween(position)
//设置移动的目标和移动时间
tween.to({x:40, y:30, z:30}, 2000);
//设置每次更新的回调,然后修改几何体的位置
tween.onUpdate(() => {
cube.position.set(position.x, position.y, position.z);
});
//创建页面调试
let gui = new dat.GUI()
//声明一个保存需求修改的相关数据的对象
let guiData = {
start() {
tween.start();
}
};
//将设置属性添加到gui当中,gui.add(对象,属性,最小值,最大值)
gui.add(guiData, "start").name("开始动画");
let stats = new Stats();
document.body.appendChild(stats.dom);
let control = new OrbitControls(camera, renderer.domElement);
// 是否开启当前的控制器 默认值为true
control.enabled = true;
// 设置当前控制器的焦点 默认为原点位置
control.target = new THREE.Vector3();
// 控制器控制相机可移动的距离焦点的最远距离和最近距离 默认值是0到无限远的距离 此属性适用于透视相机 PerspectiveCamera
control.minDistance = 0;
control.maxDistance = Infinity;
// 控制器控制相机可移动的距离焦点的最远距离和最近距离 默认值是0到无限远的距离 此属性适用于正交相机 OrthographicCamera
control.minZoom = 0;
control.maxZoom = Infinity;
// 相机垂直方向移动的弧度,默认从顶部九十度到底部九十度 默认值是0和Math.PI
control.minPolarAngle = 0; // 弧度
control.maxPolarAngle = Math.PI; // 弧度
// 当前相机水平位置下在焦点的z轴正方向可以偏转的弧度,默认无限旋转。
// 如果不可以无限旋转,只能够从左方和右方旋转180度,可以设置成minAzimuthAngle = - Math.PI maxAzimuthAngle = Math.PI
control.minAzimuthAngle = - Infinity; // 弧度
control.maxAzimuthAngle = Infinity; // 弧度
// 是否开启拖拽后的惯性(停止拖拽后,相机会慢慢停下来),如果开启了当前的属性,还需要在动画循环中调用相机的update()更新位置
control.enableDamping = false;
control.dampingFactor = 0.25; //设置当前的惯性的阻力,值越小阻力越小
// 设置控制器是否缩放以及缩放速度
control.enableZoom = true;
control.zoomSpeed = 1.0;
// 设置控制器是否可以旋转以及旋转速度
control.enableRotate = true;
control.rotateSpeed = 1.0;
// 是否开启改变视角焦点中心以及移动视角中心的速度
control.enablePan = true;
control.panSpeed = 1.0;
control.screenSpacePanning = false; // 移动相机位置焦点默认是修改x轴和z轴方向,如果将此值修改为true,焦点位置将修改x轴和y轴方向
control.keyPanSpeed = 7.0; // 修改焦点位置移动的速度
// 设置当前是否自动旋转
control.autoRotate = false;
control.autoRotateSpeed = 2.0; // 默认速度为30秒旋转一周的速度,一秒60帧的情况下
// 是否开启键盘控制
control.enableKeys = true;
// 控制焦点的位置偏移的键盘按键 默认是上下左右键的 keyCode
control.keys = { LEFT: 37, UP: 38, RIGHT: 39, BOTTOM: 40 };
// 控制相机控制器的鼠标按键设置 默认左键旋转,中键缩放,右键移动焦点位置
control.mouseButtons = { ORBIT: THREE.MOUSE.LEFT, ZOOM: THREE.MOUSE.MIDDLE, PAN: THREE.MOUSE.RIGHT };
let animate = () => {
//循环调用函数
requestAnimationFrame(animate)
//更新Tween
TWEEN.update();
//更新相机控件
control.update();
//更新性能插件
stats.update()
//渲染页面
renderer.render(scene, camera);
}
animate()
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
},
}
}
</script>
<style scoped>
</style>