関連する API の使用:
1トラバース（モデルループトラバース法）
2. THREE.TextureLoader (画像テクスチャのロードと処理用)
3. THREE.MeshLambertmaterial（マテリアル作成用）
4. getObjectByProperty (マテリアルのプロパティ値を通じてマテリアル情報を取得)
外部の glb、fbx、gltf、obj モデル ファイルを読み込む Three.js に関する以前の記事に基づいて、onSetSystemModelMap (モデル マテリアルを設定するためのメソッド) と onSetModelmaterial (マテリアル プロパティを設定するためのメソッド) を追加します。
まず、現在のモデルのすべてのマテリアルを取得します。 setModel メソッド (トラバース)
setModel({
filePath, fileType, scale, position }) {
return new Promise((resolve, reject) => {
const loader = this.fileLoaderMap[fileType]
loader.load(filePath, (result) => {
//加载不同类型的文件
switch (fileType) {
case 'glb':
this.model = result.scene
break;
case 'fbx':
this.model = result
break;
case 'gltf':
this.model = result.scene
break;
case 'obj':
this.model = result
break;
default:
break;
}
this.model.traverse((v) => {
const {
uuid } = v
if (v.isMesh && v.materia) {
this.modelMaterialList.push(v)
}
})
// 设置模型大小
if (scale) {
this.model.scale.set(scale, scale, scale);
}
// 设置模型位置
if (position) {
const {
x, y, z } = position
this.model.position.set(x, y, z)
}
// 设置相机位置
this.camera.position.set(0, 2, 6)
// 设置相机坐标系
this.camera.lookAt(0, 0, 0)
// 将模型添加到场景中去
this.scene.add(this.model)
resolve(true)
}, () => {
}, (err) => {
console.log(err)
reject()
})
})
}
getObjectByPropertyメソッドを通じてuuid を渡して、現在のマテリアル情報を取得し
、モデル テクスチャを設定します。
onSetSystemModelMap({
url }) {
// 当前uuid
const uuid = store.state.selectMesh.uuid
// 通过uuid 获取需要设置的材质
const mesh = this.scene.getObjectByProperty('uuid', uuid)
const {
name, color } = mesh.material
// 获取到贴图 url(图片实际地址)
const mapTexture = new THREE.TextureLoader().load(url)
mesh.material = new THREE.MeshLambertMaterial({
map: mapTexture,
transparent: true, // 允许材质可透明
color,
name,
})
}
マテリアルのプロパティを設定する
// 设置材质属性
onSetModelMaterial(config) {
const {
color, wireframe, depthWrite, opacity } = config
const uuid = store.state.selectMesh.uuid
const mesh = this.scene.getObjectByProperty('uuid', uuid)
if (mesh && mesh.material) {
//设置材质颜色
mesh.material.color.set(new THREE.Color(color))
//设置网格
mesh.material.wireframe = wireframe
// 设置深度写入
mesh.material.depthWrite = depthWrite
//设置透明度
mesh.material.transparent = true
mesh.material.opacity = opacity
}
}
完全なコードは、https: //gitee.com/ZHANG_6666/Three.js3D/blob/master/src/views/renderModel.jsを参照してください。
インターフェース効果:
