13.png 14.png 15.png

//自定义shader

<!-- ---------------- Custom Shader Code ------------------------ -->

<script id="vertexShader" type="x-shader/x-vertex">

uniform float mixAmount;

varying vec2 vUv;

void main()

{

   vUv = uv;

vec3 goalPosition = 200.0 * vec3( 0, uv.y, -uv.x ) + vec3(0.0, -100.0, 100.0);

vec3 newPosition = mix( position, goalPosition, mixAmount );

gl_Position = projectionMatrix * modelViewMatrix * vec4( newPosition, 1.0 );

}

</script>

<!-- fragment shader a.k.a. pixel shader -->

<script id="fragmentShader" type="x-shader/x-vertex">

uniform sampler2D baseTexture;

varying vec2 vUv;

void main()

{

   gl_FragColor = texture2D( baseTexture, vUv );

}  

</script>

<!-- ----------------------------------------------------------- -->

//JS代码

var ballGeometry = new THREE.SphereGeometry( 60, 32, 16 );

var ballTexture = new THREE.ImageUtils.loadTexture('images/uvgrid01.jpg');

// use "this." to create global object

this.customUniforms =

{

 baseTexture: { type: "t", value: ballTexture },

 mixAmount:   { type: "f", value: 0.0 }

};

// create custom material from the shader code above

//   that is within specially labeled script tags

var customMaterial = new THREE.ShaderMaterial(

{

    uniforms: customUniforms,

 vertexShader:   document.getElementById( 'vertexShader'   ).textContent,

 fragmentShader: document.getElementById( 'fragmentShader' ).textContent,

 side: THREE.DoubleSide

}   );

var ball = new THREE.Mesh( ballGeometry, customMaterial );

ball.position.set(0, 65, 0);

ball.rotation.set(0, -Math.PI / 2, 0);

scene.add( ball );

//动画

function update()

{

if ( keyboard.pressed("z") )

{

 // do something

}

var t = clock.getElapsedTime();

customUniforms.mixAmount.value = 0.5 * (1.0 + Math.sin(t));

controls.update();

stats.update();

}

https://stemkoski.github.io/Three.js/Sphere-Unwrapping.html

通过Shader的Mix动画

https://stemkoski.github.io/Three.js/Shader-Attributes.html

球会慢慢的变瘪

16.png 17.png

<!-- ---------------- Custom Shader Code ------------------------ -->

<script id="vertexShader" type="x-shader/x-vertex">

uniform float mixAmount;

attribute vec3 endPosition;

varying vec2 vUv;

void main()

{

   vUv = uv;

   vec3 newPosition = mix( position, endPosition, mixAmount );

gl_Position = projectionMatrix * modelViewMatrix * vec4( newPosition, 1.0 );

}

</script>

<!-- fragment shader a.k.a. pixel shader -->

<script id="fragmentShader" type="x-shader/x-vertex">

uniform sampler2D baseTexture;

varying vec2 vUv;

void main()

{

   gl_FragColor = texture2D( baseTexture, vUv );

}  

</script>

<!-- ----------------------------------------------------------- -->

关键代码

this.customUniforms =

{

 baseTexture: { type: "t", value: ballTexture },

 mixAmount:   { type: "f", value: 0.0 }

};

this.customAttributes =

{

 endPosition: { type: "v3", value: [] }

};

// set values of attributes

var values = customAttributes.endPosition.value;

for ( var i = 0; i < ballGeometry.vertices.length; i++ )

{

 var vec = ballGeometry.vertices[i];

 values[i] = new THREE.Vector3( vec.x, 0, vec.z );

}

//动画
var t = clock.getElapsedTime();

//返回0-1的值

customUniforms.mixAmount.value = 0.5 * (1.0 + Math.sin(t));