Startsida Utforska Hjälp
Logga in
javascript
/
three.js
spegling av https://github.com/tazdij/three.js.git
2
0
Fork 0
Filer Ärenden 0 Wiki
Bläddra i källkod

Merge pull request #20998 from Mugen87/dev44

Examples: Consolidate morph target examples.
Mr.doob 4 år sedan
förälder
ddcb811db4 aba52e7e5f
incheckning
b15b8a9f3f
5 ändrade filer med 76 tillägg och 280 borttagningar
Unifierad Vy Visa Diff Statistik
  1. 0 1
      examples/files.json
  2. BIN
      examples/screenshots/webgl_buffergeometry_morphtargets.jpg
  3. BIN
      examples/screenshots/webgl_morphtargets.jpg
  4. 0 158
      examples/webgl_buffergeometry_morphtargets.html
  5. 76 121
      examples/webgl_morphtargets.html

+ 0 - 1
examples/files.json
Visa fil 

@@ -292,7 +292,6 @@
 
 		"webgl_buffergeometry_instancing_interleaved",
 
 		"webgl_buffergeometry_instancing_interleaved",
 
 		"webgl_buffergeometry_lines",
 
 		"webgl_buffergeometry_lines",
 
 		"webgl_buffergeometry_lines_indexed",
 
 		"webgl_buffergeometry_lines_indexed",
 
-		"webgl_buffergeometry_morphtargets",
 
 		"webgl_buffergeometry_points",
 
 		"webgl_buffergeometry_points",
 
 		"webgl_buffergeometry_points_interleaved",
 
 		"webgl_buffergeometry_points_interleaved",
 
 		"webgl_buffergeometry_rawshader",
 
 		"webgl_buffergeometry_rawshader",

BIN
examples/screenshots/webgl_buffergeometry_morphtargets.jpg
Visa fil


BIN
examples/screenshots/webgl_morphtargets.jpg
Visa fil


+ 0 - 158
examples/webgl_buffergeometry_morphtargets.html
Visa fil 

@@ -1,158 +0,0 @@
 
-<!DOCTYPE html>
 
-<html lang="en">
 
-	<head>
 
-		<title>three.js webgl - buffergeometry - morph targets</title>
 
-		<meta charset="utf-8">
 
-		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
 
-		<link type="text/css" rel="stylesheet" href="main.css">
 
-	</head>
 
-
 
-	<body>
 
-		<div id="container"></div>
 
-		<div id="info">
 
-			<a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> - buffergeometry - morph targets<br/>
 
-			by <a href="https://discoverthreejs.com/" target="_blank" rel="noopener">Discover three.js</a>
 
-		</div>
 
-
 
-		<script type="module">
 
-
 
-			import * as THREE from '../build/three.module.js';
 
-
 
-			import { GUI } from './jsm/libs/dat.gui.module.js';
 
-			import { OrbitControls } from './jsm/controls/OrbitControls.js';
 
-
 
-			let container, camera, scene, renderer, mesh;
 
-
 
-			function init() {
 
-
 
-				scene = new THREE.Scene();
 
-				scene.background = new THREE.Color( 0x8FBCD4 );
 
-
 
-				scene.add( new THREE.AmbientLight( 0x8FBCD4, 0.4 ) );
 
-
 
-				container = document.getElementById( 'container' );
 
-				camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 20 );
 
-				camera.position.z = 10;
 
-				scene.add( camera );
 
-
 
-				const pointLight = new THREE.PointLight( 0xffffff, 1 );
 
-				camera.add( pointLight );
 
-
 
-				const geometry = createGeometry();
 
-
 
-				const material = new THREE.MeshPhongMaterial( {
 
-					color: 0xff0000,
 
-					flatShading: true,
 
-					morphTargets: true
 
-				} );
 
-
 
-				mesh = new THREE.Mesh( geometry, material );
 
-				scene.add( mesh );
 
-
 
-				initGUI();
 
-
 
-				renderer = new THREE.WebGLRenderer( { antialias: true } );
 
