Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

three.meshline

Package Overview
Dependencies
Maintainers
2
Versions
9
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

three.meshline - npm Package Compare versions

Comparing version 1.2.1 to 1.3.0

4

package.json
{
"name": "three.meshline",
"version": "1.2.1",
"version": "1.3.0",
"description": "Mesh replacement for THREE.Line",

@@ -31,2 +31,2 @@ "main": "src/THREE.MeshLine.js",

"homepage": "https://github.com/spite/THREE.MeshLine#readme"
}
}

105

README.md

@@ -23,4 +23,4 @@ # MeshLine

* Include script
* Create and populate a geometry
* Create a MeshLine and assign the geometry
* Create an array of 3D coordinates
* Create a MeshLine and assign the points
* Create a MeshLineMaterial

@@ -41,33 +41,51 @@ * Use MeshLine and MeshLineMaterial to create a THREE.Mesh

```js
var THREE = require( 'three' );
var MeshLine = require( 'three.meshline' );
const THREE = require('three');
const MeshLine = require('three.meshline').MeshLine;
const MeshLineMaterial = require('three.meshline').MeshLineMaterial;
const MeshLineRaycast = require('three.meshline').MeshLineRaycast;
```
or
```js
import * as THREE from 'three';
import { MeshLine, MeshLineMaterial, MeshLineRaycast } from 'three.meshline';
```
##### Create and populate a geometry #####
##### Create an array of 3D coordinates #####
First, create the list of vertices that will define the line. ```MeshLine``` accepts ```THREE.Geometry``` (looking up the ```.vertices``` in it) and ```Array```/```Float32Array```. ```THREE.BufferGeometry``` coming soon, and may be others like ```Array``` of ```THREE.Vector3```.
First, create the list of numbers that will define the 3D points for the line.
```js
var geometry = new THREE.Geometry();
for( var j = 0; j < Math.PI; j += 2 * Math.PI / 100 ) {
var v = new THREE.Vector3( Math.cos( j ), Math.sin( j ), 0 );
geometry.vertices.push( v );
const points = [];
for (let j = 0; j < Math.PI; j += (2 * Math.PI) / 100) {
points.push(Math.cos(j), Math.sin(j), 0);
}
```
##### Create a MeshLine and assign the geometry #####
```MeshLine``` also accepts a ```Geometry``` or ```BufferGeometry``` looking up the vertices in it.
Once you have that, you can create a new ```MeshLine```, and call ```.setGeometry()``` passing the vertices.
```js
const geometry = new THREE.Geometry();
for (let j = 0; j < Math.PI; j += 2 * Math.PI / 100) {
const v = new THREE.Vector3(Math.cos(j), Math.sin(j), 0);
geometry.vertices.push(v);
}
```
##### Create a MeshLine and assign the points #####
Once you have that, you can create a new `MeshLine`, and call `.setPoints()` passing the list of points.
```js
var line = new MeshLine();
line.setGeometry( geometry );
const line = new MeshLine();
line.setPoints(points);
```
Note: ```.setGeometry``` accepts a second parameter, which is a function to define the width in each point along the line. By default that value is 1, making the line width 1 * lineWidth.
Note: `.setPoints` accepts a second parameter, which is a function to define the width in each point along the line. By default that value is 1, making the line width 1 \* lineWidth in the material.
```js
line.setGeometry( geometry, function( p ) { return 2; } ); // makes width 2 * lineWidth
line.setGeometry( geometry, function( p ) { return 1 - p; } ); // makes width taper
line.setGeometry( geometry, function( p ) { return 2 + Math.sin( 50 * p ); } ); // makes width sinusoidal
// p is a decimal percentage of the number of points
// ie. point 200 of 250 points, p = 0.8
line.setPoints(geometry, p => 2); // makes width 2 * lineWidth
line.setPoints(geometry, p => 1 - p); // makes width taper
line.setPoints(geometry, p => 2 + Math.sin(50 * p)); // makes width sinusoidal
```

@@ -80,3 +98,3 @@

```js
var material = new MeshLineMaterial(OPTIONS);
const material = new MeshLineMaterial(OPTIONS);
```

@@ -102,4 +120,2 @@

