I am currently working on a VueJS app that mainly uses ThreeJS and TroisJS (the ThreeJS integration with Vue). In my current scene, I use an instanced mesh of cones with some lights that have given properties. The instanced mesh code used in the template div of the component with the entire scene is
<InstancedMesh ref="imesh" :count="NUM_INSTANCES" :cast-shadow="true" :receive-shadow="true">
<ConeGeometry :radialSegments="64" :radius="0.8" :height="15" :heightSegments="1" :thetaLength="6.2831"/>
<PhysicalMaterial />
</InstancedMesh>
Then, I pretty much copied code from the ThreeJS demo and added some lines to have around 8000 cones be displayed at random while pointing at the origin.
export default {
components: {
Camera,
EffectComposer,
InstancedMesh,
PhongMaterial,
PhysicalMaterial,
Renderer,
RenderPass,
SphereGeometry,
SpotLight,
Scene,
UnrealBloomPass,
BasicMaterial,
ConeGeometry,
PointLight,
CylinderGeometry,
LambertMaterial
},
setup() {
return {
NUM_INSTANCES:8000,
};
},
mounted() {
// init instanced mesh matrix
const imesh = this.$refs.imesh.mesh;
const renderer = this.$refs.renderer;
const camera = this.$refs.camera;
this.$refs.renderer.three.setSize(400,400);
const dummy = new Object3D();
const { randFloat: rnd, randFloatSpread: rndFS } = MathUtils;
for (let i = 0; i < this.NUM_INSTANCES; i++) {
dummy.position.set(rndFS(200), rndFS(200), 0);
const scale = 0.3;
dummy.scale.set(scale, scale, scale);
dummy.lookAt(0, 0, 0);
dummy.updateMatrix();
imesh.setMatrixAt(i, dummy.matrix);
}
imesh.instanceMatrix.needsUpdate = true;
},
};
Because the ThreeJS documentation says the .lookAt makes an object point at a given world position ,I thought this would make the cones point at the origin. However, when I use this code, the cones point in a circular form around the origin: cones to the +x direction point in a counterclockwise circle while cones in the -x direction point in a clockwise circle. It appears like this. How can I fix this problem?