Merge pull request #14107 from WestLangley/dev-morph_points

PointsMaterial: add morph target support

Merge pull request #14107 from WestLangley/dev-morph_points
PointsMaterial: add morph target support
6fd78839 · Mr.doob · GitHub · be792321 · 61086583 · 6fd78839
4 changed file
--- a/docs/api/materials/PointsMaterial.html
+++ b/docs/api/materials/PointsMaterial.html
@@ -84,6 +84,9 @@ scene.add( starField );

 		<p>Sets the color of the points using data from a [page:Texture].</p>

+		<h3>[property:Boolean morphTargets]</h3>
+		<p>Define whether the material uses morphTargets. Default is false.</p>
+
 		<h3>[property:Number size]</h3>
 		<p>Sets the size of the points. Default is 1.0.</p>


--- a/examples/webgl_morphtargets_sphere.html
+++ b/examples/webgl_morphtargets_sphere.html
 <!DOCTYPE html>
 <html lang="en">
 	<head>
-		<title>three.js webgl - morph targets - horse</title>
+		<title>three.js webgl - morph targets - sphere</title>
 		<meta charset="utf-8">
 		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
 		<style>
@@ -63,15 +63,13 @@
 				camera.position.set( 0, 5, 5 );

 				scene = new THREE.Scene();
-				scene.background = new THREE.Color( 0x222222 );
-				scene.fog = new THREE.Fog( 0x000000, 1, 15000 );

 				var light = new THREE.PointLight( 0xff2200, 0.7 );
 				light.position.set( 100, 100, 100 );
 				scene.add( light );

 				light = new THREE.PointLight( 0x22ff00, 0.7 );
-				light.position.set( -100, -100, -100 );
+				light.position.set( - 100, - 100, - 100 );
 				scene.add( light );

 				light = new THREE.AmbientLight( 0x111111 );
@@ -90,9 +88,30 @@

 					mesh.rotation.z = Math.PI / 2;

+					//mesh.material.visible = false;
+
 					scene.add( mesh );

-				});
+					//
+
+					var pointsMaterial = new THREE.PointsMaterial( {
+
+						size: 10,
+						sizeAttenuation: false,
+						map: new THREE.TextureLoader().load( 'textures/sprites/disc.png' ),
+						alphaTest: 0.5,
+						morphTargets: true
+
+					} );
+
+					points = new THREE.Points( mesh.geometry, pointsMaterial );
+
+					points.morphTargetInfluences = mesh.morphTargetInfluences;
+					points.morphTargetDictionary = mesh.morphTargetDictionary;
+
+					mesh.add( points );
+
+				} );

 				//

@@ -104,6 +123,8 @@
 				//

 				controls = new THREE.OrbitControls( camera, renderer.domElement );
+				controls.minDistance = 1;
+				controls.maxDistance = 20;

 				//

@@ -137,7 +158,7 @@

 					if ( mesh.morphTargetInfluences[ 1 ] <= 0 || mesh.morphTargetInfluences[ 1 ] >= 1 ) {

-						sign *= -1;
+						sign *= - 1;

 					}


--- a/src/materials/PointsMaterial.js
+++ b/src/materials/PointsMaterial.js
@@ -12,6 +12,8 @@ import { Color } from '../math/Color.js';
 *
 *  size: <float>,
 *  sizeAttenuation: <bool>
+ *
+ *  morphTargets: <bool>
 * }
 */

@@ -28,6 +30,8 @@ function PointsMaterial( parameters ) {
 	this.size = 1;
 	this.sizeAttenuation = true;

+	this.morphTargets = false;
+
 	this.lights = false;

 	this.setValues( parameters );
@@ -50,6 +54,8 @@ PointsMaterial.prototype.copy = function ( source ) {
 	this.size = source.size;
 	this.sizeAttenuation = source.sizeAttenuation;

+	this.morphTargets = source.morphTargets;
+
 	return this;

 };

--- a/src/renderers/shaders/ShaderLib/points_vert.glsl
+++ b/src/renderers/shaders/ShaderLib/points_vert.glsl
@@ -4,6 +4,7 @@ uniform float scale;
 #include <common>
 #include <color_pars_vertex>
 #include <fog_pars_vertex>
+#include <morphtarget_pars_vertex>
 #include <logdepthbuf_pars_vertex>
 #include <clipping_planes_pars_vertex>

@@ -11,6 +12,7 @@ void main() {

 	#include <color_vertex>
 	#include <begin_vertex>
+	#include <morphtarget_vertex>
 	#include <project_vertex>

 	#ifdef USE_SIZEATTENUATION