Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Geometry: Move computeLineDistance() to Line/LineSegments #13147

Merged
merged 9 commits into from Feb 9, 2018
Merged

Geometry: Move computeLineDistance() to Line/LineSegments #13147

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
4b82ecc
Geometry: Move computeLineDistance() to Line
Mugen87 Jan 21, 2018
c0e5d25
Exampels: Fix copy/paste error
Mugen87 Jan 21, 2018
e463b8c
Examples: Improved webgl_lines_dashed.html
Mugen87 Jan 21, 2018
0286198
Line: Handle indexed geometry more gracefully
Mugen87 Jan 21, 2018
2fbec23
LineSegments: Added .computeLineDistances()
Mugen87 Jan 21, 2018
0ec8b93
LineSegments: Fix log message
Mugen87 Jan 21, 2018
e1391a9
Line/LineSegments: Refactoring
Mugen87 Jan 21, 2018
ccfee63
Docs: Improve description for Line.computeLineDistances()
Mugen87 Jan 21, 2018
aeb4865
Tests: Clean up
Mugen87 Jan 22, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
6 changes: 1 addition & 5 deletions docs/api/core/Geometry.html
View file
Open in desktop
Expand Up @@ -107,8 +107,7 @@ <h3>[property:Boolean isGeometry]</h3>
<h3>[property:array lineDistances]</h3>
<div>
An array containing distances between vertices for Line geometries.
This is required for [page:LineSegments] / [page:LineDashedMaterial] to render correctly.
Line distances can be generated automatically with [page:.computeLineDistances].
This is required for [page:LineDashedMaterial] to render correctly.
</div>

<h3>[property:Array morphTargets]</h3>
Expand Down Expand Up @@ -242,9 +241,6 @@ <h3>[method:null computeFaceNormals]()</h3>
<h3>[method:null computeFlatVertexNormals]()</h3>
<div>Computes flat [page:Face3.vertexNormals vertex normals]. Sets the vertex normal of each vertex of each face to be the same as the face's normal.</div>

<h3>[method:null computeLineDistances]()</h3>
<div>Compute [page:.lineDistances].</div>

<h3>[method:null computeMorphNormals]()</h3>
<div>Computes [page:.morphNormals].</div>

Expand Down
6 changes: 6 additions & 0 deletions docs/api/deprecated/DeprecatedList.html
View file
Open in desktop
Expand Up @@ -153,6 +153,12 @@ <h3>[page:SplineCurve3]</h3>

<h2>Geometry</h2>

<div>
Geometry.computeTangents() has been removed.<br /><br />

Geometry.computeLineDistances() has been removed. Use [page:Line.computeLineDistances] instead.<br /><br />
</div>

<h3>[page:BufferGeometry]</h3>
<div>
BufferGeometry.addIndex has been renamed to [page:BufferGeometry.setIndex].<br /><br />
Expand Down
5 changes: 5 additions & 0 deletions docs/api/objects/Line.html
View file
Open in desktop
Expand Up @@ -74,6 +74,11 @@ <h3>[property:Material material]</h3>
<h2>Methods</h2>
<div>See the base [page:Object3D] class for common methods.</div>

<h3>[method:Line computeLineDistances]()</h3>
<div>
Computes an array of distance values which are necessary for [page:LineDashedMaterial]. The method calculates for each point in the geometry the distance to the very beginning of the line.
</div>

<h3>[method:Array raycast]( [page:Raycaster raycaster], [page:Array intersects] )</h3>
<div>
Get intersections between a casted [page:Ray] and this Line.
Expand Down
19 changes: 3 additions & 16 deletions examples/canvas_lines_dashed.html
View file
Open in desktop
Expand Up @@ -49,8 +49,7 @@
var objects = [];


var WIDTH = window.innerWidth,
HEIGHT = window.innerHeight;
var WIDTH = window.innerWidth, HEIGHT = window.innerHeight;

init();
animate();
Expand All @@ -63,28 +62,17 @@
scene = new THREE.Scene();
scene.background = new THREE.Color( 0x111111 );

root = new THREE.Object3D();

var subdivisions = 6;
var recursion = 1;

var points = hilbert3D( new THREE.Vector3( 0,0,0 ), 25.0, recursion, 0, 1, 2, 3, 4, 5, 6, 7 );

var spline = new THREE.CatmullRomCurve3( points );
var geometrySpline = new THREE.Geometry();

for ( var i = 0; i < points.length * subdivisions; i ++ ) {

var t = i / ( points.length * subdivisions );
geometrySpline.vertices[ i ] = spline.getPoint( t );

}
var samples = spline.getPoints( points.length * subdivisions );
var geometrySpline = new THREE.Geometry().setFromPoints( samples );

var geometryCube = cube( 50 );

