Utilizing edge geometry in ArrowHelper with ThreeJS

Question

Utilizing edge geometry in ArrowHelper with ThreeJS

I'm attempting to generate an arrow using ArrowHelper within ThreeJS:

let arrow = new THREE.ArrowHelper(direction.normalize(), new THREE.Vector3(), length, color, headLength, headWidth);

In addition, I would like to have a distinct color for the edges. It seems that I should utilize THREE.EdgesGeometry, but I am unsure how to implement it. Can someone provide assistance?

Update I apologize for the confusion, I mistakenly thought the arrow was based on a pyramid rather than a cone shape. Is there a way to substitute the cone with a pyramid and assign different colors to the edges?

Update

Thank you everyone for your responses, they were incredibly helpful. I decided to create a custom arrow class (derived from most of the code in ArrowHelper):

class CustomArrow extends THREE.Object3D {

    constructor( dir, origin, length, color, edgeColor, headLength, headWidth ) {

        super();
        // dir is assumed to be normalized

        this.type = 'CustomArrow';

        if ( dir === undefined ) dir = new THREE.Vector3( 0, 0, 1 );
        if ( origin === undefined ) origin = new THREE.Vector3( 0, 0, 0 );
        if ( length === undefined ) length = 1;
        if ( color === undefined ) color = 0xffff00;
        if ( headLength === undefined ) headLength = 0.2 * length;
        if ( headWidth === undefined ) headWidth = 0.2 * headLength;

        if ( this._lineGeometry === undefined ) {
            this._lineGeometry = new THREE.BufferGeometry();
            this._lineGeometry.setAttribute( 'position', new THREE.Float32BufferAttribute( [ 0, 0, 0, 0, 1, 0 ], 3 ) );
            this._coneGeometry = new THREE.ConeBufferGeometry( 0.5, 1, 6);
            this._coneGeometry.translate( 0, - 0.5, 0 );
            this._axis = new THREE.Vector3();
        }

        this.position.copy( origin );

        this.line = new THREE.Line( this._lineGeometry, new THREE.LineBasicMaterial( { color: color, toneMapped: false, linewidth: 4 } ) );
        this.line.matrixAutoUpdate = false;
        this.add( this.line )

        // base material        
        this.cone = new THREE.Mesh( this._coneGeometry, new THREE.MeshBasicMaterial( { color: color, toneMapped: false } ) );
        this.add(this.cone);

        // wire frame
        this.wireframe = new THREE.Mesh( this._coneGeometry, new THREE.MeshBasicMaterial( { 
            color: edgeColor, 
            toneMapped: false, 
            wireframe: true,
            wireframeLinewidth: 2 } ) );
        this.add(this.wireframe);

        this.setDirection( dir );
        this.setLength( length, headLength, headWidth );
    }

    setDirection( dir ) {

        // dir is assumed to be normalized

        if ( dir.y > 0.99999 ) {

            this.quaternion.set( 0, 0, 0, 1 );

        } else if ( dir.y < - 0.99999 ) {

            this.quaternion.set( 1, 0, 0, 0 );

        } else {

            this._axis.set( dir.z, 0, - dir.x ).normalize();

            const radians = Math.acos( dir.y );

            this.quaternion.setFromAxisAngle( this._axis, radians );

        }

    }

    setLength( length, headLength, headWidth ) {

        if ( headLength === undefined ) headLength = 0.2 * length;
        if ( headWidth === undefined ) headWidth = 0.2 * headLength;

        this.line.scale.set( 1, Math.max( 0.0001, length - headLength ), 1 ); // see #17458
        this.line.updateMatrix();
        
        this.cone.scale.set( headWidth, headLength, headWidth );
        this.cone.position.y = length;
        this.cone.updateMatrix();
        
        this.wireframe.scale.set( headWidth, headLength, headWidth );
        this.wireframe.position.y = length;
        this.wireframe.updateMatrix();
    }

    setColor( color ) {
        this.line.material.color.set( color );
        // this.cone.material.color.set( color );
        // this.wireframe.material.color.set( color );
    }

    copy( source ) {
        super.copy( source, false );
        this.line.copy( source.line );
        this.cone.copy( source.cone );
        this.wireframe.copy( source.wireframe );
        return this;
    }
}

For some reason, linewidth and wireframeLinewidth do not seem to impact line widths. Any insights into why this might be?

javascript three.js

Answer 1

