Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

244
Views
How to fix ThreeJS/TroisJS cones looking wrong way?

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?

about 4 years ago · Juan Pablo Isaza
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!