Javascript ThreeJS加载GLTF并使用FabricJS画布作为纹理
我正在构建一个长方体设计器工具,您可以在其中绘制加载的gltf长方体的每个面。它有10个面,5个从顶部,5个从底部。当我使用BoxGeometry时,它工作正常,但当我加载GLTF文件时,织物纹理不会出现在模型上。我正在克隆GLTF场景以创建outerbox,以便在其上绘制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
/************** 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 })
}
});
})