Answer №1

update: To create a pyramid resembling a cone with 4 radial segments, take inspiration from how the arrowhelper generates its cone using a tapered CylinderGeometry and line based on specific parameters. Replace the existing cone geometry setup with the following:

previous version:

_coneGeometry = new CylinderBufferGeometry( 0, 0.5, 1, 5, 1 );

new version:

_coneGeometry = new ConeBufferGeometry( 0.5, 1, 4);

This way, you can skip using EdgesGeometry and opt for the wireframe material option (as suggested by @prisoner849):

let wireframeMaterial = new THREE.MeshBasicMaterial({color: "aqua", wireframe: true});

let coneEdgeMesh = new THREE.Mesh(_coneGeometry, wireframeMaterial);

Earlier response:

The THREE.ArrowHelper comprises of 2 Object3Ds: a THREE.Line for the line element and a THREE.Mesh for the arrow's cone shape. While the Line geometry has only 2 points without edges due to its linear nature, for the cone component you can utilize:

let coneEdgeGeometry = new THREE.EdgesGeometry(arrow.cone.geometry);

Create a LineSegments object using the edge geometry and customize it with your preferred color:

let line = new THREE.LineSegments( coneEdgeGeometry, new THREE.LineBasicMaterial( { color: 0xffffff } ) );
arrow.add(line);

If the cone edge does not appear, adjusting the renderOrder of the THREE.LineSegments to -1 may solve the issue (though it could potentially lead to other complications)

Answer 2

update: To create a pyramid resembling a cone with 4 radial segments, take inspiration from how the arrowhelper generates its cone using a tapered CylinderGeometry and line based on specific parameters. Replace the existing cone geometry setup with the following:

previous version:

_coneGeometry = new CylinderBufferGeometry( 0, 0.5, 1, 5, 1 );

new version:

_coneGeometry = new ConeBufferGeometry( 0.5, 1, 4);

This way, you can skip using EdgesGeometry and opt for the wireframe material option (as suggested by @prisoner849):

let wireframeMaterial = new THREE.MeshBasicMaterial({color: "aqua", wireframe: true});

let coneEdgeMesh = new THREE.Mesh(_coneGeometry, wireframeMaterial);

Earlier response:

The THREE.ArrowHelper comprises of 2 Object3Ds: a THREE.Line for the line element and a THREE.Mesh for the arrow's cone shape. While the Line geometry has only 2 points without edges due to its linear nature, for the cone component you can utilize:

let coneEdgeGeometry = new THREE.EdgesGeometry(arrow.cone.geometry);

Create a LineSegments object using the edge geometry and customize it with your preferred color:

let line = new THREE.LineSegments( coneEdgeGeometry, new THREE.LineBasicMaterial( { color: 0xffffff } ) );
arrow.add(line);

If the cone edge does not appear, adjusting the renderOrder of the THREE.LineSegments to -1 may solve the issue (though it could potentially lead to other complications)

Answer 3

Answer №2

To customize the appearance of the arrow's cone, you can adjust the color using the following code snippet:

body {
  overflow: hidden;
  margin: 0;
}

<script type="module">
  import * as THREE from "https://threejs.org/build/three.module.js";     
  import {OrbitControls} from "https://threejs.org/examples/jsm/controls/OrbitControls.js"; 
  
  let scene = new THREE.Scene(); 
  let camera = new THREE.PerspectiveCamera(60, innerWidth / innerHeight,
  1, 100); 
  camera.position.set(0, 5, 10); 
  let renderer = new THREE.WebGLRenderer(); 
  renderer.setSize(innerWidth, innerHeight); 
  document.body.appendChild(renderer.domElement); 
  
  new OrbitControls(camera, renderer.domElement); 
  
  scene.add(new THREE.GridHelper());
  
  // Change the arrow cone color
  let ah = new THREE.ArrowHelper( 
    new THREE.Vector3(0, 1, 0), 
    new THREE.Vector3(-4, 0, 0), 
    5, 
    "magenta" /* default colour */); 
  ah.cone.material.color.set("red"); // modify cone color here
  scene.add(ah); 
  
  // Create a colorful pyramid
  let cg = new THREE.SphereBufferGeometry(0.5, 4, 2).toNonIndexed();
  let pos = cg.attributes.position;
  for (let i = 0; i < pos.count; i++){
    if (pos.getY(i) < 0) pos.setY(i, 0);
  }
  console.log(cg);
  let cls = [
    new THREE.Color("red"),
    new THREE.Color("green"),
    new THREE.Color("blue"),
    new THREE.Color("yellow")
  ]
  let colors = [];
  for(let i = 0; i < 2; i++){
    cls.forEach( (c) => {
      colors.push(c.r, c.g, c.b);
      colors.push(c.r, c.g, c.b);
      colors.push(c.r, c.g, c.b);
    });
  }
  cg.setAttribute("color", new THREE.Float32BufferAttribute(colors, 3));
  
  let cm = new THREE.MeshBasicMaterial({vertexColors: true});
  let co = new THREE.Mesh(cg, cm);
  co.scale.set(1, 5, 1);
  scene.add(co);
  
  renderer.setAnimationLoop(()=>{ 
    renderer.render(scene, camera); 
  });
