Hello. I created a .glb model (in Blender) which I want to subject to instancing just to make lots of copies. My model consists of many meshes so I joined them into one mesh (using Ctrl+J). There’s are neither materials assigned, nor modifiers. What I have noticed when added instantiated model to the Three.js scene is that it became distorted and flattened. Please take a look at my original example and the model subjected to instancing:
Original model:
Three.js:
I’ve read somewhere that there’s a problem with adding joined mesh as InstancedMesh to the scene. And there’s always a problem with joined-mesh model being distorted as seen above. Semms like setMatrix doesn’t work here.
Didi you happen to deal with such case? I mean use InstancedMesh with joined mesh? If so how did you solve the problem?
Here’s main part of code:
<template>
<div id="viewport" ref="container"></div>
</template>
<script>
import * as THREE from 'three'
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js'
import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader'
export default {
name: 'Scene',
data() {
return {
camera: null,
scene: null,
renderer: null,
light: null,
light2: null,
mesh: null,
regalMesh: null
}
},
methods: {
init() {
// .. some initial code
// DRACOLoader
const dracoLoader = new DRACOLoader();
dracoLoader.setDecoderPath('dracoDecoder/');
// GLTFLoader
const modelLoader = new GLTFLoader();
modelLoader.setDRACOLoader(dracoLoader);
let dummy = new THREE.Object3D();
let amount = 1;
// INSTANCING
modelLoader.load(
"Monkey.glb", (gltf) => {
const _regalMesh = gltf.scene.getObjectByName('testMesh');
const regalGeometry = _regalMesh.geometry.clone();
const regalMaterial = _regalMesh.material;
this.regalMesh = new THREE.InstancedMesh( regalGeometry, regalMaterial, amount );
for (let i = 0; i <= amount; i++) {
dummy.position.set(i, 1, 1);
dummy.updateMatrix();
this.regalMesh.setMatrixAt( i, dummy.matrix );
}
this.regalMesh.instanceMatrix.needsUpdate = true;
this.regalMesh.instanceMatrix.setUsage( THREE.DynamicDrawUsage );
this.scene.add(this.regalMesh);
},
// called while loading is progressing
function (xhr) {
console.log((xhr.loaded / xhr.total) * 100 + "% loaded");
},
// called when loading has errors
function (error) {
console.log(error);
}
);
},
}
</script>
