瀏覽代碼

Line: Added support for morph targets.

Mugen87 5 年之前
父節點
當前提交
c306e10e76

+ 2 - 0
docs/api/en/materials/LineBasicMaterial.html

@@ -88,6 +88,8 @@
 			property and it is ignored by the [page:WebGLRenderer WebGL] renderer.
 			property and it is ignored by the [page:WebGLRenderer WebGL] renderer.
 		</p>
 		</p>
 
 
+		<h3>[property:Boolean morphTargets]</h3>
+		<p>Define whether the material uses morphTargets. Default is false.</p>
 
 
 		<h2>Methods</h2>
 		<h2>Methods</h2>
 		<p>See the base [page:Material] class for common methods.</p>
 		<p>See the base [page:Material] class for common methods.</p>

+ 16 - 0
docs/api/en/objects/Line.html

@@ -60,6 +60,17 @@
 		<h3>[property:Material material]</h3>
 		<h3>[property:Material material]</h3>
 		<p>Material for the line.</p>
 		<p>Material for the line.</p>
 
 
+		<h3>[property:Array morphTargetInfluences]</h3>
+		<p>
+		An array of weights typically from 0-1 that specify how much of the morph is applied.
+		Undefined by default, but reset to a blank array by [page:.updateMorphTargets]().
+		</p>
+
+		<h3>[property:Object morphTargetDictionary]</h3>
+		<p>
+		A dictionary of morphTargets based on the morphTarget.name property.
+		Undefined by default, but rebuilt [page:.updateMorphTargets]().
+		</p>
 
 
 		<h2>Methods</h2>
 		<h2>Methods</h2>
 		<p>See the base [page:Object3D] class for common methods.</p>
 		<p>See the base [page:Object3D] class for common methods.</p>
@@ -80,6 +91,11 @@
 		Returns a clone of this Line object and its descendants.
 		Returns a clone of this Line object and its descendants.
 		</p>
 		</p>
 
 
+		<h3>[method:null updateMorphTargets]()</h3>
+		<p>
+		Updates the morphTargets to have no influence on the object. Resets the
+		[page:.morphTargetInfluences] and [page:.morphTargetDictionary] properties.
+		</p>
 
 
 		<h2>Source</h2>
 		<h2>Source</h2>
 
 

+ 2 - 0
docs/api/zh/materials/LineBasicMaterial.html

@@ -77,6 +77,8 @@
 			并且会被[page:WebGLRenderer WebGL]渲染器忽略。
 			并且会被[page:WebGLRenderer WebGL]渲染器忽略。
 		</p>
 		</p>
 
 
+		<h3>[property:Boolean morphTargets]</h3>
+		<p>Define whether the material uses morphTargets. Default is false.</p>
 
 
 		<h2>方法(Methods)</h2>
 		<h2>方法(Methods)</h2>
 		<p>共有方法请参见其基类[page:Material]。</p>
 		<p>共有方法请参见其基类[page:Material]。</p>

+ 16 - 0
docs/api/zh/objects/Line.html

@@ -57,6 +57,17 @@
 		<h3>[property:Material material]</h3>
 		<h3>[property:Material material]</h3>
 		<p>线的材质。</p>
 		<p>线的材质。</p>
 
 
+		<h3>[property:Array morphTargetInfluences]</h3>
+		<p>
+		An array of weights typically from 0-1 that specify how much of the morph is applied.
+		Undefined by default, but reset to a blank array by [page:.updateMorphTargets]().
+		</p>
+
+		<h3>[property:Object morphTargetDictionary]</h3>
+		<p>
+		A dictionary of morphTargets based on the morphTarget.name property.
+		Undefined by default, but rebuilt [page:.updateMorphTargets]().
+		</p>
 
 
 		<h2>方法</h2>
 		<h2>方法</h2>
 		<p>共有方法请参见其基类 [page:Object3D]。</p>
 		<p>共有方法请参见其基类 [page:Object3D]。</p>
@@ -78,6 +89,11 @@
 			返回这条线及其子集的一个克隆对象。
 			返回这条线及其子集的一个克隆对象。
 		</p>
 		</p>
 
 
+		<h3>[method:null updateMorphTargets]()</h3>
+		<p>
+		Updates the morphTargets to have no influence on the object. Resets the
+		[page:.morphTargetInfluences] and [page:.morphTargetDictionary] properties.
+		</p>
 
 
 		<h2>源代码</h2>
 		<h2>源代码</h2>
 
 

+ 51 - 6
examples/webgl_buffergeometry_lines.html

@@ -21,12 +21,22 @@
 			import * as THREE from '../build/three.module.js';
 			import * as THREE from '../build/three.module.js';
 
 
 			import Stats from './jsm/libs/stats.module.js';
 			import Stats from './jsm/libs/stats.module.js';