</script>

Answer 4

To customize the appearance of the arrow's cone, you can adjust the color using the following code snippet:

body {
  overflow: hidden;
  margin: 0;
}

<script type="module">
  import * as THREE from "https://threejs.org/build/three.module.js";     
  import {OrbitControls} from "https://threejs.org/examples/jsm/controls/OrbitControls.js"; 
  
  let scene = new THREE.Scene(); 
  let camera = new THREE.PerspectiveCamera(60, innerWidth / innerHeight,
  1, 100); 
  camera.position.set(0, 5, 10); 
  let renderer = new THREE.WebGLRenderer(); 
  renderer.setSize(innerWidth, innerHeight); 
  document.body.appendChild(renderer.domElement); 
  
  new OrbitControls(camera, renderer.domElement); 
  
  scene.add(new THREE.GridHelper());
  
  // Change the arrow cone color
  let ah = new THREE.ArrowHelper( 
    new THREE.Vector3(0, 1, 0), 
    new THREE.Vector3(-4, 0, 0), 
    5, 
    "magenta" /* default colour */); 
  ah.cone.material.color.set("red"); // modify cone color here
  scene.add(ah); 
  
  // Create a colorful pyramid
  let cg = new THREE.SphereBufferGeometry(0.5, 4, 2).toNonIndexed();
  let pos = cg.attributes.position;
  for (let i = 0; i < pos.count; i++){
    if (pos.getY(i) < 0) pos.setY(i, 0);
  }
  console.log(cg);
  let cls = [
    new THREE.Color("red"),
    new THREE.Color("green"),
    new THREE.Color("blue"),
    new THREE.Color("yellow")
  ]
  let colors = [];
  for(let i = 0; i < 2; i++){
    cls.forEach( (c) => {
      colors.push(c.r, c.g, c.b);
      colors.push(c.r, c.g, c.b);
      colors.push(c.r, c.g, c.b);
    });
  }
  cg.setAttribute("color", new THREE.Float32BufferAttribute(colors, 3));
  
  let cm = new THREE.MeshBasicMaterial({vertexColors: true});
  let co = new THREE.Mesh(cg, cm);
  co.scale.set(1, 5, 1);
  scene.add(co);
  
  renderer.setAnimationLoop(()=>{ 
    renderer.render(scene, camera); 
  });
</script>

Utilizing edge geometry in ArrowHelper with ThreeJS

Answer №1

Answer №2

Similar questions

Javascript - Could anyone provide a detailed explanation of the functionality of this code snippet?

Hiding or revealing the coupon field on the Magento cart page

The method .depth() does not exist within this context

Create a nested array of subcategories within an array object

Having trouble installing Angular 4 with npm?

How to extract text from a dropdown menu using JQuery in HTML

Sending information upwards within an onClick event in a React component

Utilizing Curves in conjunction with tubeGeometry

Disabling $routeprovider while implementing bootstrap

To trigger a pop-up window displaying a link upon clicking the submit button

Switching the background image when hovering over a list element

Avoid changing the orientation

Basic inquiry about Ajax

I am encountering an error stating "Cannot locate module 'nestjs/common' or its related type declarations."

Converting Python code into JavaScript for use on an iPhone device

The types 'X' and 'string' do not intersect

Adjusting the background color of <tr> depending on the number of <tr> elements in the HTML using CSS

Is there a built-in method in Next.js 13 to secure routes from unauthorized access?

Redux: utilizing yield within an unrecognized function

The functionality of .attachClickHandler() is not maintained when the page is refreshed or redirected