Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

246
Visualizações
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
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda