Warning: file_get_contents(/data/phpspider/zhask/data//catemap/5/excel/29.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript ThreeJS加载GLTF并使用FabricJS画布作为纹理_Javascript_Canvas_Three.js_Textures_Fabricjs - Fatal编程技术网

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

Javascript ThreeJS加载GLTF并使用FabricJS画布作为纹理,javascript,canvas,three.js,textures,fabricjs,Javascript,Canvas,Three.js,Textures,Fabricjs,我正在构建一个长方体设计器工具,您可以在其中绘制加载的gltf长方体的每个面。它有10个面,5个从顶部,5个从底部。当我使用BoxGeometry时,它工作正常,但当我加载GLTF文件时,织物纹理不会出现在模型上。我正在克隆GLTF场景以创建outerbox,以便在其上绘制 /************** init fabric canvas **************/ let activeCanvas = new fabric.Canvas("fabric-canvas&qu

我正在构建一个长方体设计器工具,您可以在其中绘制加载的gltf长方体的每个面。它有10个面,5个从顶部,5个从底部。当我使用BoxGeometry时,它工作正常,但当我加载GLTF文件时,织物纹理不会出现在模型上。我正在克隆GLTF场景以创建outerbox,以便在其上绘制

/************** 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 })
        }
    });
})