Develop Reference

ThreeJS: applying edge geometry to ArrowHelper

I'm trying to create an arrow using ArrowHelper in ThreeJS:
let arrow = new THREE.ArrowHelper(direction.normalize(), new THREE.Vector3(), length, color, headLength, headWidth);
Also I want to use a separate color for edges. I realize that I need to use THREE.EdgesGeometry, but how to apply it I don't quite understand. Could anybody help me?
Update
sorry for confusion, I thought the arrow uses pyramid, not cone. Is there a way to replace cone with pyramid and use different color for edges?
Update
Thank you all for your answers, they were really helpful. I ended up with creating custom arrow class (copied most of the code from 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 don't affect lines widths. Any idea why?

edit: A pyramid is a cone with 4 radial segments, if you want that, look at how the arrowhelper constructs it's cone (which is with a tapered CylinderGeometry) and line based on the parameters and replace it with a cone geometry constructed as follows:
original:
_coneGeometry = new CylinderBufferGeometry( 0, 0.5, 1, 5, 1 );
new:
_coneGeometry = new ConeBufferGeometry( 0.5, 1, 4);
Then you don't have to use the EdgesGeometry, but use the wireframe material option (per #prisoner849's comment):
let wireframeMaterial = new THREE.MeshBasicMaterial({color: "aqua", wireframe: true});
let coneEdgeMesh = new THREE.Mesh(_coneGeometry, wireframeMaterial);
Original answer:
THREE.ArrowHelper consists of 2 Object3Ds: one THREE.Line for the line and one THREE.Mesh for the cone of the arrow. The Line geometry only consists of 2 points and has no edges because it is a line, but for the cone you can use:
let coneEdgeGeometry = new THREE.EdgesGeometry(arrow.cone.geometry);
Then you construct a LineSegments object with the edge geometry and the color you want:
let line = new THREE.LineSegments( coneEdgeGeometry, new THREE.LineBasicMaterial( { color: 0xffffff } ) );
arrow.add(line);
If the cone edge is not showing, try setting the renderOrder of the THREE.LineSegments to -1 (this might give other issues)

You can change the colour of arrow's cone like this:
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());
// different colors
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"); // change color of cone
scene.add(ah);
// colourful 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>

Applying skeleton to procedural skinned mesh

