@
vue2.x引入threejs
npm安装
npm install three
使用指定版本:
npm install three@<版本号>
其他插件
因为本次开发需要引入3D模型,所以需要使用 MTLLoader, OBJLoader两种加载器,因为开发需求和
版本问题, 最新版本自带的加载器不能实现需求,所以需要额外引入three-obj-mtl-loader插件,并且threejs版本需要退到122版本;
npm安装three-obj-mtl-loader
npm install three-obj-mtl-loader --save
实例
//-- html部分 -- 开始 --
class="three_box" id="container">
//-- html部分 -- 结束 --
import * as THREE from 'three';
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls"; // 控制器-控制相机运行轨道
import { MTLLoader, OBJLoader } from 'three-obj-mtl-loader' //项目中使用到.obj文件和.mtl文件,故引入
mounted() {
let width = 1053 // dom宽度
let height = 473 // dom高度
this.scene = new THREE.Scene()// 运行创建场景函数
let mtlLoader = new MTLLoader() //创建MTLLoader实例
let objLoader = new OBJLoader() //创建OBJLoader实例
let k = width / height // 宽高比
let camera = new THREE.PerspectiveCamera( 60, k, 1, 2000) //创建相机,这个相机模拟人眼所看到的景象,近大远小没参数分别为:
//fov — 摄像机视锥体垂直视野角度
//aspect — 摄像机视锥体长宽比
//near — 摄像机视锥体近端面
//far — 摄像机视锥体远端面
camera.position.set( -500, 300, 300 )//设置相机位置
this.initDoor()//调用引入3D模型方法
this.initcao() //调用几何图形方法
//点光源
let point = new THREE.PointLight(0xffffff)
point.position.set(800, 800, 2000); //光源位置
this.scene.add(point); //光源添加进场景
//环境光
let ambient = new THREE.AmbientLight(0xffffff); //设置环境光
this.scene.add(ambient) //讲环境光加入场景
this.renderer = new THREE.WebGL1Renderer(); // 实例渲染器
this.renderer.setSize( width, height) //渲染器宽高
this.renderer.setClearColor(new THREE.Color('#07224e'), 1) //设置背景颜色
setTimeout(() => {
document.getElementById('container').appendChild(this.renderer.domElement)//将渲染器添加进dom
}, 500)
this.animate()//调用动画效果
this.controls = new OrbitControls(this.camera, this.renderer.domElement) //添加相机和渲染器到控制器,实现滑动
},
methods: {
initcao() {
let geometry = new THREE.BoxGeometry(3200, 1600, 8); //矩形平面
let material = new THREE.MeshLambertMaterial({ // 配置样式,包括颜色 透明度等
color: new THREE.Color('#bcbfc6'),
transparent: true,
opacity: 0.3,
side: THREE.DoubleSide
});
let mesh = new THREE.Mesh(geometry, material); //网格模型对象Mesh
mesh.rotateX(-Math.PI / 2);
this.scene.add(mesh); //网格模型添加到场景中
},
initDoor() {
let that = this //后面回调会影响this指向
let mtlLoader = new MTLLoader()
let objLoader = new OBJLoader();
mtlLoader.load('static/door.mtl', function( material) { //引入模型.mtl文件,是3D模型的贴图,如果不需要贴图可以不使用,模型会只有一个框架
material.preload();
objLoader.setMaterials(material)
objLoader.load('static/door.obj', //引入模型.obj文件
function( obj) {
obj.position.z = -188 //调整模型位置
obj.position.x = -265 //调整模型位置
obj.position.y = 10 //调整模型位置
obj.rotateY(Math.PI / 2) //调整模型角度
obj.scale.set( 20, 20, 20 ) //调整模型放大缩小倍数
that.scene.add(obj) //模型添加进场景
},
)
})
},
animate() {
//这里自己写点要对模型进行的操作
this.renderer.render(this.scene, this.camera);
requestAnimationFrame(this.animate) //这里按帧更新画面,大概一秒60次左右
},
}
强调
如果在开发中需要引入3D模型,模型文件应放在与src文件同级的static下,引入方式应该是 'static/door.mtl'
如果在开发过程中出现threejs生成的canvas出现外边框,只需要用css样式修改,代码如下:
.three_box {
width: 1053px;
height: 473px;
>>> canvas:focus-visible {
outline: 0px
}
}