https://github.com/mkkellogg/trailrendererjs

3D object trail renderer for Three.js
https://github.com/mkkellogg/trailrendererjs

threejs trail trailrenderer webgl

Last synced: 5 days ago
JSON representation

3D object trail renderer for Three.js

• Host: GitHub
• URL: https://github.com/mkkellogg/trailrendererjs
• Owner: mkkellogg
• Created: 2015-12-24T07:10:11.000Z (about 9 years ago)
• Default Branch: master
• Last Pushed: 2024-06-10T03:44:26.000Z (8 months ago)
• Last Synced: 2024-10-12T22:18:17.734Z (4 months ago)
• Topics: threejs, trail, trailrenderer, webgl
• Language: JavaScript
• Homepage:
• Size: 1 MB
• Stars: 170
• Watchers: 6
• Forks: 26
• Open Issues: 2
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Three.js Trail Renderer

Basic trail renderer for Three.js. This library allows for the straight-forward attachment of motion trails to any 3D object. The programmer simply has to specify the shape of the trail and its target (the target must be a Three.js Object3D instance). The update of the trail is handled automatically by the library. 

The shape of the trail is specified by supplying a list of 3D points. These points make up the local-space head of the trail. During the update phase for the trail, a new instance of the head is created by transforming the local points into world-space using the target Object3D instance's local-to-world transformation matrix. These points are then connected to the existing head of the trail to extend the trail's geometry. 

The trail renderer currently supports both textured and non-textured trails. Non-textured trails work well with many trail shapes in both translucent and opaque modes. Textured trails work well with many shapes as long as the trail is opaque; if the trail is not opaque, flat shapes work best. 

Demo of the effect can be seen [here](http://projects.markkellogg.org/threejs/demo_trail_renderer.php)

The following code shows how to attach a trail renderer in a scene named 'scene' to an existing Object3D instance named 'trailTarget'.

```javascript

// specify points to create planar trail-head geometry

const trailHeadGeometry = [];

trailHeadGeometry.push( 

  new THREE.Vector3( -10.0, 0.0, 0.0 ), 

  new THREE.Vector3( 0.0, 0.0, 0.0 ), 

  new THREE.Vector3( 10.0, 0.0, 0.0 ) 

);

// create the trail renderer object

const trail = new TrailRenderer( scene, false );

// set how often a new trail node will be added and existing nodes will be updated

trail.setAdvanceFrequency(30);

// create material for the trail renderer

const trailMaterial = TrailRenderer.createBaseMaterial();	

// specify length of trail

const trailLength = 150;

// initialize the trail

trail.initialize( trailMaterial, trailLength, false, 0, trailHeadGeometry, trailTarget );

// activate the trail

trail.activate();

function animate() {

    requestAnimationFrame( animate );

    trail.update();

    render();

 

}

```