-			var container, stats;
+			import { GUI } from './jsm/libs/dat.gui.module.js';
+
+			var container, stats, clock;
 
 
 			var camera, scene, renderer;
 			var camera, scene, renderer;
 
 
 			var line;
 			var line;
 
 
+			var segments = 10000;
+			var r = 800;
+			var t = 0;
+
+			var params = {
+				morphTargets: false
+			};
+
 			init();
 			init();
 			animate();
 			animate();
 
 
@@ -41,16 +51,14 @@
 
 
 				scene = new THREE.Scene();
 				scene = new THREE.Scene();
 
 
-				var segments = 10000;
+				clock = new THREE.Clock();
 
 
 				var geometry = new THREE.BufferGeometry();
 				var geometry = new THREE.BufferGeometry();
-				var material = new THREE.LineBasicMaterial( { vertexColors: true } );
+				var material = new THREE.LineBasicMaterial( { vertexColors: true, morphTargets: true } );
 
 
 				var positions = [];
 				var positions = [];
 				var colors = [];
 				var colors = [];
 
 
-				var r = 800;
-
 				for ( var i = 0; i < segments; i ++ ) {
 				for ( var i = 0; i < segments; i ++ ) {
 
 
 					var x = Math.random() * r - r / 2;
 					var x = Math.random() * r - r / 2;
@@ -71,6 +79,7 @@
 
 
 				geometry.setAttribute( 'position', new THREE.Float32BufferAttribute( positions, 3 ) );
 				geometry.setAttribute( 'position', new THREE.Float32BufferAttribute( positions, 3 ) );
 				geometry.setAttribute( 'color', new THREE.Float32BufferAttribute( colors, 3 ) );
 				geometry.setAttribute( 'color', new THREE.Float32BufferAttribute( colors, 3 ) );
+				generateMorphTargets( geometry );
 
 
 				geometry.computeBoundingSphere();
 				geometry.computeBoundingSphere();
 
 
@@ -91,6 +100,13 @@
 				stats = new Stats();
 				stats = new Stats();
 				container.appendChild( stats.dom );
 				container.appendChild( stats.dom );
 
 
+				//
+
+				var gui = new GUI();
+				gui.add( params, 'morphTargets' );
+				gui.open();
+
+
 				//
 				//
 
 
 				window.addEventListener( 'resize', onWindowResize, false );
 				window.addEventListener( 'resize', onWindowResize, false );
@@ -119,15 +135,44 @@
 
 
 			function render() {
 			function render() {
 
 
-				var time = Date.now() * 0.001;
+				var delta = clock.getDelta();
+				var time = clock.getElapsedTime();
 
 
 				line.rotation.x = time * 0.25;
 				line.rotation.x = time * 0.25;
 				line.rotation.y = time * 0.5;
 				line.rotation.y = time * 0.5;
 
 
+				if ( params.morphTargets ) {
+
+					t += delta * 0.5;
+					line.morphTargetInfluences[ 0 ] = Math.abs( Math.sin( t ) );
+
+				}
+
 				renderer.render( scene, camera );
 				renderer.render( scene, camera );
 
 
 			}
 			}
 
 
+			function generateMorphTargets( geometry ) {
+
+				var data = [];
+
+				for ( var i = 0; i < segments; i ++ ) {
+
+					var x = Math.random() * r - r / 2;
+					var y = Math.random() * r - r / 2;
+					var z = Math.random() * r - r / 2;
+
+					data.push( x, y, z );
+
+				}
+
+				var morphTarget = new THREE.Float32BufferAttribute( data, 3 );
+				morphTarget.name = 'target1';
+
+				geometry.morphAttributes.position = [ morphTarget ];
+
+			}
+
 		</script>
 		</script>
 
 
 	</body>
 	</body>

+ 2 - 0
src/materials/LineBasicMaterial.d.ts

@@ -6,6 +6,7 @@ export interface LineBasicMaterialParameters extends MaterialParameters {
 	linewidth?: number;
 	linewidth?: number;
 	linecap?: string;
 	linecap?: string;
 	linejoin?: string;
 	linejoin?: string;
+	morphTargets?: boolean;
 }
 }
 
 
 export class LineBasicMaterial extends Material {
 export class LineBasicMaterial extends Material {
@@ -16,6 +17,7 @@ export class LineBasicMaterial extends Material {
 	linewidth: number;
 	linewidth: number;
 	linecap: string;
 	linecap: string;
 	linejoin: string;
 	linejoin: string;
+	morphTargets: boolean;
 
 
 	setValues( parameters: LineBasicMaterialParameters ): void;
 	setValues( parameters: LineBasicMaterialParameters ): void;
 
 

+ 4 - 0
src/materials/LineBasicMaterial.js

@@ -27,6 +27,8 @@ function LineBasicMaterial( parameters ) {
 	this.linecap = 'round';
 	this.linecap = 'round';
 	this.linejoin = 'round';
 	this.linejoin = 'round';
 
 
+	this.morphTargets = false;
+
 	this.setValues( parameters );
 	this.setValues( parameters );
 
 
 }
 }
@@ -46,6 +48,8 @@ LineBasicMaterial.prototype.copy = function ( source ) {
 	this.linecap = source.linecap;
 	this.linecap = source.linecap;
 	this.linejoin = source.linejoin;
 	this.linejoin = source.linejoin;
 
 
+	this.morphTargets = source.morphTargets;
+
 	return this;
 	return this;
 
 
 };
 };

+ 4 - 0
src/objects/Line.d.ts

@@ -19,7 +19,11 @@ export class Line extends Object3D {
 	type: 'Line' | 'LineLoop' | 'LineSegments';
 	type: 'Line' | 'LineLoop' | 'LineSegments';
 	readonly isLine: true;
 	readonly isLine: true;
 
 
+	morphTargetInfluences?: number[];
+	morphTargetDictionary?: { [key: string]: number };
+
 	computeLineDistances(): this;
 	computeLineDistances(): this;
 	raycast( raycaster: Raycaster, intersects: Intersection[] ): void;
 	raycast( raycaster: Raycaster, intersects: Intersection[] ): void;
+	updateMorphTargets(): void;
 
 
 }
 }

+ 48 - 0
src/objects/Line.js

@@ -32,6 +32,8 @@ function Line( geometry, material, mode ) {
 	this.geometry = geometry !== undefined ? geometry : new BufferGeometry();
 	this.geometry = geometry !== undefined ? geometry : new BufferGeometry();
 	this.material = material !== undefined ? material : new LineBasicMaterial();
 	this.material = material !== undefined ? material : new LineBasicMaterial();
 
 
+	this.updateMorphTargets();
+
 }
 }
 
 
 Line.prototype = Object.assign( Object.create( Object3D.prototype ), {
 Line.prototype = Object.assign( Object.create( Object3D.prototype ), {
@@ -234,6 +236,52 @@ Line.prototype = Object.assign( Object.create( Object3D.prototype ), {
 
 
 	},
 	},
 
 
+	updateMorphTargets: function () {
+
+		var geometry = this.geometry;
+		var m, ml, name;
+
+		if ( geometry.isBufferGeometry ) {
+
+			var morphAttributes = geometry.morphAttributes;
+			var keys = Object.keys( morphAttributes );
+
+			if ( keys.length > 0 ) {
+
+				var morphAttribute = morphAttributes[ keys[ 0 ] ];
+
+				if ( morphAttribute !== undefined ) {
+
+					this.morphTargetInfluences = [];
+					this.morphTargetDictionary = {};
+
+					for ( m = 0, ml = morphAttribute.length; m < ml; m ++ ) {
+
+						name = morphAttribute[ m ].name || String( m );
+
+						this.morphTargetInfluences.push( 0 );
+						this.morphTargetDictionary[ name ] = m;
+
+					}
+
+				}
+
+			}
+
+		} else {
+
+			var morphTargets = geometry.morphTargets;
+
+			if ( morphTargets !== undefined && morphTargets.length > 0 ) {
+
+				console.error( 'THREE.Line.updateMorphTargets() does not support THREE.Geometry. Use THREE.BufferGeometry instead.' );
+
+			}
+
+		}
+
+	},
+
 	clone: function () {
 	clone: function () {
 
 
 		return new this.constructor( this.geometry, this.material ).copy( this );
 		return new this.constructor( this.geometry, this.material ).copy( this );

+ 2 - 0
src/renderers/shaders/ShaderLib/linedashed_vert.glsl.js

@@ -7,6 +7,7 @@ varying float vLineDistance;
 #include <common>
 #include <common>
 #include <color_pars_vertex>
 #include <color_pars_vertex>
 #include <fog_pars_vertex>
 #include <fog_pars_vertex>
+#include <morphtarget_pars_vertex>
 #include <logdepthbuf_pars_vertex>
 #include <logdepthbuf_pars_vertex>
 #include <clipping_planes_pars_vertex>
 #include <clipping_planes_pars_vertex>
 
 
@@ -16,6 +17,7 @@ void main() {
 
 
 	#include <color_vertex>
 	#include <color_vertex>
 	#include <begin_vertex>
 	#include <begin_vertex>
+	#include <morphtarget_vertex>
 	#include <project_vertex>
 	#include <project_vertex>
 	#include <logdepthbuf_vertex>
 	#include <logdepthbuf_vertex>
 	#include <clipping_planes_vertex>
 	#include <clipping_planes_vertex>