-				renderer.setPixelRatio( window.devicePixelRatio );
 
-				renderer.setSize( window.innerWidth, window.innerHeight );
 
-				renderer.setAnimationLoop( function () {
 
-
 
-					renderer.render( scene, camera );
 
-
 
-				} );
 
-				container.appendChild( renderer.domElement );
 
-
 
-				const controls = new OrbitControls( camera, renderer.domElement );
 
-				controls.enableZoom = false;
 
-
 
-				window.addEventListener( 'resize', onWindowResize, false );
 
-
 
-			}
 
-
 
-			function createGeometry() {
 
-
 
-				const geometry = new THREE.BoxBufferGeometry( 2, 2, 2, 32, 32, 32 );
 
-
 
-				// create an empty array to  hold targets for the attribute we want to morph
 
-				// morphing positions and normals is supported
 
-				geometry.morphAttributes.position = [];
 
-
 
-				// the original positions of the cube's vertices
 
-				const positions = geometry.attributes.position.array;
 
-
 
-				// for the first morph target we'll move the cube's vertices onto the surface of a sphere
 
-				const spherePositions = [];
 
-
 
-				// for the second morph target, we'll twist the cubes vertices
 
-				const twistPositions = [];
 
-				const direction = new THREE.Vector3( 1, 0, 0 ).normalize();
 
-				const vertex = new THREE.Vector3();
 
-
 
-				for ( let i = 0; i < positions.length; i += 3 ) {
 
-
 
-					const x = positions[ i ];
 
-					const y = positions[ i + 1 ];
 
-					const z = positions[ i + 2 ];
 
-
 
-					spherePositions.push(
 
-
 
-						x * Math.sqrt( 1 - ( y * y / 2 ) - ( z * z / 2 ) + ( y * y * z * z / 3 ) ),
 
-						y * Math.sqrt( 1 - ( z * z / 2 ) - ( x * x / 2 ) + ( z * z * x * x / 3 ) ),
 
-						z * Math.sqrt( 1 - ( x * x / 2 ) - ( y * y / 2 ) + ( x * x * y * y / 3 ) )
 
-
 
-					);
 
-
 
-					// stretch along the x-axis so we can see the twist better
 
-					vertex.set( x * 2, y, z );
 
-
 
-					vertex.applyAxisAngle( direction, Math.PI * x / 2 ).toArray( twistPositions, twistPositions.length );
 
-
 
-				}
 
-
 
-				// add the spherical positions as the first morph target
 
-				geometry.morphAttributes.position[ 0 ] = new THREE.Float32BufferAttribute( spherePositions, 3 );
 
-
 
-				// add the twisted positions as the second morph target
 
-				geometry.morphAttributes.position[ 1 ] = new THREE.Float32BufferAttribute( twistPositions, 3 );
 
-
 
-				return geometry;
 
-
 
-			}
 
-
 
-			function initGUI() {
 
-
 
-				// Set up dat.GUI to control targets
 
-				const params = {
 
-					Spherify: 0,
 
-					Twist: 0,
 
-				};
 
-				const gui = new GUI();
 
-				const folder = gui.addFolder( 'Morph Targets' );
 
-
 
-				folder.add( params, 'Spherify', 0, 1 ).step( 0.01 ).onChange( function ( value ) {
 
-
 
-					mesh.morphTargetInfluences[ 0 ] = value;
 
-
 
-				} );
 
-				folder.add( params, 'Twist', 0, 1 ).step( 0.01 ).onChange( function ( value ) {
 
-
 
-					mesh.morphTargetInfluences[ 1 ] = value;
 
-
 
-				} );
 
-
 
-				folder.open();
 
-
 
-			}
 
-
 
-			function onWindowResize() {
 
-
 
-				camera.aspect = window.innerWidth / window.innerHeight;
 
-				camera.updateProjectionMatrix();
 
-				renderer.setSize( window.innerWidth, window.innerHeight );
 
-
 
-			}
 
-
 
