Set a distance between two meshes in THREE.JS

user_18803691 0
Viewed 33

I have this code which generates cylinders in position of each Poi (sprite), So i want to set a distance between the cylinder and the sprite , how can I do?

const THREE = this.context.three;
const textureLoader = new THREE.TextureLoader();
const geometry = new THREE.CylinderGeometry( 0.09, 0.09, 5, 5 );
geometry.rotateZ(-Math.PI * 0.5);
const material = new THREE.MeshBasicMaterial( {color: 0xFF00FF } );
const cylinder = new THREE.Mesh( geometry, material );
if (!this.inputs.sprite) {
  return;
}

if (!this.inputs.sprite.startsWith('/assets/')) {
  textureLoader.crossOrigin = 'Anonymous';
}

let map;
if (this.inputs.sprite.indexOf('.gif') !== -1) {
  map = new GifLoader().load(this.inputs.sprite);
} else {
  map = textureLoader.load(this.inputs.sprite);
}
map.minFilter = THREE.LinearFilter;
map.wrapS = map.wrapT = THREE.ClampToEdgeWrapping;

this.material = new THREE.SpriteMaterial( { map, color: this.inputs.color, fog: false } );
this.material.alphaTest = 0.5;
this.material.map.encoding = THREE.sRGBEncoding;
this.sprite = new THREE.Sprite( this.material );
this.sprite.add(cylinder);

this.onObjectReady(this.sprite, true);
mesh angular three.js 3d javascript
1 Answers

Since you add the cylinder as a child of the sprite, you can just define an offset position for the cylinder. Meaning:

cylinder.position.x = 2;

Assuming no scale is applied to the cylinder's and its ancestor nodes, the distance from the cylinder to the sprites position would be 2 world units.

user_52508470
Related