three.js使用总结(二)
程序员文章站
2024-01-08 13:35:40
...
.obj模型和.mtl材质文件的导入
let suidaoobj = new THREE.OBJLoader();
let suidaomtl = new THREE.MTLLoader();
suidaomtl.load(url, function (materials) { //加载材质mtl文件
materials.preload();
suidaoobj.setMaterials(materials);
suidaoobj.load(url, function (obj) { //加载模型obj文件
obj.position.set(-40,0,30) //坐标
obj.scale.set(1, 1, 1) //缩放
this.scene.add(obj);
})
})
1、根据项目需要可以给模型的obj对象添加自定义属性
obj.ID = ''
obj.name = ''
例:
let _this = this
_this.$http.get('SystemManage/Equipment/GetList?equipmentType=2&limit=999&page=1').then((resp) => {
if (resp.data.code === 0) {
resp.data.data.forEach(item => {
if (item.EquipmentPileNum) {
let ZM照明灯obj = new THREE.OBJLoader();
let ZM照明灯mtl = new THREE.MTLLoader();
ZM照明灯mtl.load('static/suidaomodel/bujian/ZM照明灯/ZM照明灯.mtl', function (materials) {
materials.preload();
ZM照明灯obj.setMaterials(materials);
ZM照明灯obj.load('static/suidaomodel/bujian/ZM照明灯/ZM照明灯.obj', function (obj) {
obj.ID = item.ID
obj.name = '照明'
obj.position.x = item.EquipmentPileNum
obj.position.y = 5
obj.position.z = 24
obj.scale.set(1, 1, 1)
_this.scene.add(obj);
})
})
}
})
}
})
可以利于我们辨别模型,比如在点击模型是进行区分
2、根据需要修改原有的.mtl中的贴图
修改对应的图片,确保路径正确即可。
3、根据前面两部份,结合起来可以做到动态读取不同状态的模型
首先我复制mtl,修改其中的贴图。
根据需要修改文件名称。这里我修改为ZM照明灯1.mtl、ZM照明灯2.mtl,然后根据读取到的item.status(比如只会取到0和1)加载对应的mtl材质文件。
let _this = this
_this.$http.get('SystemManage/Equipment/GetList?equipmentType=2&limit=999&page=1').then((resp) => {
if (resp.data.code === 0) {
resp.data.data.forEach(item => {
if (item.EquipmentPileNum) {
let ZM照明灯obj = new THREE.OBJLoader();
let ZM照明灯mtl = new THREE.MTLLoader();
ZM照明灯mtl.load('static/suidaomodel/bujian/ZM照明灯/ZM照明灯'+ item.status +'.mtl', function (materials) {
materials.preload();
ZM照明灯obj.setMaterials(materials);
ZM照明灯obj.load('static/suidaomodel/bujian/ZM照明灯/ZM照明灯.obj', function (obj) {
obj.ID = item.ID
obj.name = '照明'
obj.position.x = item.EquipmentPileNum
obj.position.y = 5
obj.position.z = 24
obj.scale.set(1, 1, 1)
_this.scene.add(obj);
})
})
}
})
}
})