Javascript 试图理解THREEJS中使用的回调函数
下面的代码来自一个THREE.JS示例;效果很好。我用three.js代码制作了自己的艺术画廊。我用来挂画的代码源于three.js示例:webgl\u materials\u texture\u manualmipmap.html 下面的代码可以工作,但我不理解MaterialPaint 1如何在回调函数中使用,因为在回调函数之后才完全定义MaterialPaint 1 谁能给我解释一下这是怎么回事吗。MaterialPaint 1是如何在回调函数中使用的,尽管它是在后面定义的,因为它在示例中工作得很好,但在我自己的代码中,我必须使用小提琴来加载绘画Javascript 试图理解THREEJS中使用的回调函数,javascript,three.js,Javascript,Three.js,下面的代码来自一个THREE.JS示例;效果很好。我用three.js代码制作了自己的艺术画廊。我用来挂画的代码源于three.js示例:webgl\u materials\u texture\u manualmipmap.html 下面的代码可以工作,但我不理解MaterialPaint 1如何在回调函数中使用,因为在回调函数之后才完全定义MaterialPaint 1 谁能给我解释一下这是怎么回事吗。MaterialPaint 1是如何在回调函数中使用的,尽管它是在后面定义的,因为它在示例中
var callbackPainting = function () {
var image = texturePainting1.image;
texturePainting2.image = image;
texturePainting2.needsUpdate = true;
scene1.add(meshCanvas1);
scene2.add(meshCanvas2);
var geometry = new THREE.PlaneGeometry(100, 100);
var mesh1 = new THREE.Mesh(geometry, materialPainting1);
var mesh2 = new THREE.Mesh(geometry, materialPainting2);
addPainting(scene1, mesh1);
addPainting(scene2, mesh2);
function addPainting(zscene, zmesh) {
zmesh.scale.x = image.width / 100;
zmesh.scale.y = image.height / 100;
zscene.add(zmesh);
var meshFrame = new THREE.Mesh(geometry, new THREE.MeshBasicMaterial({
color: 0x000000,
polygonOffset: true,
polygonOffsetFactor: 1,
polygonOffsetUnits: 5
}));
meshFrame.scale.x = 1.1 * image.width / 100;
meshFrame.scale.y = 1.1 * image.height / 100;
zscene.add(meshFrame);
var meshShadow = new THREE.Mesh(geometry, new THREE.MeshBasicMaterial({
color: 0x000000,
opacity: 0.75,
transparent: true
}));
meshShadow.position.y = -1.1 * image.height / 2;
meshShadow.position.z = -1.1 * image.height / 2;
meshShadow.rotation.x = -Math.PI / 2;
meshShadow.scale.x = 1.1 * image.width / 100;
meshShadow.scale.y = 1.1 * image.height / 100;
zscene.add(meshShadow);
var floorHeight = -1.117 * image.height / 2;
meshCanvas1.position.y = meshCanvas2.position.y = floorHeight;
}
};
var texturePainting1 = THREE.ImageUtils.loadTexture("textures/758px-Canestra_di_frutta_(Caravaggio).jpg", THREE.UVMapping, callbackPainting),
texturePainting2 = new THREE.Texture(),
materialPainting1 = new THREE.MeshBasicMaterial({
color: 0xffffff,
map: texturePainting1
}),
materialPainting2 = new THREE.MeshBasicMaterial({
color: 0xffccaa,
map: texturePainting2
});
纹理加载是异步的;在加载纹理之前,不会执行回调函数。到那时,您的材质已经定义 然而,作为一个良好的实践,我会首先定义材料
three.js r.66阅读“提升”。嗨@WestLangley,如何检查纹理是否加载???@JothiKannan如果你有问题,你需要发表一篇帖子并询问社区。