In this fiddle I'm trying to create a procedural worm (or snake or caterpillar) character, based on the basic bones example at threejs.org/docs/scenes/bones-browser, but with an extra four bones and two spheres for eyes added on; the added/altered code shown here...
function eyeBall() {
function eyeBall( ) {
var faceIndices = [ 'a', 'b', 'c' ];
var color, f, i, j, p, vertexIndex, radius = 1;
var geometry = new THREE.SphereGeometry( radius, 18, 5 );
for ( i = 0; i < geometry.faces.length; i ++ ) {
f = geometry.faces[ i ];
for( j = 0; j < 3; j++ ) {
vertexIndex = f[ faceIndices[ j ] ];
p = geometry.vertices[ vertexIndex ];
f.color = new THREE.Color( 0xffffff );
if( p.y < -0.9 ) {
f.color = new THREE.Color( 0x000000 );
}
}
}
return geometry;
}
function createBones ( sizing ) {
function createBones ( sizing ) {
bones = [];
var prevBone = new THREE.Bone();
bones.push( prevBone );
prevBone.position.z = - sizing.halfLength;
for ( var i = 0; i < sizing.segmentCount; i ++ ) {
var bone = new THREE.Bone();
bone.position.z = sizing.segmentLength;
bones.push( bone );
prevBone.add( bone );
prevBone = bone;
}
//add more bones
var lHdBone = new THREE.Bone();
lHdBone.position.set( 1.4, 0, 2.8 );
lHdBone.name = 'lHdBone';
bones.push( lHdBone );
prevBone.add( lHdBone );
var rHdBone = new THREE.Bone();
rHdBone.position.set( -1.4, 0, 2.8 );
rHdBone.name = 'rHdBone';
bones.push( rHdBone );
prevBone.add( rHdBone );
var lEyeBone = new THREE.Bone();
lEyeBone.position.set( 0, 0, 1 );
lEyeBone.name = 'lEyeBone';
bones.push( lEyeBone );
lHdBone.add( lEyeBone );
var rEyeBone = new THREE.Bone();
rEyeBone.position.set( 0, 0, 1 );
rEyeBone.name = 'rEyeBone';
bones.push( rEyeBone );
rHdBone.add( rEyeBone );
return bones;
}
function initBones () {
function initBones () {
var segmentLength = 8;
var segmentCount = 4;
var length = segmentLength * segmentCount;
var halfLength = length * 0.5;
var sizing = {
segmentLength : segmentLength,
segmentCount : segmentCount,
length : length,
halfLength : halfLength
};
var geometry = createGeometry( sizing );
var bones = createBones( sizing );
mesh = createMesh( geometry, bones );
var lEye = eyeBall();
var rEye = eyeBall();
lEye.rotateX( -Math.PI * 0.5);
rEye.rotateX( -Math.PI * 0.5);
lEye.translate( 1.4, 0, sizing.halfLength + 2.8 );
rEye.translate( -1.4, 0, sizing.halfLength + 2.8 );
var lEyeMesh = new THREE.Mesh( lEye, material );
var rEyeMesh = new THREE.Mesh( rEye, material );
mesh.add( lEyeMesh );
mesh.add( rEyeMesh );
mesh.scale.multiplyScalar( 1 );
scene.add( mesh );
}
The animation in the fiddle moves the spheres in the same general direction but the spheres are clearly not tied to the skeleton as desired. The eyes should be looking forward throughout. I haven't found any comparable questions for this since most modelling is done in Blender, but I am sure this should be possible in three.js alone.
I feel I'm missing something simple!
This is another fiddle with merged geometries. Now one eye seems to act correctly, but the other eye is evidently a child bone; i.e. bones[6] is a child of bones[5], while they should both be children of bones[4].

Raycaster Not Detecting Certain Objects - Threejs

I have been trying to add a raycaster to my game for some time now. After testing a lot of situations, I have found that the raycaster IS functioning.
There is a scene that contains various enemy objects, and a floor. Same scene. A raycaster is supposed to be sending a ray out from the cursor to things on this scene. However, only the floor is detected as a collision, while all of the other objects cannot be detected.
This is currently being hosted here: http://aceverything.com/cskelly/project2/
Here are some relevant fragments:
function render() {
//console.log(object.position);
// LATER: IMPLEMENT NICER GUN ANIMATION
global_m60.position.x += ( mouseX - global_m60.position.x ) * .45;
if(-mouseY < 1){
global_m60.position.y += ( - mouseY - global_m60.position.y ) * .45;
}
else{
global_m60.position.y = 1;
}
for(i = 0; i < enemy_tanks.length ; ++i){
enemy_tanks[i].position.z += .01;
}
projector.unprojectVector( mouse, camera );
mouse.sub( camera.position );
mouse.normalize();
var raycaster = new THREE.Raycaster( camera.position, mouse );
var intersects = raycaster.intersectObjects( scene.children );
for( var i = 0; i < intersects.length; ++i ){
intersects[i].object.material.map = THREE.ImageUtils.loadTexture("models/red_checkerboard.jpg");
intersects[i].object.material.needsUpdate = true;
console.log("RAY STUFF HAPPENING");
}
camera.lookAt( scene.position );
renderer.clear();
renderer.render( scene, camera );
renderer.clearDepth();
renderer.render( sandbag_scene, camera );
renderer.clearDepth();
renderer.render( scene2, camera );
framecount += 1;
}
Me loading in the objects that are NOT being detected:
// ENEMIES
mtlLoader.setPath('models/');
for(i = 0; i < max_tanks; ++i){
mtlLoader.load( 'ultimate-tank.mtl', function( materials2 ) {
//materials2.needsUpdate = true;
materials2.preload();
var objLoader = new THREE.OBJLoader();
objLoader.setMaterials( materials2 );
//objLoader.setPath( 'obj/male02/' );
objLoader.load( 'models/ultimate-tank.obj', function ( object2 ) {
object2.position.x = (Math.random()*30)-15;
object2.position.y = -1;
object2.position.z = 220;
//object2.position.y = -95;
global_enemy_1 = object2;
global_enemy_1.rotateY(1.507);
//global_enemy_1.renderOrder = 1;
enemy_tanks.push(global_enemy_1);
scene.add( global_enemy_1 ); // THIS HAS TO BE DONE LIKE THIS.
//global_enemy_1.material.color.set( 0xff0000 ); THIS DOESNT WORK...
}, onProgress, onError );
});
}
The original intention was to change the material of objects the raycaster comes into contact with to visually show me that there was a collision. The material part is irrelevant. The part that matters is that:
var intersects = raycaster.intersectObjects( scene.children );
clearly isn't giving me the objects. What gives?

three.js fails to render the normals in a THREE.Points Geometry

I am quite new to threejs. I am currently working on a project that needs to render a point cloud using three.js via the Qt5 Canvas3D. According to the examples of threejs.org, I use a BufferGeometry and set its attributes(position and normal). Then I use a THREE.Points and THREE.PointsMaterial to wrap it. The result is that I can render the points in the scene, however, the normals set on each vertex seem to be ignored. The code snippet is shown below:
var vertexPositions = [
[10, 10, 0, 1, 0, 0],
[10, -10, 0, 1, 0, 0],
[-10, -10, 0, 1, 0, 0]
];
geometry = new THREE.BufferGeometry();
var vertices = new Float32Array( vertexPositions.length * 3 );
for ( var i = 0; i < vertexPositions.length; i++ )
{
vertices[ i*3 + 0 ] = vertexPositions[i][0];
vertices[ i*3 + 1 ] = vertexPositions[i][1];
vertices[ i*3 + 2 ] = vertexPositions[i][2];
}
var normals = new Float32Array( vertexPositions.length * 3 );
for ( i = 0; i < vertexPositions.length; i++ )
{
normals[ i*3 + 0 ] = vertexPositions[i][3];
normals[ i*3 + 1 ] = vertexPositions[i][4];
normals[ i*3 + 2 ] = vertexPositions[i][5];
}
var colors = new Float32Array( vertexPositions.length * 3 );
for ( i = 0; i < vertexPositions.length; i++ )
{
colors[ i*3 + 0 ] = 1;
colors[ i*3 + 1 ] = 0;
colors[ i*3 + 2 ] = 0;
}
geometry.addAttribute( 'position', new THREE.BufferAttribute( vertices, 3 ) );
geometry.addAttribute( 'normal', new THREE.BufferAttribute( normals, 3 ) );
geometry.addAttribute( 'color', new THREE.BufferAttribute( colors, 3 ) );
material = new THREE.PointsMaterial({size:50, vertexColors:THREE.VertexColors});
mesh = new THREE.Points(geometry, material);
scene.add(mesh);
How to render the point cloud with normals set on vertices? What am I missing? Any suggestions would be appreciated. Thanks!

You want to render a point cloud and have it interact with lights.
To do so, you must create a custom ShaderMaterial.
In this answer you will find an example of a custom ShaderMaterial that is used with THREE.Points.
three.js r.75

Changing texture and color on Three.js collada object

I recently got three.js example from the official site working with my collada objects (.dae) using the ColladaLoader.js.
Now my question is, how do i change the loaded collada object color attribute and add a custom texture?? I tried adding the texture with no luck yet.
Here is my code (slightly changed from the original example):
function load_model(el) {
if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
var container, stats;
var camera, scene, renderer, objects;
var particleLight, pointLight;
var dae, skin;
var loader = new THREE.ColladaLoader();
loader.options.convertUpAxis = true;
loader.load( '/site_media/models/model.dae', function ( collada ) {
dae = collada.scene;
skin = collada.skins[ 0 ];
dae.scale.x = dae.scale.y = dae.scale.z = 0.90;
dae.updateMatrix();
init(el);
animate();
} );
function init(el) {
container = document.createElement( 'div' );
el.append( container );
camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 2000 );
camera.position.set( 2, 2, 3 );
scene = new THREE.Scene();
scene.add( dae );
particleLight = new THREE.Mesh( new THREE.SphereGeometry( 4, 8, 8 ), new THREE.MeshBasicMaterial( { color: 0xffffff } ) );
scene.add( particleLight );
// Lights
scene.add( new THREE.AmbientLight( 0xcccccc ) );
var directionalLight = new THREE.DirectionalLight(/*Math.random() * 0xffffff*/0xeeeeee );
directionalLight.position.x = Math.random() - 0.5;
directionalLight.position.y = Math.random() - 0.5;
directionalLight.position.z = Math.random() - 0.5;
directionalLight.position.normalize();
scene.add( directionalLight );
// pointLight = new THREE.PointLight( 0xffffff, 4 );
// pointLight.position = particleLight.position;
// scene.add( pointLight );
renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth/2, window.innerHeight/2 );
container.appendChild( renderer.domElement );
stats = new Stats();
stats.domElement.style.position = 'absolute';
stats.domElement.style.top = '0px';
container.appendChild( stats.domElement );
//
window.addEventListener( 'resize', onWindowResize, false );
}
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth/2, window.innerHeight/2 );
}
//
var t = 0;
var clock = new THREE.Clock();
function animate() {
var delta = clock.getDelta();
requestAnimationFrame( animate );
if ( t > 1 ) t = 0;
if ( skin ) {
// guess this can be done smarter...
// (Indeed, there are way more frames than needed and interpolation is not used at all
// could be something like - one morph per each skinning pose keyframe, or even less,
// animation could be resampled, morphing interpolation handles sparse keyframes quite well.
// Simple animation cycles like this look ok with 10-15 frames instead of 100 ;)
for ( var i = 0; i < skin.morphTargetInfluences.length; i++ ) {
skin.morphTargetInfluences[ i ] = 0;
}
skin.morphTargetInfluences[ Math.floor( t * 30 ) ] = 1;
t += delta;
}
render();
stats.update();
}
function render() {
var timer = Date.now() * 0.0005;
camera.position.x = Math.cos( timer ) * 10;
camera.position.y = 2;
camera.position.z = Math.sin( timer ) * 10;
camera.lookAt( scene.position );
particleLight.position.x = Math.sin( timer * 4 ) * 3009;
particleLight.position.y = Math.cos( timer * 5 ) * 4000;
particleLight.position.z = Math.cos( timer * 4 ) * 3009;
renderer.render( scene, camera );
}
}