geometryCube.computeLineDistances();
Copy link
Collaborator Author

@Mugen87 Mugen87 Jan 21, 2018 •
edited

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

BTW: With CanvasRenderer it is not necessary to compute the line distances for dashed lines...

geometrySpline.computeLineDistances();

var object = new THREE.Line( geometrySpline, new THREE.LineDashedMaterial( { color: 0xffffff, dashSize: 1, gapSize: 0.5 } ) );

objects.push( object );
Expand Down Expand Up @@ -186,7 +174,6 @@

var object = objects[ i ];

//object.rotation.x = 0.25 * time * ( i%2 == 1 ? 1 : -1);
object.rotation.x = 0.25 * time;
object.rotation.y = 0.25 * time;

Expand Down
103 changes: 48 additions & 55 deletions examples/webgl_lines_dashed.html
View file
Open in desktop
Expand Up @@ -45,9 +45,7 @@
var renderer, scene, camera, stats;
var objects = [];


var WIDTH = window.innerWidth,
HEIGHT = window.innerHeight;
var WIDTH = window.innerWidth, HEIGHT = window.innerHeight;

init();
animate();
Expand All @@ -61,37 +59,28 @@
scene.background = new THREE.Color( 0x111111 );
scene.fog = new THREE.Fog( 0x111111, 150, 200 );

root = new THREE.Object3D();

var subdivisions = 6;
var recursion = 1;

var points = hilbert3D( new THREE.Vector3( 0,0,0 ), 25.0, recursion, 0, 1, 2, 3, 4, 5, 6, 7 );

var points = hilbert3D( new THREE.Vector3( 0, 0, 0 ), 25.0, recursion, 0, 1, 2, 3, 4, 5, 6, 7 );
var spline = new THREE.CatmullRomCurve3( points );
var geometrySpline = new THREE.Geometry();

for ( var i = 0; i < points.length * subdivisions; i ++ ) {
var samples = spline.getPoints( points.length * subdivisions );
var geometrySpline = new THREE.Geometry().setFromPoints( samples );

var t = i / ( points.length * subdivisions );
geometrySpline.vertices[ i ] = spline.getPoint( t );
var line = new THREE.Line( geometrySpline, new THREE.LineDashedMaterial( { color: 0xffffff, dashSize: 1, gapSize: 0.5 } ) );
line.computeLineDistances();

}
objects.push( line );
scene.add( line );

var geometryCube = cube( 50 );

geometryCube.computeLineDistances();
geometrySpline.computeLineDistances();

var object = new THREE.Line( geometrySpline, new THREE.LineDashedMaterial( { color: 0xffffff, dashSize: 1, gapSize: 0.5 } ) );

objects.push( object );
scene.add( object );
var lineSegments = new THREE.LineSegments( geometryCube, new THREE.LineDashedMaterial( { color: 0xffaa00, dashSize: 3, gapSize: 1, linewidth: 2 } ) );
lineSegments.computeLineDistances();

var object = new THREE.LineSegments( geometryCube, new THREE.LineDashedMaterial( { color: 0xffaa00, dashSize: 3, gapSize: 1, linewidth: 2 } ) );

objects.push( object );
scene.add( object );
objects.push( lineSegments );
scene.add( lineSegments );

renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setPixelRatio( window.devicePixelRatio );
Expand All @@ -113,47 +102,49 @@

var h = size * 0.5;

var geometry = new THREE.Geometry();

geometry.vertices.push(
new THREE.Vector3( -h, -h, -h ),
new THREE.Vector3( -h, h, -h ),
var geometry = new THREE.BufferGeometry();
var position = [];

new THREE.Vector3( -h, h, -h ),
new THREE.Vector3( h, h, -h ),
position.push(
-h, -h, -h,
-h, h, -h,

new THREE.Vector3( h, h, -h ),
new THREE.Vector3( h, -h, -h ),
-h, h, -h,
h, h, -h,

new THREE.Vector3( h, -h, -h ),
new THREE.Vector3( -h, -h, -h ),
h, h, -h,
h, -h, -h,

h, -h, -h,
-h, -h, -h,

new THREE.Vector3( -h, -h, h ),
new THREE.Vector3( -h, h, h ),
-h, -h, h,
-h, h, h,

new THREE.Vector3( -h, h, h ),
new THREE.Vector3( h, h, h ),
-h, h, h,
h, h, h,

new THREE.Vector3( h, h, h ),
new THREE.Vector3( h, -h, h ),
h, h, h,
h, -h, h,

new THREE.Vector3( h, -h, h ),
new THREE.Vector3( -h, -h, h ),
h, -h, h,
-h, -h, h,

new THREE.Vector3( -h, -h, -h ),
new THREE.Vector3( -h, -h, h ),
-h, -h, -h,
-h, -h, h,

new THREE.Vector3( -h, h, -h ),
new THREE.Vector3( -h, h, h ),
-h, h, -h,
-h, h, h,

new THREE.Vector3( h, h, -h ),
new THREE.Vector3( h, h, h ),
h, h, -h,
h, h, h,

new THREE.Vector3( h, -h, -h ),
new THREE.Vector3( h, -h, h )
h, -h, -h,
h, -h, h
);

geometry.addAttribute( 'position', new THREE.Float32BufferAttribute( position, 3 ) );

return geometry;

}
Expand All @@ -180,14 +171,16 @@

