ThreeJS 加载 GLTF 并使用 FabricJS 画布作为纹理

Question

我正在构建一个盒子设计器工具，您可以在加载的 gltf 盒子的每个面上进行绘制。它有 10 个面，其中 5 个从顶部，5 个从底部。当我使用 BoxGeometry 时，它工作正常，但当我加载 GLTF 文件时，织物纹理没有出现在模型上。我正在克隆 GLTF 场景来创建外箱，以便我可以在其上绘图。

/************** init fabric canvas **************/
let activeCanvas = new fabric.Canvas("fabric-canvas", {
    fontFamily: 'Pacifico',
    fontSize: 36,
})
activeCanvas.backgroundColor = null
activeCanvas.imageBackground = null

const val = "testert";

const text = new fabric.IText(val, {
    top: 40,
    left: 30,
    fill: '#333333'
})

activeCanvas.add(text)

// save as initial data
this.initJson = activeCanvas.toJSON()

this.canvasSides = {};

_.forEach(store.mesh.children, child => {
    this.canvasSides[child.name] = this.initJson
})

this.canvasDataURI = {}

// save canvas as images
this.initDataURI = activeCanvas.toDataURL('png')

for (let side in constants.sides) {
    this.canvasDataURI[side] = this.initDataURI
}


/************** load gltf **************/
var loader = new GLTFLoader();

loader.load(
    // resource URL
    Store.currentModel.models[store.activeIndex].path,

    // called when the resource is loaded
    (gltf) => {

        const outer = gltf.scene.clone()

        Store.core.scene.add(gltf.scene);
        Store.core.scene.add(outer);

        // Set to cast and receive shadow if enabled
        if (Config.shadow.enabled) {
            gltf.scene.children.forEach((mesh) => {
                mesh.traverse(child => {
                    if (child.isMesh) {
                        child.castShadow = true;
                        child.receiveShadow = true;

                        child.material = texture
                    }
                });
            })
        }
        Store.mesh = gltf.scene;
        Store.outerMesh = outer;
    },
    // called while loading is progressing
    (xhr) => {

        console.log((xhr.loaded / xhr.total * 100) + '% loaded');

    },
    // called when loading has errors
    (error) => {

        console.error('An error happened', error);

    }
);


/************** load fabric canvas into texture **************/
for (var key in activeCanvas.canvasDataURI) {
    const image = new Image();

    image.src = canvas.canvasDataURI[key];

    const textureLoader = new THREE.TextureLoader();
    const texture = textureLoader.load(image.src, (texture) => {
        texture.wrapS = THREE.RepeatWrapping;
        texture.wrapT = THREE.RepeatWrapping;
        texture.flipY = false;
        texture.mapping = THREE.UVMapping;
        texture.anisotropy = store.core.renderer.capabilities.getMaxAnisotropy();

        texture.needsUpdate = true
    });

    texture.onload = () => {
        texture.needsUpdate = true
    };

    this.materialArr.push(new THREE.MeshPhongMaterial({ map: texture, name: key, transparent: true, side: THREE.DoubleSide }));
}

store.outerMesh.children.forEach((mesh, index) => {
    mesh.traverse(child => {
        if (child.isMesh) {
            child.material = _.find(this.materialArr, { name: child.name })
        }
    });
})

Answer 1

解决了吗？你能看个例子吗？