You can override your collada scene materials recursively with this kind of function. It goes through the whole hierarchy and assigns a material.
var setMaterial = function(node, material) {
node.material = material;
if (node.children) {
for (var i = 0; i < node.children.length; i++) {
setMaterial(node.children[i], material);
}
}
}
Use it like setMaterial(dae, new THREE.MeshBasicMaterial({color: 0xff0000}));
You could probably adapt that to modify the existing material properties instead of assigning a new one, if needed.

After many problems, we wrote a small hack in ColladaLoader.js taking the idea from #gaitat
witch basically replaces the old path to the textures from the images, passing some new ones in an array, and using regular expressions to parse the xml for the .png or .jpg under images tag. Not sure if there is an easier way but since support was limited we had to come up with a fix somehow
function parse( doc, imageReplace, callBack, url ) {
COLLADA = doc;
callBack = callBack || readyCallbackFunc;
if ( url !== undefined ) {
var parts = url.split( '/' );
parts.pop();
baseUrl = ( parts.length < 1 ? '.' : parts.join( '/' ) ) + '/';
}
parseAsset();
setUpConversion();
images = parseLib( "//dae:library_images/dae:image", _Image, "image" );
for(var i in imageReplace) {
var iR = imageReplace[i];
for(var i in images) {
var image = images[i];
var patt=new RegExp('[a-zA-Z0-9\-\_]*\/'+iR.name,'g');
//if(image.id==iR.id)
if(patt.test(image.init_from))
image.init_from = iR.new_image;
}//for
}
materials = parseLib( "//dae:library_materials/dae:material", Material, "material" );
effects = parseLib( "//dae:library_effects/dae:effect", Effect, "effect" );
geometries = parseLib( "//dae:library_geometries/dae:geometry", Geometry, "geometry" );
cameras = parseLib( ".//dae:library_cameras/dae:camera", Camera, "camera" );
controllers = parseLib( "//dae:library_controllers/dae:controller", Controller, "controller" );
animations = parseLib( "//dae:library_animations/dae:animation", Animation, "animation" );
visualScenes = parseLib( ".//dae:library_visual_scenes/dae:visual_scene", VisualScene, "visual_scene" );
morphs = [];
skins = [];
daeScene = parseScene();
scene = new THREE.Object3D();
for ( var i = 0; i < daeScene.nodes.length; i ++ ) {
scene.add( createSceneGraph( daeScene.nodes[ i ] ) );
}
// unit conversion
scene.position.multiplyScalar(colladaUnit);
scene.scale.multiplyScalar(colladaUnit);
createAnimations();
var result = {
scene: scene,
morphs: morphs,
skins: skins,
animations: animData,
dae: {
images: images,
materials: materials,
cameras: cameras,
effects: effects,
geometries: geometries,
controllers: controllers,
animations: animations,
visualScenes: visualScenes,
scene: daeScene
}
};
if ( callBack ) {
callBack( result );
}
return result;
};

One thing you can do is modify your collada model (dae file) locate the texture reference there and change it to your liking.

if ( url !== undefined ) {
var parts = url.split( '/' );
parts.pop();
baseUrl = ( parts.length < 1 ? '.' : parts.join( '/' ) ) + '/';
}
parseAsset();
setUpConversion();
images = parseLib( "//dae:library_images/dae:image", _Image, "image" );
for(var i in imageReplace) {
var iR = imageReplace[i];
for(var i in images) {
var image = images[i];
var patt=new RegExp('[a-zA-Z0-9\-\_]*\/'+iR.name,'g');
//if(image.id==iR.id)
if(patt.test(image.init_from))
image.init_from = iR.new_image;
}//for
}