Jelajahi Sumber

Merge pull request #14781 from Mugen87/dev17

Examples: Moved webgl_skinning_simple to gltf
Mr.doob 7 tahun lalu
induk
melakukan
6d16c9a80b
2 mengubah file dengan 368 tambahan dan 32 penghapusan
  1. 288 0
      examples/models/gltf/SimpleSkinning.gltf
  2. 80 32
      examples/webgl_skinning_simple.html

File diff ditekan karena terlalu besar
+ 288 - 0
examples/models/gltf/SimpleSkinning.gltf


+ 80 - 32
examples/webgl_skinning_simple.html

@@ -7,79 +7,127 @@
 		<style>
 			body {
 				font-family: Monospace;
-				background-color: #f0f0f0;
+				background-color: #000;
+				color: #fff;
 				margin: 0px;
 				overflow: hidden;
 			}
+			#info {
+				color: #fff;
+				position: absolute;
+				top: 10px;
+				width: 100%;
+				text-align: center;
+				z-index: 100;
+				display:block;
+			}
+			#info a {
+				color: #046;
+				font-weight: bold;
+			}
 		</style>
 	</head>
 	<body>
 
+		<div id="info">
+		<a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> webgl - simple skinning -
+		<a href="https://github.com/mrdoob/three.js/blob/master/examples/models/skinned/simple/simple.blend" target="_blank" rel="noopener">Blender File</a>
+		</div>
+
 		<script src="../build/three.js"></script>
 		<script src="js/libs/stats.min.js"></script>
 		<script src="js/controls/OrbitControls.js"></script>
+		<script src="js/loaders/GLTFLoader.js"></script>
 
 		<script>
 
-			var container, stats, controls;
-			var camera, scene, renderer, loader, clock, light;
-			var skinnedMesh, animation, mixer;
+			var stats, mixer, camera, scene, renderer, clock;
 
 			init();
 			animate();
 
 			function init() {
 
-				container = document.createElement( 'div' );
+				var container = document.createElement( 'div' );
 				document.body.appendChild( container );
 
-				camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 10000 );
-				camera.position.set( 10, 0, 10 );
+				camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 1000 );
+				camera.position.set( 24, 8, 24 );
 
 				scene = new THREE.Scene();
-				loader = new THREE.JSONLoader();
-				clock = new THREE.Clock;
+				scene.background = new THREE.Color( 0xa0a0a0 );
+				scene.fog = new THREE.Fog( 0xa0a0a0, 70, 100 );
 
-				renderer = new THREE.WebGLRenderer();
-				renderer.setPixelRatio( window.devicePixelRatio );
-				renderer.setSize( window.innerWidth, window.innerHeight );
-				container.appendChild( renderer.domElement );
+				clock = new THREE.Clock();
 
-				controls = new THREE.OrbitControls( camera, renderer.domElement );
+				// ground
 
-				stats = new Stats();
-				container.appendChild( stats.dom );
-
-				var geometry = new THREE.PlaneBufferGeometry( 16000, 16000 );
-				var material = new THREE.MeshBasicMaterial( { emissive: 0xbbbbbb } );
+				var geometry = new THREE.PlaneBufferGeometry( 500, 500 );
+				var material = new THREE.MeshPhongMaterial( { color: 0x999999, depthWrite: false } );
 
 				var ground = new THREE.Mesh( geometry, material );
-				ground.position.set( 0, -5, 0 );
-				ground.rotation.x = -Math.PI / 2;
+				ground.position.set( 0, - 5, 0 );
+				ground.rotation.x = - Math.PI / 2;
+				ground.receiveShadow = true;
 				scene.add( ground );
 
-				light = new THREE.HemisphereLight( 0xffffff, 0x003300, 1 );
-				light.position.set( - 80, 500, 50 );
+				var grid = new THREE.GridHelper( 500, 100, 0x000000, 0x000000 );
+				grid.position.y = - 5;
+				grid.material.opacity = 0.2;
+				grid.material.transparent = true;
+				scene.add( grid );
+
+				// lights
+
+				var light = new THREE.HemisphereLight( 0xffffff, 0x444444, 0.6 );
+				light.position.set( 0, 200, 0 );
 				scene.add( light );
 
-				loader.load( './models/skinned/simple/simple.js', function ( geometry, materials ) {
+				light = new THREE.DirectionalLight( 0xffffff, 0.8 );
+				light.position.set( 0, 20, 10 );
+				light.castShadow = true;
+				light.shadow.camera.top = 18;
+				light.shadow.camera.bottom = - 10;
+				light.shadow.camera.left = - 12;
+				light.shadow.camera.right = 12;
+				scene.add( light );
 
-					for ( var k in materials ) {
+				//
 
-						materials[ k ].skinning = true;
+				var loader = new THREE.GLTFLoader();
+				loader.load( './models/gltf/SimpleSkinning.gltf', function ( gltf ) {
 
-					}
+					scene.add( gltf.scene );
 
-					skinnedMesh = new THREE.SkinnedMesh( geometry, materials );
-					skinnedMesh.scale.set( 1, 1, 1 );
+					gltf.scene.traverse( function ( child ) {
 
-					scene.add( skinnedMesh );
+						if ( child.isSkinnedMesh ) child.castShadow = true;
 
-					mixer = new THREE.AnimationMixer( skinnedMesh );
-					mixer.clipAction( skinnedMesh.geometry.animations[ 0 ] ).play();
+					} );
+
+					mixer = new THREE.AnimationMixer( gltf.scene );
+					mixer.clipAction( gltf.animations[ 0 ] ).play();
 
 				} );
 
+				//
+
+				renderer = new THREE.WebGLRenderer();
+				renderer.setPixelRatio( window.devicePixelRatio );
+				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.shadowMap.enabled = true;
+				container.appendChild( renderer.domElement );
+
+				//
+
+				stats = new Stats();
+				container.appendChild( stats.dom );
+
+				var controls = new THREE.OrbitControls( camera, renderer.domElement );
+				controls.enablePan = false;
+				controls.minDistance = 5;
+				controls.maxDistance = 50;
+
 			}
 
 			function animate() {

Beberapa file tidak ditampilkan karena terlalu banyak file yang berubah dalam diff ini