-			init();
 
-		</script>
 
-
 
-	</body>
 
-</html>

+ 76 - 121
examples/webgl_morphtargets.html
Visa fil 

@@ -1,15 +1,17 @@
 
 <!DOCTYPE html>
 
 <!DOCTYPE html>
 
 <html lang="en">
 
 <html lang="en">
 
 	<head>
 
 	<head>
 
-		<title>three.js webgl - animation - morph targets</title>
 
+		<title>three.js webgl - morph targets</title>
 
 		<meta charset="utf-8">
 
 		<meta charset="utf-8">
 
 		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
 
 		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
 
 		<link type="text/css" rel="stylesheet" href="main.css">
 
 		<link type="text/css" rel="stylesheet" href="main.css">
 
 	</head>
 
 	</head>
 
+
 
 	<body>
 
 	<body>
 
 		<div id="container"></div>
 
 		<div id="container"></div>
 
 		<div id="info">
 
 		<div id="info">
 
-			<a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> - WebGL morph target example
 
+			<a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> - morph targets<br/>
 
+			by <a href="https://discoverthreejs.com/" target="_blank" rel="noopener">Discover three.js</a>
 
 		</div>
 
 		</div>
 
 
 
 		<script type="module">
 
 		<script type="module">
 
@@ -19,160 +21,128 @@
 
 			import { GUI } from './jsm/libs/dat.gui.module.js';
 
 			import { GUI } from './jsm/libs/dat.gui.module.js';
 
 			import { OrbitControls } from './jsm/controls/OrbitControls.js';
 
 			import { OrbitControls } from './jsm/controls/OrbitControls.js';
 
 
 
-			let camera, scene, renderer, raycaster;
 
-
 
-			let mesh;
 
-			const mouse = new THREE.Vector2();
 
+			let container, camera, scene, renderer, mesh;
 
 
 
 			init();
 
 			init();
 
-			animate();
 
 
 
 			function init() {
 
 			function init() {
 
 
 
-				const container = document.getElementById( 'container' );
 
-
 
-				camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 2000 );
 
-				camera.position.z = 500;
 
+				container = document.getElementById( 'container' );
 
 
 
 				scene = new THREE.Scene();
 
 				scene = new THREE.Scene();
 
-				scene.background = new THREE.Color( 0x222222 );
 
-				scene.fog = new THREE.Fog( 0x000000, 1, 15000 );
 
+				scene.background = new THREE.Color( 0x8FBCD4 );
 
 
 
-				const light = new THREE.PointLight( 0xffffff );
 
-				light.position.z = 500;
 
-				camera.add( light );
 
+				camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 20 );
 
+				camera.position.z = 10;
 
 				scene.add( camera );
 
 				scene.add( camera );
 
 
 
-				scene.add( new THREE.AmbientLight( 0x111111 ) );
 
-
 
-				const geometry = new THREE.BoxGeometry( 100, 100, 100 );
 
-				const material = new THREE.MeshLambertMaterial( { color: 0xff0000, morphTargets: true } );
 
-
 
-				// construct 8 blend shapes
 
-
 
-				for ( let i = 0; i < 8; i ++ ) {
 
-
 
-					const vertices = [];
 
-
 
-					for ( let v = 0; v < geometry.vertices.length; v ++ ) {
 
+				scene.add( new THREE.AmbientLight( 0x8FBCD4, 0.4 ) );
 
 
 
-						vertices.push( geometry.vertices[ v ].clone() );
 
+				const pointLight = new THREE.PointLight( 0xffffff, 1 );
 
+				camera.add( pointLight );
 
 
 
-						if ( v === i ) {
 
+				const geometry = createGeometry();
 
 
 
-							vertices[ vertices.length - 1 ].x *= 2;
 
-							vertices[ vertices.length - 1 ].y *= 2;
 
-							vertices[ vertices.length - 1 ].z *= 2;
 
-
 
-						}
 
-
 
-					}
 
-
 
-					geometry.morphTargets.push( { name: "target" + i, vertices: vertices } );
 
-
 
-				}
 