var time = Date.now() * 0.001;

for ( var i = 0; i < objects.length; i ++ ) {
scene.traverse( function( object ) {

if ( object.isLine ) {

var object = objects[ i ];
object.rotation.x = 0.25 * time;
object.rotation.y = 0.25 * time;

object.rotation.x = 0.25 * time;
object.rotation.y = 0.25 * time;
}

}
} );

renderer.render( scene, camera );

Expand Down
15 changes: 12 additions & 3 deletions src/Three.Legacy.js
View file
Open in desktop
Expand Up @@ -832,11 +832,20 @@ Object.assign( Vector4.prototype, {

//

Geometry.prototype.computeTangents = function () {
Object.assign( Geometry.prototype, {

console.warn( 'THREE.Geometry: .computeTangents() has been removed.' );
computeTangents: function () {

};
console.error( 'THREE.Geometry: .computeTangents() has been removed.' );

},
computeLineDistances: function () {

console.error( 'THREE.Geometry: .computeLineDistances() has been removed. Use THREE.Line.computeLineDistances() instead.' );

}

} );

Object.assign( Object3D.prototype, {

Expand Down
19 changes: 0 additions & 19 deletions src/core/Geometry.js
View file
Open in desktop
Expand Up @@ -656,25 +656,6 @@ Geometry.prototype = Object.assign( Object.create( EventDispatcher.prototype ),

},

computeLineDistances: function () {

var d = 0;
var vertices = this.vertices;

for ( var i = 0, il = vertices.length; i < il; i ++ ) {

if ( i > 0 ) {

d += vertices[ i ].distanceTo( vertices[ i - 1 ] );

}

this.lineDistances[ i ] = d;

}

},

computeBoundingBox: function () {

if ( this.boundingBox === null ) {
Expand Down
61 changes: 61 additions & 0 deletions src/objects/Line.js
View file
Open in desktop
Expand Up @@ -35,6 +35,67 @@ Line.prototype = Object.assign( Object.create( Object3D.prototype ), {

isLine: true,

computeLineDistances: ( function () {

var start = new Vector3();
var end = new Vector3();

return function computeLineDistances() {

var distance = 0;
var geometry = this.geometry;

if ( geometry.isBufferGeometry ) {

// we assume non-indexed geometry
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Don't you think you should handle indexed geometry gracefully?

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You're right. It should be better with 0286198


var positionAttribute = geometry.attributes.position;
var lineDistances = [];

for ( var i = 0, l = positionAttribute.count; i < l; i ++ ) {

if ( i > 0 ) {

start.fromBufferAttribute( positionAttribute, i - 1 );
end.fromBufferAttribute( positionAttribute, i );

distance += start.distanceTo( end );

}

lineDistances.push( distance );
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I wish we did not always create these JS arrays unnecessarily. It is a pattern we use over-and-over...


}

geometry.addAttribute( 'lineDistance', new THREE.Float32BufferAttribute( lineDistances, 1 ) );

} else if ( geometry.isGeometry ) {

var vertices = geometry.vertices;

for ( var i = 0, l = vertices.length; i < l; i ++ ) {

if ( i > 0 ) {

start.copy( vertices[ i - 1 ] );
end.copy( vertices[ i ] );

distance += start.distanceTo( end );

}

geometry.lineDistances[ i ] = distance;

}
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more. 

geometry.lineDistances[ 0 ] = 0;

for ( var i = 1, l = vertices.length; i < l; i ++ ) {

	geometry.lineDistances[ i ] += vertices[ i - 1 ].distanceTo( vertices[ i ] );
 
}

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

That did not work for me since geometry.lineDistances[ i ] needs to be initialized with the previous value. Otherwise the summation does not work.

geometry.lineDistances[ 0 ] = 0;

for ( var i = 1, l = vertices.length; i < l; i ++ ) {

        geometry.lineDistances[ i ] = geometry.lineDistances[ i - 1 ];
	geometry.lineDistances[ i ] += vertices[ i - 1 ].distanceTo( vertices[ i ] );
 
}


}

return this;

};

}() ),

raycast: ( function () {

var inverseMatrix = new Matrix4();
Expand Down