我在将代码迁移到 Three.JS 的最新版本时遇到了一些问题。我已经尝试了很多，但是我的模型一直看起来是黑色的（颜色功能似乎坏了））并且一旦我尝试加载带有纹理的模型，它就会崩溃。我知道在从 r52 到 r53 的过渡过程中，纹理发生了一些变化，但我似乎无法正确实施。我使用动态加载系统来缓存 JSON 模型。
目前代码如下所示：
var MB = MB || {};
MB.Part = function () {
this.id = MB.ObjectCount++;
this.type = 'part';
this.name = '';
this.reference = undefined;
this.mesh = undefined;
this.colour = undefined;
this.texture = undefined;
this.Object3D = undefined;
this.parent = undefined;
this.visible = true;
this.position = new THREE.Vector3();
this.rotation = new THREE.Vector3();
MB.Objects[this.id] = this
};
MB.Part.prototype.load = function (reference, name, mesh, color, texture, position, rotation, visible, visible3D, callback) {
var context = this;
if (!position) position = new THREE.Vector3();
if (!rotation) rotation = new THREE.Vector3();
if (this.isGeometrySetup(mesh, texture)) {
this.insert(context, reference, name, mesh, color, texture, position, rotation, visible, visible3D);
if (callback) callback()
} else {
var loader = new THREE.JSONLoader(false);
loader.load(PATH + 'data/parts/json/' + mesh + '.js', function (geometry) {
context.setupGeometry(geometry, mesh, texture);
context.insert(context, reference, name, mesh, color, texture, position, rotation, visible, visible3D);
if (callback) callback()
})
}
};
MB.Part.prototype.insert = function (context, reference, name, mesh, color, texture, position, rotation, visible, visible3D) {
context.reference = reference;
context.mesh = mesh;
context.name = name;
if (color) context.colour = color;
if (texture) context.texture = texture;
context.visible = visible;
if (color) {
context.setupColour(color);
var Object3D = new THREE.Mesh(MB.Library.geometries[mesh], MB.Library.colours[color])
} else if (texture) {
var Object3D = new THREE.Mesh(MB.Library.geometries[texture], new THREE.MeshFaceMaterial())
}
context.Object3D = Object3D;
context.Object3D.doubleSided = true;
context.position.copy(position);
context.rotation.copy(rotation);
Object3D.Object = context;
Object3D.scale.set(SCALE, SCALE, SCALE);
Object3D.position.copy(context.position);
Object3D.rotation.copy(context.rotation);
Object3D.visible = visible3D;
MB.Object3Ds[Object3D.id] = Object3D
};
MB.Part.prototype.isGeometrySetup = function (mesh, texture) {
if (texture) {
if (!MB.Library.geometries[texture]) return false;
else return true
} else {
if (!MB.Library.geometries[mesh]) return false;
else return true
}
};
MB.Part.prototype.setupGeometry = function (geometry, mesh, texture) {
if (texture) {
if (!MB.Library.geometries[texture]) {
var file = this.loadTexture(PATH + 'data/parts/textures/' + texture + '.png');
MB.Library.geometries[texture] = geometry;
MB.Library.geometries[texture].materials[0].map = file;
MB.Library.geometries[texture].materials[0].wireframe = (RENDER === 'WIREFRAME') ? true : false
}
} else {
if (!MB.Library.geometries[mesh]) {
MB.Library.geometries[mesh] = geometry
}
}
};
MB.Part.prototype.loadTexture = function (url, mapping, callback) {
var image = new Image(),
texture = new THREE.Texture(image, mapping);
image.onload = function () {
texture.needsUpdate = true;
if (callback) callback(this)
};
image.crossOrigin = '';
image.src = url;
return texture
};
MB.Part.prototype.setupColour = function (colour) {
if (!MB.Library.colours[colour]) {
var materialColour = '0x' + COLOURS[colour].hex;
var materialOpacity = COLOURS[colour].opacity;
MB.Library.colours[colour] = new THREE.MeshPhongMaterial({
ambient: new THREE.Color(materialColour),
color: new THREE.Color(materialColour),
opacity: materialOpacity,
shininess: 100
});
MB.Library.colours[colour].wireframe = (RENDER === 'WIREFRAME') ? true : false;
MB.Library.colours[colour].transparent = (COLOURS[colour].opacity < 1) ? true : false
}
};
MB.Part.prototype.setColour = function (colour) {
if (this.colour) {
this.setupColour(colour);
this.colour = colour;
this.Object3D.material = MB.Library.colours[colour]
}
};
MB.ObjectCount = 0;
MB.Object3Ds = {};
MB.Objects = {};
MB.Library = {
'colours': {},
'geometries': {}
};
问题似乎在这里：
if (texture) {
if (!MB.Library.geometries[texture]) {
var file = this.loadTexture(PATH + 'data/parts/textures/' + texture + '.png');
MB.Library.geometries[texture] = geometry;
MB.Library.geometries[texture].materials[0].map = file;
MB.Library.geometries[texture].materials[0].wireframe = (RENDER === 'WIREFRAME') ? true : false
}
总的来说，我仍然处理纹理。
任何帮助将不胜感激！
托马斯