-
 
-				mesh = new THREE.Mesh( new THREE.BufferGeometry().fromGeometry( geometry ), material );
 
+				const material = new THREE.MeshPhongMaterial( {
 
+					color: 0xff0000,
 
+					flatShading: true,
 
+					morphTargets: true
 
+				} );
 
 
 
+				mesh = new THREE.Mesh( geometry, material );
 
 				scene.add( mesh );
 
 				scene.add( mesh );
 
 
 
-				//
 
-
 
-				const params = {
 
-					influence1: 0,
 
-					influence2: 0,
 
-					influence3: 0,
 
-					influence4: 0,
 
-					influence5: 0,
 
-					influence6: 0,
 
-					influence7: 0,
 
-					influence8: 0
 
-				};
 
-
 
-				const gui = new GUI();
 
-
 
-				const folder = gui.addFolder( 'Morph Targets' );
 
-				folder.add( params, 'influence1', 0, 1 ).step( 0.01 ).onChange( function ( value ) {
 
-
 
-					mesh.morphTargetInfluences[ 0 ] = value;
 
+				initGUI();
 
 
 
-				} );
 
-				folder.add( params, 'influence2', 0, 1 ).step( 0.01 ).onChange( function ( value ) {
 
+				renderer = new THREE.WebGLRenderer( { antialias: true } );
 
+				renderer.setPixelRatio( window.devicePixelRatio );
 
+				renderer.setSize( window.innerWidth, window.innerHeight );
 
+				renderer.setAnimationLoop( function () {
 
 
 
-					mesh.morphTargetInfluences[ 1 ] = value;
 
+					renderer.render( scene, camera );
 
 
 
 				} );
 
 				} );
 
-				folder.add( params, 'influence3', 0, 1 ).step( 0.01 ).onChange( function ( value ) {
 
+				container.appendChild( renderer.domElement );
 
 
 
-					mesh.morphTargetInfluences[ 2 ] = value;
 
+				const controls = new OrbitControls( camera, renderer.domElement );
 
+				controls.enableZoom = false;
 
 
 
-				} );
 
-				folder.add( params, 'influence4', 0, 1 ).step( 0.01 ).onChange( function ( value ) {
 
+				window.addEventListener( 'resize', onWindowResize, false );
 
 
 
-					mesh.morphTargetInfluences[ 3 ] = value;
 
+			}
 
 
 
-				} );
 