* ```lineWidth``` - float defining width (if ```sizeAttenuation``` is true, it's world units; else is screen pixels)
* ```near``` - camera near clip plane distance (REQUIRED if ```sizeAttenuation``` set to false)
* ```far``` - camera far clip plane distance (REQUIRED if ```sizeAttenuation``` set to false)

@@ -113,6 +129,47 @@ If you're rendering transparent lines or using a texture with alpha map, you should set ```depthTest``` to ```false```, ```transparent``` to ```true``` and ```blending``` to an appropriate blending mode, or use ```alphaTest```.

```js
var mesh = new THREE.Mesh( line.geometry, material ); // this syntax could definitely be improved!
scene.add( mesh );
const mesh = new THREE.Mesh(line, material);
scene.add(mesh);
```
You can optionally add raycast support with the following.
```js
mesh.raycast = MeshLineRaycast;
```
### Declarative use ###
THREE.meshline can be used declaritively. This is how it would look like in [react-three-fiber](https://github.com/drcmda/react-three-fiber). You can try it live [here](https://codesandbox.io/s/react-three-fiber-three.meshline-example-vl221).
<p align="center">
<a href="https://codesandbox.io/s/react-three-fiber-threejs-meshline-example-vl221"><img width="432" height="240" src="https://imgur.com/mZikTAH.gif" /></a>
<a href="https://codesandbox.io/s/threejs-meshline-custom-spring-3-ypkxx"><img width="432" height="240" src="https://imgur.com/g8ts0vJ.gif" /></a>
</p>
```jsx
import { extend, Canvas } from 'react-three-fiber'
import { MeshLine, MeshLineMaterial, MeshLineRaycast } from 'three.meshline'
extend({ MeshLine, MeshLineMaterial })
function Line({ points, width, color }) {
return (
<Canvas>
<mesh raycast={MeshLineRaycast}>
<meshLine attach="geometry" points={points} />
<meshLineMaterial
attach="material"
transparent
depthTest={false}
lineWidth={width}
color={color}
dashArray={0.05}
dashRatio={0.95}
/>
</mesh>
</Canvas>
)
}
```
### TODO ###

@@ -143,2 +200,2 @@

Copyright (C) 2015-2016 Jaume Sanchez Elias, http://www.clicktorelease.com
Copyright (C) 2015-2016 Jaume Sanchez Elias, http://www.clicktorelease.com

1354

src/THREE.MeshLine.js
;(function() {
'use strict'
"use strict";
var root = this
var root = this
var has_require = typeof require !== 'undefined'
var has_require = typeof require !== 'undefined'
var THREE = root.THREE || (has_require && require('three'))
if (!THREE) throw new Error('MeshLine requires three.js')
var THREE = root.THREE || has_require && require('three')
if( !THREE )
throw new Error( 'MeshLine requires three.js' )
function MeshLine() {
THREE.BufferGeometry.call(this)
this.type = 'MeshLine'
function MeshLine() {
this.positions = []
this.positions = [];
this.previous = []
this.next = []
this.side = []
this.width = []
this.indices_array = []
this.uvs = []
this.counters = []
this._points = []
this._geom = null
this.previous = [];
this.next = [];
this.side = [];
this.width = [];
this.indices_array = [];
this.uvs = [];
this.counters = [];
this.geometry = new THREE.BufferGeometry();
this.widthCallback = null
this.widthCallback = null;
// Used to raycast
this.matrixWorld = new THREE.Matrix4()
// Used to raycast
this.matrixWorld = new THREE.Matrix4();
}
Object.defineProperties(this, {
// this is now a bufferGeometry
// add getter to support previous api
geometry: {
enumerable: true,
get: function() {
return this
},
},
geom: {
enumerable: true,
get: function() {
return this._geom
},
set: function(value) {
this.setGeometry(value, this.widthCallback)
},
},
// for declaritive architectures
// to return the same value that sets the points
// eg. this.points = points
// console.log(this.points) -> points
points: {
enumerable: true,
get: function() {
return this._points
},
set: function(value) {
this.setPoints(value, this.widthCallback)
},
},
})
}
MeshLine.prototype.setMatrixWorld = function(matrixWorld) {
this.matrixWorld = matrixWorld;
}
MeshLine.prototype = Object.create(THREE.BufferGeometry.prototype)
MeshLine.prototype.constructor = MeshLine
MeshLine.prototype.isMeshLine = true
MeshLine.prototype.setMatrixWorld = function(matrixWorld) {
this.matrixWorld = matrixWorld
}
MeshLine.prototype.setGeometry = function( g, c ) {
this.widthCallback = c;
this.positions = [];
this.counters = [];
// g.computeBoundingBox();
// g.computeBoundingSphere();
// set the normals
// g.computeVertexNormals();
if( g instanceof THREE.Geometry ) {
for( var j = 0; j < g.vertices.length; j++ ) {
var v = g.vertices[ j ];
var c = j/g.vertices.length;
this.positions.push( v.x, v.y, v.z );
this.positions.push( v.x, v.y, v.z );
this.counters.push(c);
this.counters.push(c);
// setting via a geometry is rather superfluous
// as you're creating a unecessary geometry just to throw away
// but exists to support previous api
MeshLine.prototype.setGeometry = function(g, c) {
// as the input geometry are mutated we store them
// for later retreival when necessary (declaritive architectures)
this._geometry = g;
if (g instanceof THREE.Geometry) {
this.setPoints(g.vertices, c);
} else if (g instanceof THREE.BufferGeometry) {
this.setPoints(g.getAttribute("position").array, c);
} else {
this.setPoints(g, c);
}
}
}
if( g instanceof THREE.BufferGeometry ) {
// read attribute positions ?
}
if( g instanceof Float32Array || g instanceof Array ) {
for( var j = 0; j < g.length; j += 3 ) {
var c = j/g.length;
this.positions.push( g[ j ], g[ j + 1 ], g[ j + 2 ] );
this.positions.push( g[ j ], g[ j + 1 ], g[ j + 2 ] );
this.counters.push(c);
this.counters.push(c);
}
}
this.process();
}
MeshLine.prototype.raycast = ( function () {
var inverseMatrix = new THREE.Matrix4();
var ray = new THREE.Ray();
var sphere = new THREE.Sphere();
return function raycast( raycaster, intersects ) {
var precision = raycaster.linePrecision;
var precisionSq = precision * precision;
var interRay = new THREE.Vector3();
var geometry = this.geometry;
if ( geometry.boundingSphere === null ) geometry.computeBoundingSphere();
// Checking boundingSphere distance to ray
sphere.copy( geometry.boundingSphere );
sphere.applyMatrix4( this.matrixWorld );
if ( raycaster.ray.intersectSphere( sphere, interRay ) === false ) {
MeshLine.prototype.setPoints = function(points, wcb) {
if (!(points instanceof Float32Array) && !(points instanceof Array)) {
console.error(
"ERROR: The BufferArray of points is not instancied correctly."
);
return;
}
inverseMatrix.getInverse( this.matrixWorld );
ray.copy( raycaster.ray ).applyMatrix4( inverseMatrix );
var vStart = new THREE.Vector3();
var vEnd = new THREE.Vector3();
var interSegment = new THREE.Vector3();
var step = this instanceof THREE.LineSegments ? 2 : 1;
if ( geometry instanceof THREE.BufferGeometry ) {
var index = geometry.index;
var attributes = geometry.attributes;
if ( index !== null ) {
var indices = index.array;
var positions = attributes.position.array;
for ( var i = 0, l = indices.length - 1; i < l; i += step ) {
var a = indices[ i ];
var b = indices[ i + 1 ];
vStart.fromArray( positions, a * 3 );
vEnd.fromArray( positions, b * 3 );
var distSq = ray.distanceSqToSegment( vStart, vEnd, interRay, interSegment );
if ( distSq > precisionSq ) continue;
interRay.applyMatrix4( this.matrixWorld ); //Move back to world space for distance calculation
var distance = raycaster.ray.origin.distanceTo( interRay );
if ( distance < raycaster.near || distance > raycaster.far ) continue;
intersects.push( {
distance: distance,
// What do we want? intersection point on the ray or on the segment??
// point: raycaster.ray.at( distance ),
point: interSegment.clone().applyMatrix4( this.matrixWorld ),
index: i,
face: null,
faceIndex: null,
object: this
} );
}
} else {
var positions = attributes.position.array;
for ( var i = 0, l = positions.length / 3 - 1; i < l; i += step ) {
vStart.fromArray( positions, 3 * i );
vEnd.fromArray( positions, 3 * i + 3 );
var distSq = ray.distanceSqToSegment( vStart, vEnd, interRay, interSegment );
if ( distSq > precisionSq ) continue;
interRay.applyMatrix4( this.matrixWorld ); //Move back to world space for distance calculation
var distance = raycaster.ray.origin.distanceTo( interRay );
if ( distance < raycaster.near || distance > raycaster.far ) continue;
intersects.push( {
distance: distance,
// What do we want? intersection point on the ray or on the segment??
// point: raycaster.ray.at( distance ),
point: interSegment.clone().applyMatrix4( this.matrixWorld ),
index: i,
face: null,
faceIndex: null,
object: this
} );
}
// as the points are mutated we store them
// for later retreival when necessary (declaritive architectures)
this._points = points;
this.widthCallback = wcb;
this.positions = [];
this.counters = [];
if (points.length && points[0] instanceof THREE.Vector3) {
// could transform Vector3 array into the array used below
// but this approach will only loop through the array once
// and is more performant
for (var j = 0; j < points.length; j++) {
var p = points[j];
var c = j / points.length;
this.positions.push(p.x, p.y, p.z);
this.positions.push(p.x, p.y, p.z);
this.counters.push(c);
this.counters.push(c);
}
} else if ( geometry instanceof THREE.Geometry ) {
var vertices = geometry.vertices;
var nbVertices = vertices.length;
for ( var i = 0; i < nbVertices - 1; i += step ) {
var distSq = ray.distanceSqToSegment( vertices[ i ], vertices[ i + 1 ], interRay, interSegment );
if ( distSq > precisionSq ) continue;
interRay.applyMatrix4( this.matrixWorld ); //Move back to world space for distance calculation
var distance = raycaster.ray.origin.distanceTo( interRay );
if ( distance < raycaster.near || distance > raycaster.far ) continue;
intersects.push( {
distance: distance,
// What do we want? intersection point on the ray or on the segment??
// point: raycaster.ray.at( distance ),
point: interSegment.clone().applyMatrix4( this.matrixWorld ),
index: i,
face: null,
faceIndex: null,
object: this
} );
} else {
for (var j = 0; j < points.length; j += 3) {
var c = j / points.length;
this.positions.push(points[j], points[j + 1], points[j + 2]);
this.positions.push(points[j], points[j + 1], points[j + 2]);
this.counters.push(c);
this.counters.push(c);
}
}
this.process();
}
};
function MeshLineRaycast(raycaster, intersects) {
var inverseMatrix = new THREE.Matrix4()
var ray = new THREE.Ray()
var sphere = new THREE.Sphere()
var interRay = new THREE.Vector3()
var geometry = this.geometry
// Checking boundingSphere distance to ray
}() );
sphere.copy(geometry.boundingSphere)
sphere.applyMatrix4(this.matrixWorld)
if (raycaster.ray.intersectSphere(sphere, interRay) === false) {
return
}
MeshLine.prototype.compareV3 = function( a, b ) {
inverseMatrix.getInverse(this.matrixWorld)
ray.copy(raycaster.ray).applyMatrix4(inverseMatrix)
var aa = a * 6;
var ab = b * 6;
return ( this.positions[ aa ] === this.positions[ ab ] ) && ( this.positions[ aa + 1 ] === this.positions[ ab + 1 ] ) && ( this.positions[ aa + 2 ] === this.positions[ ab + 2 ] );
var vStart = new THREE.Vector3()
var vEnd = new THREE.Vector3()
var interSegment = new THREE.Vector3()
var step = this instanceof THREE.LineSegments ? 2 : 1
var index = geometry.index
var attributes = geometry.attributes
}
if (index !== null) {
var indices = index.array
var positions = attributes.position.array
var widths = attributes.width.array
MeshLine.prototype.copyV3 = function( a ) {
for (var i = 0, l = indices.length - 1; i < l; i += step) {
var a = indices[i]
var b = indices[i + 1]
var aa = a * 6;
return [ this.positions[ aa ], this.positions[ aa + 1 ], this.positions[ aa + 2 ] ];
vStart.fromArray(positions, a * 3)
vEnd.fromArray(positions, b * 3)
var width = widths[Math.floor(i / 3)] != undefined ? widths[Math.floor(i / 3)] : 1
var precision = raycaster.params.Line.threshold + (this.material.lineWidth * width) / 2
var precisionSq = precision * precision
}
var distSq = ray.distanceSqToSegment(vStart, vEnd, interRay, interSegment)
MeshLine.prototype.process = function() {
if (distSq > precisionSq) continue
var l = this.positions.length / 6;
interRay.applyMatrix4(this.matrixWorld) //Move back to world space for distance calculation
this.previous = [];
this.next = [];
this.side = [];
this.width = [];
this.indices_array = [];
this.uvs = [];
var distance = raycaster.ray.origin.distanceTo(interRay)
for( var j = 0; j < l; j++ ) {
this.side.push( 1 );
this.side.push( -1 );
}
if (distance < raycaster.near || distance > raycaster.far) continue
var w;
for( var j = 0; j < l; j++ ) {
if( this.widthCallback ) w = this.widthCallback( j / ( l -1 ) );
else w = 1;
this.width.push( w );
this.width.push( w );
}
intersects.push({
distance: distance,
// What do we want? intersection point on the ray or on the segment??
// point: raycaster.ray.at( distance ),
point: interSegment.clone().applyMatrix4(this.matrixWorld),
index: i,
face: null,
faceIndex: null,
object: this,
})
// make event only fire once
i = l
}
}
}
MeshLine.prototype.raycast = MeshLineRaycast
MeshLine.prototype.compareV3 = function(a, b) {
var aa = a * 6
var ab = b * 6
return (
this.positions[aa] === this.positions[ab] &&
this.positions[aa + 1] === this.positions[ab + 1] &&
this.positions[aa + 2] === this.positions[ab + 2]
)
}
for( var j = 0; j < l; j++ ) {
this.uvs.push( j / ( l - 1 ), 0 );
this.uvs.push( j / ( l - 1 ), 1 );
}
MeshLine.prototype.copyV3 = function(a) {
var aa = a * 6
return [this.positions[aa], this.positions[aa + 1], this.positions[aa + 2]]
}
var v;
MeshLine.prototype.process = function() {
var l = this.positions.length / 6
if( this.compareV3( 0, l - 1 ) ){
v = this.copyV3( l - 2 );
} else {
v = this.copyV3( 0 );
}
this.previous.push( v[ 0 ], v[ 1 ], v[ 2 ] );
this.previous.push( v[ 0 ], v[ 1 ], v[ 2 ] );
for( var j = 0; j < l - 1; j++ ) {
v = this.copyV3( j );
this.previous.push( v[ 0 ], v[ 1 ], v[ 2 ] );
this.previous.push( v[ 0 ], v[ 1 ], v[ 2 ] );
}
this.previous = []
this.next = []
this.side = []
this.width = []
this.indices_array = []
this.uvs = []
for( var j = 1; j < l; j++ ) {
v = this.copyV3( j );
this.next.push( v[ 0 ], v[ 1 ], v[ 2 ] );
this.next.push( v[ 0 ], v[ 1 ], v[ 2 ] );
}
var w
if( this.compareV3( l - 1, 0 ) ){
v = this.copyV3( 1 );
} else {
v = this.copyV3( l - 1 );
}
this.next.push( v[ 0 ], v[ 1 ], v[ 2 ] );
this.next.push( v[ 0 ], v[ 1 ], v[ 2 ] );
var v
// initial previous points
if (this.compareV3(0, l - 1)) {
v = this.copyV3(l - 2)
} else {
v = this.copyV3(0)
}
this.previous.push(v[0], v[1], v[2])
this.previous.push(v[0], v[1], v[2])
for( var j = 0; j < l - 1; j++ ) {
var n = j * 2;
this.indices_array.push( n, n + 1, n + 2 );
this.indices_array.push( n + 2, n + 1, n + 3 );
}
for (var j = 0; j < l; j++) {
// sides
this.side.push(1)
this.side.push(-1)
if (!this.attributes) {
this.attributes = {
position: new THREE.BufferAttribute( new Float32Array( this.positions ), 3 ),
previous: new THREE.BufferAttribute( new Float32Array( this.previous ), 3 ),
next: new THREE.BufferAttribute( new Float32Array( this.next ), 3 ),
side: new THREE.BufferAttribute( new Float32Array( this.side ), 1 ),
width: new THREE.BufferAttribute( new Float32Array( this.width ), 1 ),
uv: new THREE.BufferAttribute( new Float32Array( this.uvs ), 2 ),
index: new THREE.BufferAttribute( new Uint16Array( this.indices_array ), 1 ),
counters: new THREE.BufferAttribute( new Float32Array( this.counters ), 1 )
}
} else {
this.attributes.position.copyArray(new Float32Array(this.positions));
this.attributes.position.needsUpdate = true;
this.attributes.previous.copyArray(new Float32Array(this.previous));
this.attributes.previous.needsUpdate = true;
this.attributes.next.copyArray(new Float32Array(this.next));
this.attributes.next.needsUpdate = true;
this.attributes.side.copyArray(new Float32Array(this.side));
this.attributes.side.needsUpdate = true;
this.attributes.width.copyArray(new Float32Array(this.width));
this.attributes.width.needsUpdate = true;
this.attributes.uv.copyArray(new Float32Array(this.uvs));
this.attributes.uv.needsUpdate = true;
this.attributes.index.copyArray(new Uint16Array(this.indices_array));
this.attributes.index.needsUpdate = true;
}
// widths
if (this.widthCallback) w = this.widthCallback(j / (l - 1))
else w = 1
this.width.push(w)
this.width.push(w)
this.geometry.setAttribute( 'position', this.attributes.position );
this.geometry.setAttribute( 'previous', this.attributes.previous );
this.geometry.setAttribute( 'next', this.attributes.next );
this.geometry.setAttribute( 'side', this.attributes.side );
this.geometry.setAttribute( 'width', this.attributes.width );
this.geometry.setAttribute( 'uv', this.attributes.uv );
this.geometry.setAttribute( 'counters', this.attributes.counters );
// uvs
this.uvs.push(j / (l - 1), 0)
this.uvs.push(j / (l - 1), 1)
this.geometry.setIndex( this.attributes.index );
if (j < l - 1) {
// points previous to poisitions
v = this.copyV3(j)
this.previous.push(v[0], v[1], v[2])
this.previous.push(v[0], v[1], v[2])
}
// indices
var n = j * 2
this.indices_array.push(n, n + 1, n + 2)
this.indices_array.push(n + 2, n + 1, n + 3)
}
if (j > 0) {
// points after poisitions
v = this.copyV3(j)
this.next.push(v[0], v[1], v[2])
this.next.push(v[0], v[1], v[2])
}
}
function memcpy (src, srcOffset, dst, dstOffset, length) {
var i
// last next point
if (this.compareV3(l - 1, 0)) {
v = this.copyV3(1)
} else {
v = this.copyV3(l - 1)
}
this.next.push(v[0], v[1], v[2])
this.next.push(v[0], v[1], v[2])
src = src.subarray || src.slice ? src : src.buffer
dst = dst.subarray || dst.slice ? dst : dst.buffer
// redefining the attribute seems to prevent range errors
// if the user sets a differing number of vertices
if (!this._attributes || this._attributes.position.count !== this.positions.length) {
this._attributes = {
position: new THREE.BufferAttribute(new Float32Array(this.positions), 3),
previous: new THREE.BufferAttribute(new Float32Array(this.previous), 3),
next: new THREE.BufferAttribute(new Float32Array(this.next), 3),
side: new THREE.BufferAttribute(new Float32Array(this.side), 1),
width: new THREE.BufferAttribute(new Float32Array(this.width), 1),
uv: new THREE.BufferAttribute(new Float32Array(this.uvs), 2),
index: new THREE.BufferAttribute(new Uint16Array(this.indices_array), 1),
counters: new THREE.BufferAttribute(new Float32Array(this.counters), 1),
}
} else {
this._attributes.position.copyArray(new Float32Array(this.positions))
this._attributes.position.needsUpdate = true
this._attributes.previous.copyArray(new Float32Array(this.previous))
this._attributes.previous.needsUpdate = true
this._attributes.next.copyArray(new Float32Array(this.next))
this._attributes.next.needsUpdate = true
this._attributes.side.copyArray(new Float32Array(this.side))
this._attributes.side.needsUpdate = true
this._attributes.width.copyArray(new Float32Array(this.width))
this._attributes.width.needsUpdate = true
this._attributes.uv.copyArray(new Float32Array(this.uvs))
this._attributes.uv.needsUpdate = true
this._attributes.index.copyArray(new Uint16Array(this.indices_array))
this._attributes.index.needsUpdate = true
}
src = srcOffset ? src.subarray ?
src.subarray(srcOffset, length && srcOffset + length) :
src.slice(srcOffset, length && srcOffset + length) : src
this.setAttribute('position', this._attributes.position)
this.setAttribute('previous', this._attributes.previous)
this.setAttribute('next', this._attributes.next)
this.setAttribute('side', this._attributes.side)
this.setAttribute('width', this._attributes.width)
this.setAttribute('uv', this._attributes.uv)
this.setAttribute('counters', this._attributes.counters)
if (dst.set) {
dst.set(src, dstOffset)
} else {
for (i=0; i<src.length; i++) {
dst[i + dstOffset] = src[i]
}
}
this.setIndex(this._attributes.index)
return dst
}
this.computeBoundingSphere()
this.computeBoundingBox()
}
/**
* Fast method to advance the line by one position. The oldest position is removed.
* @param position
*/
MeshLine.prototype.advance = function(position) {
function memcpy(src, srcOffset, dst, dstOffset, length) {
var i
var positions = this.attributes.position.array;
var previous = this.attributes.previous.array;
var next = this.attributes.next.array;
var l = positions.length;
src = src.subarray || src.slice ? src : src.buffer
dst = dst.subarray || dst.slice ? dst : dst.buffer
// PREVIOUS
memcpy( positions, 0, previous, 0, l );
src = srcOffset
? src.subarray
? src.subarray(srcOffset, length && srcOffset + length)
: src.slice(srcOffset, length && srcOffset + length)
: src
// POSITIONS
memcpy( positions, 6, positions, 0, l - 6 );
if (dst.set) {
dst.set(src, dstOffset)
} else {
for (i = 0; i < src.length; i++) {
dst[i + dstOffset] = src[i]
}
}
positions[l - 6] = position.x;
positions[l - 5] = position.y;
positions[l - 4] = position.z;
positions[l - 3] = position.x;
positions[l - 2] = position.y;
positions[l - 1] = position.z;
return dst
}
// NEXT
memcpy( positions, 6, next, 0, l - 6 );
/**
* Fast method to advance the line by one position. The oldest position is removed.
* @param position
*/
MeshLine.prototype.advance = function(position) {
var positions = this._attributes.position.array
var previous = this._attributes.previous.array
var next = this._attributes.next.array
var l = positions.length
next[l - 6] = position.x;
next[l - 5] = position.y;
next[l - 4] = position.z;
next[l - 3] = position.x;
next[l - 2] = position.y;
next[l - 1] = position.z;
// PREVIOUS
memcpy(positions, 0, previous, 0, l)
this.attributes.position.needsUpdate = true;
this.attributes.previous.needsUpdate = true;
this.attributes.next.needsUpdate = true;
// POSITIONS
memcpy(positions, 6, positions, 0, l - 6)
};
positions[l - 6] = position.x
positions[l - 5] = position.y
positions[l - 4] = position.z
positions[l - 3] = position.x
positions[l - 2] = position.y
positions[l - 1] = position.z
THREE.ShaderChunk[ 'meshline_vert' ] = [
'',
THREE.ShaderChunk.logdepthbuf_pars_vertex,
THREE.ShaderChunk.fog_pars_vertex,
'',
'attribute vec3 previous;',
'attribute vec3 next;',
'attribute float side;',
'attribute float width;',
'attribute float counters;',
'',
'uniform vec2 resolution;',
'uniform float lineWidth;',
'uniform vec3 color;',
'uniform float opacity;',
'uniform float near;',
'uniform float far;',
'uniform float sizeAttenuation;',
'',
'varying vec2 vUV;',
'varying vec4 vColor;',
'varying float vCounters;',
'',
'vec2 fix( vec4 i, float aspect ) {',
'',
' vec2 res = i.xy / i.w;',
' res.x *= aspect;',
' vCounters = counters;',
' return res;',
'',
'}',
'',
'void main() {',
'',
' float aspect = resolution.x / resolution.y;',
' float pixelWidthRatio = 1. / (resolution.x * projectionMatrix[0][0]);',
'',
' vColor = vec4( color, opacity );',
' vUV = uv;',
'',
' mat4 m = projectionMatrix * modelViewMatrix;',
' vec4 finalPosition = m * vec4( position, 1.0 );',
' vec4 prevPos = m * vec4( previous, 1.0 );',
' vec4 nextPos = m * vec4( next, 1.0 );',
'',
' vec2 currentP = fix( finalPosition, aspect );',
' vec2 prevP = fix( prevPos, aspect );',
' vec2 nextP = fix( nextPos, aspect );',
'',
' float pixelWidth = finalPosition.w * pixelWidthRatio;',
' float w = 1.8 * pixelWidth * lineWidth * width;',
'',
' if( sizeAttenuation == 1. ) {',
' w = 1.8 * lineWidth * width;',
' }',
'',
' vec2 dir;',
' if( nextP == currentP ) dir = normalize( currentP - prevP );',
' else if( prevP == currentP ) dir = normalize( nextP - currentP );',
' else {',
' vec2 dir1 = normalize( currentP - prevP );',
' vec2 dir2 = normalize( nextP - currentP );',
' dir = normalize( dir1 + dir2 );',
'',
' vec2 perp = vec2( -dir1.y, dir1.x );',
' vec2 miter = vec2( -dir.y, dir.x );',
' //w = clamp( w / dot( miter, perp ), 0., 4. * lineWidth * width );',
'',
' }',
'',
' //vec2 normal = ( cross( vec3( dir, 0. ), vec3( 0., 0., 1. ) ) ).xy;',
' vec2 normal = vec2( -dir.y, dir.x );',
' normal.x /= aspect;',
' normal *= .5 * w;',
'',
' vec4 offset = vec4( normal * side, 0.0, 1.0 );',
' finalPosition.xy += offset.xy;',
'',
' gl_Position = finalPosition;',
'',
THREE.ShaderChunk.logdepthbuf_vertex,
THREE.ShaderChunk.fog_vertex && ' vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );',
THREE.ShaderChunk.fog_vertex,
'}'
].join( '\r\n' );
// NEXT
memcpy(positions, 6, next, 0, l - 6)
THREE.ShaderChunk[ 'meshline_frag' ] = [
'',
THREE.ShaderChunk.fog_pars_fragment,
THREE.ShaderChunk.logdepthbuf_pars_fragment,
'',
'uniform sampler2D map;',
'uniform sampler2D alphaMap;',
'uniform float useMap;',
'uniform float useAlphaMap;',
'uniform float useDash;',
'uniform float dashArray;',
'uniform float dashOffset;',
'uniform float dashRatio;',
'uniform float visibility;',
'uniform float alphaTest;',
'uniform vec2 repeat;',
'',
'varying vec2 vUV;',
'varying vec4 vColor;',
'varying float vCounters;',
'',
'void main() {',
'',
THREE.ShaderChunk.logdepthbuf_fragment,
'',
' vec4 c = vColor;',
' if( useMap == 1. ) c *= texture2D( map, vUV * repeat );',
' if( useAlphaMap == 1. ) c.a *= texture2D( alphaMap, vUV * repeat ).a;',
' if( c.a < alphaTest ) discard;',
' if( useDash == 1. ){',
' c.a *= ceil(mod(vCounters + dashOffset, dashArray) - (dashArray * dashRatio));',
' }',
' gl_FragColor = c;',
' gl_FragColor.a *= step(vCounters, visibility);',
'',
THREE.ShaderChunk.fog_fragment,
'}'
].join( '\r\n' );
next[l - 6] = position.x
next[l - 5] = position.y
next[l - 4] = position.z
next[l - 3] = position.x
next[l - 2] = position.y
next[l - 1] = position.z
function MeshLineMaterial( parameters ) {
this._attributes.position.needsUpdate = true
this._attributes.previous.needsUpdate = true
this._attributes.next.needsUpdate = true
}
THREE.ShaderMaterial.call( this, {
uniforms: Object.assign({},
THREE.UniformsLib.fog,
{
lineWidth: { value: 1 },
map: { value: null },
useMap: { value: 0 },
alphaMap: { value: null },
useAlphaMap: { value: 0 },
color: { value: new THREE.Color( 0xffffff ) },
opacity: { value: 1 },
resolution: { value: new THREE.Vector2( 1, 1 ) },
sizeAttenuation: { value: 1 },
near: { value: 1 },
far: { value: 1 },
dashArray: { value: 0 },
dashOffset: { value: 0 },
dashRatio: { value: 0.5 },
useDash: { value: 0 },
visibility: {value: 1 },
alphaTest: {value: 0 },
repeat: { value: new THREE.Vector2( 1, 1 ) },
}
),
THREE.ShaderChunk['meshline_vert'] = [
'',
THREE.ShaderChunk.logdepthbuf_pars_vertex,
THREE.ShaderChunk.fog_pars_vertex,
'',
'attribute vec3 previous;',
'attribute vec3 next;',
'attribute float side;',
'attribute float width;',
'attribute float counters;',
'',
'uniform vec2 resolution;',
'uniform float lineWidth;',
'uniform vec3 color;',
'uniform float opacity;',
'uniform float sizeAttenuation;',
'',
'varying vec2 vUV;',
'varying vec4 vColor;',
'varying float vCounters;',
'',
'vec2 fix( vec4 i, float aspect ) {',
'',
' vec2 res = i.xy / i.w;',
' res.x *= aspect;',
' vCounters = counters;',
' return res;',
'',
'}',
'',
'void main() {',
'',
' float aspect = resolution.x / resolution.y;',
'',
' vColor = vec4( color, opacity );',
' vUV = uv;',
'',
' mat4 m = projectionMatrix * modelViewMatrix;',
' vec4 finalPosition = m * vec4( position, 1.0 );',
' vec4 prevPos = m * vec4( previous, 1.0 );',
' vec4 nextPos = m * vec4( next, 1.0 );',
'',
' vec2 currentP = fix( finalPosition, aspect );',
' vec2 prevP = fix( prevPos, aspect );',
' vec2 nextP = fix( nextPos, aspect );',
'',
' float w = lineWidth * width;',
'',
' vec2 dir;',
' if( nextP == currentP ) dir = normalize( currentP - prevP );',
' else if( prevP == currentP ) dir = normalize( nextP - currentP );',
' else {',
' vec2 dir1 = normalize( currentP - prevP );',
' vec2 dir2 = normalize( nextP - currentP );',
' dir = normalize( dir1 + dir2 );',
'',
' vec2 perp = vec2( -dir1.y, dir1.x );',
' vec2 miter = vec2( -dir.y, dir.x );',
' //w = clamp( w / dot( miter, perp ), 0., 4. * lineWidth * width );',
'',
' }',
'',
' //vec2 normal = ( cross( vec3( dir, 0. ), vec3( 0., 0., 1. ) ) ).xy;',
' vec4 normal = vec4( -dir.y, dir.x, 0., 1. );',
' normal.xy *= .5 * w;',
' normal *= projectionMatrix;',
' if( sizeAttenuation == 0. ) {',
' normal.xy *= finalPosition.w;',
' normal.xy /= ( vec4( resolution, 0., 1. ) * projectionMatrix ).xy;',
' }',
'',
' finalPosition.xy += normal.xy * side;',
'',
' gl_Position = finalPosition;',
'',
THREE.ShaderChunk.logdepthbuf_vertex,
THREE.ShaderChunk.fog_vertex && ' vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );',
THREE.ShaderChunk.fog_vertex,
'}',
].join('\n')
vertexShader: THREE.ShaderChunk.meshline_vert,
THREE.ShaderChunk['meshline_frag'] = [
'',
THREE.ShaderChunk.fog_pars_fragment,
THREE.ShaderChunk.logdepthbuf_pars_fragment,
'',
'uniform sampler2D map;',
'uniform sampler2D alphaMap;',
'uniform float useMap;',
'uniform float useAlphaMap;',
'uniform float useDash;',
'uniform float dashArray;',
'uniform float dashOffset;',
'uniform float dashRatio;',
'uniform float visibility;',
'uniform float alphaTest;',
'uniform vec2 repeat;',
'',
'varying vec2 vUV;',
'varying vec4 vColor;',
'varying float vCounters;',
'',
'void main() {',
'',
THREE.ShaderChunk.logdepthbuf_fragment,
'',
' vec4 c = vColor;',
' if( useMap == 1. ) c *= texture2D( map, vUV * repeat );',
' if( useAlphaMap == 1. ) c.a *= texture2D( alphaMap, vUV * repeat ).a;',
' if( c.a < alphaTest ) discard;',
' if( useDash == 1. ){',
' c.a *= ceil(mod(vCounters + dashOffset, dashArray) - (dashArray * dashRatio));',
' }',
' gl_FragColor = c;',
' gl_FragColor.a *= step(vCounters, visibility);',
'',
THREE.ShaderChunk.fog_fragment,
'}',
].join('\n')
fragmentShader: THREE.ShaderChunk.meshline_frag,
function MeshLineMaterial(parameters) {
THREE.ShaderMaterial.call(this, {
uniforms: Object.assign({}, THREE.UniformsLib.fog, {
lineWidth: { value: 1 },
map: { value: null },
useMap: { value: 0 },
alphaMap: { value: null },
useAlphaMap: { value: 0 },
color: { value: new THREE.Color(0xffffff) },
opacity: { value: 1 },
resolution: { value: new THREE.Vector2(1, 1) },
sizeAttenuation: { value: 1 },
dashArray: { value: 0 },
dashOffset: { value: 0 },
dashRatio: { value: 0.5 },
useDash: { value: 0 },
visibility: { value: 1 },
alphaTest: { value: 0 },
repeat: { value: new THREE.Vector2(1, 1) },
}),
} );
vertexShader: THREE.ShaderChunk.meshline_vert,
this.type = 'MeshLineMaterial';
fragmentShader: THREE.ShaderChunk.meshline_frag,
})
Object.defineProperties( this, {
lineWidth: {
enumerable: true,
get: function () {
return this.uniforms.lineWidth.value;
},
set: function ( value ) {
this.uniforms.lineWidth.value = value;
}
},
map: {
enumerable: true,
get: function () {
return this.uniforms.map.value;
},
set: function ( value ) {
this.uniforms.map.value = value;
}
},
useMap: {
enumerable: true,
get: function () {
return this.uniforms.useMap.value;
},
set: function ( value ) {
this.uniforms.useMap.value = value;
}
},
alphaMap: {
enumerable: true,
get: function () {
return this.uniforms.alphaMap.value;
},
set: function ( value ) {
this.uniforms.alphaMap.value = value;
}
},
useAlphaMap: {
enumerable: true,
get: function () {
return this.uniforms.useAlphaMap.value;
},
set: function ( value ) {
this.uniforms.useAlphaMap.value = value;
}
},
color: {
enumerable: true,
get: function () {
return this.uniforms.color.value;
},
set: function ( value ) {
this.uniforms.color.value = value;
}
},
opacity: {
enumerable: true,
get: function () {
return this.uniforms.opacity.value;
},
set: function ( value ) {
this.uniforms.opacity.value = value;
}
},
resolution: {
enumerable: true,
get: function () {
return this.uniforms.resolution.value;
},
set: function ( value ) {
this.uniforms.resolution.value.copy( value );
}
},
sizeAttenuation: {
enumerable: true,
get: function () {
return this.uniforms.sizeAttenuation.value;
},
set: function ( value ) {
this.uniforms.sizeAttenuation.value = value;
}
},
near: {
enumerable: true,
get: function () {
return this.uniforms.near.value;
},
set: function ( value ) {
this.uniforms.near.value = value;
}
},
far: {
enumerable: true,
get: function () {
return this.uniforms.far.value;
},
set: function ( value ) {
this.uniforms.far.value = value;
}
},
dashArray: {
enumerable: true,
get: function () {
return this.uniforms.dashArray.value;
},
set: function ( value ) {
this.uniforms.dashArray.value = value;
this.useDash = ( value !== 0 ) ? 1 : 0
}
},
dashOffset: {
enumerable: true,
get: function () {
return this.uniforms.dashOffset.value;
},
set: function ( value ) {
this.uniforms.dashOffset.value = value;
}
},
dashRatio: {
enumerable: true,
get: function () {
return this.uniforms.dashRatio.value;
},
set: function ( value ) {
this.uniforms.dashRatio.value = value;
}
},
useDash: {
enumerable: true,
get: function () {
return this.uniforms.useDash.value;
},
set: function ( value ) {
this.uniforms.useDash.value = value;
}
},
visibility: {
enumerable: true,
get: function () {
return this.uniforms.visibility.value;
},
set: function ( value ) {
this.uniforms.visibility.value = value;
}
},
alphaTest: {
enumerable: true,
get: function () {
return this.uniforms.alphaTest.value;
},
set: function ( value ) {
this.uniforms.alphaTest.value = value;
}
},
repeat: {
enumerable: true,
get: function () {
return this.uniforms.repeat.value;
},
set: function ( value ) {
this.uniforms.repeat.value.copy( value );
}
},
});
this.type = 'MeshLineMaterial'
this.setValues( parameters );
}
Object.defineProperties(this, {
lineWidth: {
enumerable: true,
get: function() {
return this.uniforms.lineWidth.value
},
set: function(value) {
this.uniforms.lineWidth.value = value
},
},
map: {
enumerable: true,
get: function() {
return this.uniforms.map.value
},
set: function(value) {
this.uniforms.map.value = value
},
},
useMap: {
enumerable: true,
get: function() {
return this.uniforms.useMap.value
},
set: function(value) {
this.uniforms.useMap.value = value
},
},
alphaMap: {
enumerable: true,
get: function() {
return this.uniforms.alphaMap.value
},
set: function(value) {
this.uniforms.alphaMap.value = value
},
},
useAlphaMap: {
enumerable: true,
get: function() {
return this.uniforms.useAlphaMap.value
},
set: function(value) {
this.uniforms.useAlphaMap.value = value
},
},
color: {
enumerable: true,
get: function() {
return this.uniforms.color.value
},
set: function(value) {
this.uniforms.color.value = value
},
},
opacity: {
enumerable: true,
get: function() {
return this.uniforms.opacity.value
},
set: function(value) {
this.uniforms.opacity.value = value
},
},
resolution: {
enumerable: true,
get: function() {
return this.uniforms.resolution.value
},
set: function(value) {
this.uniforms.resolution.value.copy(value)
},
},
sizeAttenuation: {
enumerable: true,
get: function() {
return this.uniforms.sizeAttenuation.value
},
set: function(value) {
this.uniforms.sizeAttenuation.value = value
},
},
dashArray: {
enumerable: true,
get: function() {
return this.uniforms.dashArray.value
},
set: function(value) {
this.uniforms.dashArray.value = value
this.useDash = value !== 0 ? 1 : 0
},
},
dashOffset: {
enumerable: true,
get: function() {
return this.uniforms.dashOffset.value
},
set: function(value) {
this.uniforms.dashOffset.value = value
},
},
dashRatio: {
enumerable: true,
get: function() {
return this.uniforms.dashRatio.value
},
set: function(value) {
this.uniforms.dashRatio.value = value
},
},
useDash: {
enumerable: true,
get: function() {
return this.uniforms.useDash.value
},
set: function(value) {
this.uniforms.useDash.value = value
},
},
visibility: {
enumerable: true,
get: function() {
return this.uniforms.visibility.value
},
set: function(value) {
this.uniforms.visibility.value = value
},
},
alphaTest: {
enumerable: true,
get: function() {
return this.uniforms.alphaTest.value
},
set: function(value) {
this.uniforms.alphaTest.value = value
},
},
repeat: {
enumerable: true,
get: function() {
return this.uniforms.repeat.value
},
set: function(value) {
this.uniforms.repeat.value.copy(value)
},
},
})
MeshLineMaterial.prototype = Object.create( THREE.ShaderMaterial.prototype );
MeshLineMaterial.prototype.constructor = MeshLineMaterial;
MeshLineMaterial.prototype.isMeshLineMaterial = true;
this.setValues(parameters)
}
MeshLineMaterial.prototype.copy = function ( source ) {
MeshLineMaterial.prototype = Object.create(THREE.ShaderMaterial.prototype)
MeshLineMaterial.prototype.constructor = MeshLineMaterial
MeshLineMaterial.prototype.isMeshLineMaterial = true
THREE.ShaderMaterial.prototype.copy.call( this, source );
MeshLineMaterial.prototype.copy = function(source) {
THREE.ShaderMaterial.prototype.copy.call(this, source)
this.lineWidth = source.lineWidth;
this.map = source.map;
this.useMap = source.useMap;
this.alphaMap = source.alphaMap;
this.useAlphaMap = source.useAlphaMap;
this.color.copy( source.color );
this.opacity = source.opacity;
this.resolution.copy( source.resolution );
this.sizeAttenuation = source.sizeAttenuation;
this.near = source.near;
this.far = source.far;
this.dashArray.copy( source.dashArray );
this.dashOffset.copy( source.dashOffset );
this.dashRatio.copy( source.dashRatio );
this.useDash = source.useDash;
this.visibility = source.visibility;
this.alphaTest = source.alphaTest;
this.repeat.copy( source.repeat );
this.lineWidth = source.lineWidth
this.map = source.map
this.useMap = source.useMap
this.alphaMap = source.alphaMap
this.useAlphaMap = source.useAlphaMap
this.color.copy(source.color)
this.opacity = source.opacity
this.resolution.copy(source.resolution)
this.sizeAttenuation = source.sizeAttenuation
this.dashArray.copy(source.dashArray)
this.dashOffset.copy(source.dashOffset)
this.dashRatio.copy(source.dashRatio)
this.useDash = source.useDash
this.visibility = source.visibility
this.alphaTest = source.alphaTest
this.repeat.copy(source.repeat)
return this;
return this
}
};
if( typeof exports !== 'undefined' ) {
if( typeof module !== 'undefined' && module.exports ) {
exports = module.exports = { MeshLine: MeshLine, MeshLineMaterial: MeshLineMaterial };
}
exports.MeshLine = MeshLine;
exports.MeshLineMaterial = MeshLineMaterial;
}
else {
root.MeshLine = MeshLine;
root.MeshLineMaterial = MeshLineMaterial;
}
}).call(this);
if (typeof exports !== 'undefined') {
if (typeof module !== 'undefined' && module.exports) {
exports = module.exports = {
MeshLine: MeshLine,
MeshLineMaterial: MeshLineMaterial,
MeshLineRaycast: MeshLineRaycast,
}
}
exports.MeshLine = MeshLine
exports.MeshLineMaterial = MeshLineMaterial
exports.MeshLineRaycast = MeshLineRaycast
} else {
root.MeshLine = MeshLine
root.MeshLineMaterial = MeshLineMaterial
root.MeshLineRaycast = MeshLineRaycast
}
}.call(this))
SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc