我正在用three.js加载并使用Clara.io建模并导出的包含纹理的JSON模型。我使用ObjectLoader一次加载所有内容。模型加载后,纹理有时仅出现。有时会抛出404错误,提示找不到图片?!这仅适用于此特定模型。如果我修改JSON文件并将其纹理URL设置为localhost:4200 / assets / image.jpg,则它每次都能工作!我在这里想念什么?我该如何解决?
这是我的loaderManager。发现了有关ObjectLoader.setTexturePath的信息,但是在没有它的情况下它确实可以工作,并且仍然适用于其他模型
import * as THREE from 'three'
import { Utility } from './utility'
export class ModelManager {
static instance: ModelManager
public models: { path: string, obj: THREE.Object3D/*, texture: THREE.Texture*/ }[] = []
private loadingManager: THREE.LoadingManager
private objectLoader: THREE.ObjectLoader
private nonLoaded: boolean
public onLoad: Function
public get NonLoaded() {
return this.nonLoaded
}
constructor() {
if(ModelManager.instance == null)
ModelManager.instance = this
this.nonLoaded = true
this.loadingManager = new THREE.LoadingManager()
this.objectLoader = new THREE.ObjectLoader(this.loadingManager)
}
public load(path: string, onComplete: Function, texturePath?: string) {
// console.log('GetModelByPath searching...', path)
// console.log('all models', this.models)
let found: boolean = false
this.loadingManager.onLoad = ()=> {
window.setTimeout(()=> {
if(this.onLoad != null && this.nonLoaded == false){
this.nonLoaded = true // Reset
this.onLoad()
}
}, 1000)
}
// Check stored models for needed
if(this.models.length > 0) {
this.models.forEach(model => {
if(model.path == path){
found = true
let clone = model.obj.clone()
clone.position.set(0, 0, 0)
clone.rotation.set(0, 0, 0)
// console.log('Already stored!', clone)
onComplete(clone)
}
})
}
// not found -> Load and store model
if(!found){
this.nonLoaded = false
this.loadModel(path, onComplete, texturePath)
}
}
private loadModel(path: string, onLoad: Function, texturePath?: string) {
// console.log('Need to load')
// this.objectLoader.setTexturePath(texturePath)
this.objectLoader.load(path, (obj)=> {
// console.log(path, obj)
this.models.push({
path: path,
obj: obj
})
// console.log('Loaded and saved', obj)
let clone = obj.clone()
if(this.models.length > 1)
this.models = Utility.removeDuplicates(this.models)
onLoad(clone)
}, undefined, (error)=> {
console.error('Error',error)
})
}
}
和模型json
{
"textures": [{
"wrap": [1000,1000],
"magFilter": 1006,
"minFilter": 1008,
"image": "B0269EAF-D3B6-3822-B658-14196EB88B9F",
"mapping": 300,
"anisotropy": 1,
"repeat": [1,1],
"name": "light_wood_texture_jpg",
"uuid": "EBE7D25C-05E6-3590-A407-D1532E68DB73"
}],
"object": {
"matrix": [1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1],
"type": "Scene",
"uuid": "9591CB09-D210-46E6-B4F4-F0BF298E3C9D",
"children": [{
"name": "Merged_Meshes",
"uuid": "F2C25827-3195-3861-A980-58C516BFEE2D",
"matrix": [-1,0,0,0,0,0,1,0,0,1,0,0,0,0,0,1],
"visible": true,
"type": "Mesh",
"material": "93831B89-11B9-31B1-A879-E029ECAF81F2",
"castShadow": true,
"receiveShadow": true,
"geometry": "7A3FD5D0-D122-38B1-98B1-29F490B4D31A"
}]
},
"metadata": {
"version": 4.4,
"type": "Object",
"generator": "io_three"
},
"animations": [{
"fps": 29,
"tracks": [],
"name": "default"
}],
"images": [{
"name": "light-wood-texture.jpg",
"url": "light-wood-texture.jpg",
"uuid": "B0269EAF-D3B6-3822-B658-14196EB88B9F"
}],
"geometries": [{
"data": {
"faces": [43,0,2,3,1,0,0,1,2,3,0,1,2,3,43,4,6,7,5,0,0,1,2,3,4,5,6,7,43,0,1,4,5,0,2,3,0,1,0,3,4,7,43,7,6,3,2,0,2,3,0,1,6,5,2,1,43,2,0,5,7,0,2,3,0,1,1,0,7,6,43,1,3,6,4,0,0,1,2,3,3,2,5,4,43,8,10,11,9,0,0,1,4,5,0,1,2,3,43,12,14,15,13,0,0,1,1,0,4,5,6,7,43,12,13,8,9,0,3,0,4,6,4,7,0,3,43,15,14,11,10,0,3,0,4,2,6,5,2,1,43,13,15,10,8,0,0,1,1,0,7,6,1,0,43,9,11,14,12,0,5,4,1,0,3,2,5,4,43,16,18,19,17,0,0,1,4,5,0,1,2,3,43,20,22,23,21,0,0,1,1,0,4,5,6,7,43,20,21,16,17,0,3,0,4,6,4,7,0,3,43,23,22,19,18,0,3,0,4,2,6,5,2,1,43,21,23,18,16,0,0,1,1,0,7,6,1,0,43,17,19,22,20,0,5,4,1,0,3,2,5,4,43,24,26,27,25,0,0,1,2,3,0,1,2,3,43,28,30,31,29,0,0,1,2,3,4,5,6,7,43,28,29,24,25,0,0,1,2,3,4,7,0,3,43,31,30,27,26,0,2,3,0,1,6,5,2,1,43,29,31,26,24,0,0,1,2,3,7,6,1,0,43,25,27,30,28,0,0,1,2,3,3,2,5,4,43,32,34,35,33,0,0,1,4,5,0,1,2,3,43,36,38,39,37,0,0,1,1,0,4,5,6,7,43,36,37,32,33,0,3,0,4,6,4,7,0,3,43,39,38,35,34,0,3,0,4,2,6,5,2,1,43,37,39,34,32,0,0,1,1,0,7,6,1,0,43,33,35,38,36,0,5,4,1,0,3,2,5,4],
"normals": [0.577349,0.577349,0.577349,0.577349,0.577349,-0.577349,-0.577349,0.577349,-0.577349,-0.577349,0.577349,0.577349,-0.577349,-0.577349,0.577349,-0.577349,-0.577349,-0.577349,0.577349,-0.577349,-0.577349,0.577349,-0.577349,0.577349],
"skinIndices": [],
"animations": [],
"metadata": {
"faces": 30,
"materials": 1,
"version": 3,
"uvs": 1,
"generator": "io_three",
"bones": 0,
"normals": 8,
"vertices": 40,
"morphTargets": 0
},
"morphTargets": [],
"vertices": [1.4,16.4,16.3,-1.4,16.4,16.3,1.4,16.4,-16.3,-1.4,16.4,-16.3,-1.4,13.6,16.3,1.4,13.6,16.3,-1.4,13.6,-16.3,1.4,13.6,-16.3,1.4,13.6,16.3,-1.4,13.6,16.3,1.4,13.6,14.5,-1.4,13.6,14.5,-1.4,-13.6,16.3,1.4,-13.6,16.3,-1.4,-13.6,14.5,1.4,-13.6,14.5,1.4,13.6,0.9,-1.4,13.6,0.9,1.4,13.6,-0.9,-1.4,13.6,-0.9,-1.4,-13.6,0.9,1.4,-13.6,0.9,-1.4,-13.6,-0.9,1.4,-13.6,-0.9,1.4,-13.6,16.3,-1.4,-13.6,16.3,1.4,-13.6,-16.3,-1.4,-13.6,-16.3,-1.4,-16.4,16.3,1.4,-16.4,16.3,-1.4,-16.4,-16.3,1.4,-16.4,-16.3,1.4,13.6,-14.5,-1.4,13.6,-14.5,1.4,13.6,-16.3,-1.4,13.6,-16.3,-1.4,-13.6,-14.5,1.4,-13.6,-14.5,-1.4,-13.6,-16.3,1.4,-13.6,-16.3],
"uvs": [[0,1,0,0,1,0,1,1,0,0,0,1,1,0]],
"skinWeights": [],
"influencesPerVertex": 2,
"bones": [],
"name": "Merged_MeshesGeometry"
},
"materials": [{
"visible": true,
"wireframe": false,
"mapDiffuseAnisotropy": 1,
"specularCoef": 50,
"depthTest": true,
"colorEmissive": [0,0,0],
"DbgIndex": 0,
"colorSpecular": [0.012549,0.012549,0.012549],
"mapDiffuse": "light-wood-texture.jpg",
"colorAmbient": [0.788235,0.788235,0.788235],
"mapDiffuseRepeat": [1,1],
"opacity": 1,
"mapDiffuseWrap": ["RepeatWrapping","RepeatWrapping"],
"DbgColor": 15658734,
"colorDiffuse": [0.788235,0.788235,0.788235],
"blending": "NormalBlending",
"shading": "phong",
"DbgName": "Standard",
"depthWrite": true,
"transparent": false
}],
"type": "Geometry",
"uuid": "7A3FD5D0-D122-38B1-98B1-29F490B4D31A"
}],
"materials": [{
"depthTest": true,
"color": 13224393,
"ambient": 13224393,
"specular": 197379,
"shininess": 50,
"uuid": "93831B89-11B9-31B1-A879-E029ECAF81F2",
"name": "Standard",
"type": "MeshPhongMaterial",
"emissive": 0,
"blending": "NormalBlending",
"vertexColors": false,
"depthWrite": true,
"map": "EBE7D25C-05E6-3590-A407-D1532E68DB73"
}]
}
更新:
问题是我在子文件夹中有此特定的模型+纹理。我尝试加载的路径始终是正确的(/assets/3dmodels/woodframe/woodframe.json
),但是实际的“纹理不是2的幂”警告具有错误的路径! /assets/3dmodels/woodframe.json
缺少子文件夹。
三个js是否在某个地方设置了basePath?路径即时通讯设置正确! 100%! threejs从何处获得此路径?
我可以通过溶解文件夹并将所有内容都放在一个资产文件夹中来解决。但这不是真的可以接受的,因为您不能有子文件夹吗?