-				folder.add( params, 'influence5', 0, 1 ).step( 0.01 ).onChange( function ( value ) {
 
+			function createGeometry() {
 
 
 
-					mesh.morphTargetInfluences[ 4 ] = value;
 
+				const geometry = new THREE.BoxBufferGeometry( 2, 2, 2, 32, 32, 32 );
 
 
 
-				} );
 
-				folder.add( params, 'influence6', 0, 1 ).step( 0.01 ).onChange( function ( value ) {
 
+				// create an empty array to  hold targets for the attribute we want to morph
 
+				// morphing positions and normals is supported
 
+				geometry.morphAttributes.position = [];
 
 
 
-					mesh.morphTargetInfluences[ 5 ] = value;
 
+				// the original positions of the cube's vertices
 
+				const positionAttribute = geometry.attributes.position;
 
 
 
-				} );
 
-				folder.add( params, 'influence7', 0, 1 ).step( 0.01 ).onChange( function ( value ) {
 
+				// for the first morph target we'll move the cube's vertices onto the surface of a sphere
 
+				const spherePositions = [];
 
 
 
-					mesh.morphTargetInfluences[ 6 ] = value;
 
+				// for the second morph target, we'll twist the cubes vertices
 
+				const twistPositions = [];
 
+				const direction = new THREE.Vector3( 1, 0, 0 );
 
+				const vertex = new THREE.Vector3();
 
 
 
-				} );
 
-				folder.add( params, 'influence8', 0, 1 ).step( 0.01 ).onChange( function ( value ) {
 
+				for ( let i = 0; i < positionAttribute.count; i ++ ) {
 
 
 
-					mesh.morphTargetInfluences[ 7 ] = value;
 
+					const x = positionAttribute.getX( i );
 
+					const y = positionAttribute.getY( i );
 
+					const z = positionAttribute.getZ( i );
 
 
 
-				} );
 
-				folder.open();
 
+					spherePositions.push(
 
 
 
-				//
 
+						x * Math.sqrt( 1 - ( y * y / 2 ) - ( z * z / 2 ) + ( y * y * z * z / 3 ) ),
 
+						y * Math.sqrt( 1 - ( z * z / 2 ) - ( x * x / 2 ) + ( z * z * x * x / 3 ) ),
 
+						z * Math.sqrt( 1 - ( x * x / 2 ) - ( y * y / 2 ) + ( x * x * y * y / 3 ) )
 
 
 
-				raycaster = new THREE.Raycaster();
 
+					);
 
 
 
-				renderer = new THREE.WebGLRenderer();
 
-				renderer.setPixelRatio( window.devicePixelRatio );
 
-				renderer.setSize( window.innerWidth, window.innerHeight );
 
-				container.appendChild( renderer.domElement );
 
+					// stretch along the x-axis so we can see the twist better
 
+					vertex.set( x * 2, y, z );
 
 
 
-				//
 
+					vertex.applyAxisAngle( direction, Math.PI * x / 2 ).toArray( twistPositions, twistPositions.length );
 
 
 
-				const controls = new OrbitControls( camera, renderer.domElement );
 
-				controls.minDistance = 400;
 
-				controls.maxDistance = 1000;
 
+				}
 
 
 
-				//
 
+				// add the spherical positions as the first morph target
 
+				geometry.morphAttributes.position[ 0 ] = new THREE.Float32BufferAttribute( spherePositions, 3 );
 
 
 
-				window.addEventListener( 'resize', onWindowResize, false );
 
+				// add the twisted positions as the second morph target
 
+				geometry.morphAttributes.position[ 1 ] = new THREE.Float32BufferAttribute( twistPositions, 3 );
 
 
 
-				document.addEventListener( 'click', onClick, false );
 
+				return geometry;
 
 
 
 			}
 
 			}
 
 
 
-			function onClick( event ) {
 
+			function initGUI() {
 
 
 
-				event.preventDefault();
 
+				// Set up dat.GUI to control targets
 
+				const params = {
 
+					Spherify: 0,
 
+					Twist: 0,
 
+				};
 
+				const gui = new GUI();
 
+				const folder = gui.addFolder( 'Morph Targets' );
 
 
 
-				mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
 
-				mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;
 
+				folder.add( params, 'Spherify', 0, 1 ).step( 0.01 ).onChange( function ( value ) {
 
 
 
-				raycaster.setFromCamera( mouse, camera );
 
+					mesh.morphTargetInfluences[ 0 ] = value;
 
 
 
-				const intersects = raycaster.intersectObject( mesh );
 
+				} );
 
+				folder.add( params, 'Twist', 0, 1 ).step( 0.01 ).onChange( function ( value ) {
 
 
 
-				if ( intersects.length > 0 ) {
 
+					mesh.morphTargetInfluences[ 1 ] = value;
 
 
 
-					mesh.material.color.set( Math.random() * 0xffffff );
 
+				} );
 
 
 
-				}
 
+				folder.open();
 
 
 
 			}
 
 			}
 
 
 
@@ -185,21 +155,6 @@
 
 
 
 			}
 
 			}
 
 
 
-			function animate() {
 
-
 
-				requestAnimationFrame( animate );
 
-				render();
 
-
 
-			}
 
-
 
-			function render() {
 
-
 
-				mesh.rotation.y += 0.01;
 
-
 
-				renderer.render( scene, camera );
 
-
 
-			}
 
-
 
 		</script>
 
 		</script>
 
 
 
 	</body>
 
 	</body>