Эхлэл Бүгдийг харах Тусламж
Нэвтрэх
javascript
/
three.js
-ын хуулбар https://github.com/tazdij/three.js.git
2
0
Салаа 0
Файлууд Асуудлууд 0 Мэдлэгийн сан
Эх сурвалжийг харах

Examples: Restore JSONLoader base example, move file to json/legacy.

Don McCurdy 7 жил өмнө
parent
0885bf68e3
commit
3f1907602b
6 өөрчлөгдсөн 207 нэмэгдсэн , 306 устгасан
Өөрчлөллтийг нэгтгэж харах Өөрчлөлтийн статистик харах
  1. 1 1
      examples/files.js
  2. BIN
      examples/models/json/legacy/monster/monster.blend
  3. BIN
      examples/models/json/legacy/monster/monster.jpg
  4. 31 0
      examples/models/json/legacy/monster/monster.js
  5. 175 0
      examples/webgl_loader_json.html
  6. 0 305
      examples/webgl_loader_json_objconverter.html

+ 1 - 1
examples/files.js
Файл харах 

@@ -93,8 +93,8 @@ var files = {
 
 		"webgl_loader_gltf",
 
 		"webgl_loader_gltf",
 
 		"webgl_loader_gltf_extensions",
 
 		"webgl_loader_gltf_extensions",
 
 		"webgl_loader_imagebitmap",
 
 		"webgl_loader_imagebitmap",
 
+		"webgl_loader_json",
 
 		"webgl_loader_json_claraio",
 
 		"webgl_loader_json_claraio",
 
-		"webgl_loader_json_objconverter",
 
 		"webgl_loader_kmz",
 
 		"webgl_loader_kmz",
 
 		"webgl_loader_md2",
 
 		"webgl_loader_md2",
 
 		"webgl_loader_md2_control",
 
 		"webgl_loader_md2_control",

BIN
examples/models/json/legacy/monster/monster.blend
Файл харах


BIN
examples/models/json/legacy/monster/monster.jpg
Файл харах


Файлын зөрүү хэтэрхий том тул дарагдсан байна
+ 31 - 0
examples/models/json/legacy/monster/monster.js


+ 175 - 0
examples/webgl_loader_json.html
Файл харах 

@@ -0,0 +1,175 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+	<head>
 
+		<title>three.js webgl - loader -json</title>
 
+		<meta charset="utf-8">
 
+		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
 
+		<style>
 
+			body {
 
+				background:#777;
 
+				padding:0;
 
+				margin:0;
 
+				font-weight: bold;
 
+				overflow:hidden;
 
+			}
 
+
 
+			#info {
 
+				position: absolute;
 
+				top: 0px;
 
+				width: 100%;
 
+				color: #ffffff;
 
+				padding: 5px;
 
+				font-family:Monospace;
 
+				font-size:13px;
 
+				text-align:center;
 
+			}
 
+
 
+			a {
 
+				color: #ffffff;
 
+			}
 
+		</style>
 
+	</head>
 
+	<body>
 
+
 
+		<div id="container"></div>
 
+		<div id="info">
 
+			<a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> -
 
+			monster by <a href="http://www.3drt.com/downloads.htm" target="_blank" rel="noopener">3drt</a>
 
+		</div>
 
+
 
+		<script src="../build/three.js"></script>
 
+
 
+		<script src="js/Detector.js"></script>
 
+		<script src="js/libs/stats.min.js"></script>
 
+
 
+		<script>
 
+
 
+			if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
 
+
 
+			var container, stats, clock, mixer;
 
+			var camera, scene, renderer, objects;
 
+
 
+			init();
 
+			animate();
 
+
 
+			function init() {
 
+
 
+				container = document.getElementById( 'container' );
 
+
 
+				camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 1, 2000 );
 
+				camera.position.set( 2, 4, 5 );
 
+
 
+				clock = new THREE.Clock();
 
+
 
+				scene = new THREE.Scene();
 
+				scene.fog = new THREE.FogExp2( 0x000000, 0.035 );
 
+
 
+				mixer = new THREE.AnimationMixer( scene );
 
+
 
+				var loader = new THREE.JSONLoader();
 
+				loader.load( 'models/json/legacy/monster/monster.js', function ( geometry, materials ) {
 
+
 
+					// adjust color a bit
 
+
 
+					var material = materials[ 0 ];
 
+					material.morphTargets = true;
 
+					material.color.setHex( 0xffaaaa );
 
+
 
+					for ( var i = 0; i < 729; i ++ ) {
 
+
 
+						var mesh = new THREE.Mesh( geometry, materials );
 
+
 
+						// random placement in a grid
 
+
 
+						var x = ( ( i % 27 )  - 13.5 ) * 2 + THREE.Math.randFloatSpread( 1 );
 
+						var z = ( Math.floor( i / 27 ) - 13.5 ) * 2 + THREE.Math.randFloatSpread( 1 );
 
+
 
+						mesh.position.set( x, 0, z );
 
+
 
+						var s = THREE.Math.randFloat( 0.00075, 0.001 );
 
+						mesh.scale.set( s, s, s );
 
+
 
+						mesh.rotation.y = THREE.Math.randFloat( -0.25, 0.25 );
 
+
 
+						mesh.matrixAutoUpdate = false;
 
+						mesh.updateMatrix();
 
+
 
+						scene.add( mesh );
 
+
 
+						mixer.clipAction( geometry.animations[ 0 ], mesh )
 
+								.setDuration( 1 )			// one second
 
+								.startAt( - Math.random() )	// random phase (already running)
 
+								.play();					// let's go
 
+
 
+					}
 
+
 
+				} );
 
+
 
+				// lights
 
+
 
+				var ambientLight = new THREE.AmbientLight( 0xcccccc );
 
+				scene.add( ambientLight );
 
+
 
+				var pointLight = new THREE.PointLight( 0xff4400, 5, 30 );
 
+				pointLight.position.set( 5, 0, 0 );
 
+				scene.add( pointLight );
 
+
 
+				// renderer
 
+
 
+				renderer = new THREE.WebGLRenderer();
 
+				renderer.setPixelRatio( window.devicePixelRatio );
 
+				renderer.setSize( window.innerWidth, window.innerHeight );
 
+				container.appendChild( renderer.domElement );
 
+
 
+				// stats
 
+
 
+				stats = new Stats();
 
+				container.appendChild( stats.dom );
 
+
 
+				// events
 
+
 
+				window.addEventListener( 'resize', onWindowResize, false );
 
+
 
+			}
 
+
 
+			//
 
+
 
+			function onWindowResize( event ) {
 
+
 
+				renderer.setSize( window.innerWidth, window.innerHeight );
 
+
 
+				camera.aspect = window.innerWidth / window.innerHeight;
 
+				camera.updateProjectionMatrix();
 
+
 
+			}
 
+
 
+			//
 
+
 
+			function animate() {
 
+
 
+				requestAnimationFrame( animate );
 
+
 
+				render();
 
+				stats.update();
 
+
 
+			}
 
+
 
+			function render() {
 
+
 
+				var timer = Date.now() * 0.0005;
 
+
 
+				camera.position.x = Math.cos( timer ) * 10;
 
+				camera.position.y = 4;
 
+				camera.position.z = Math.sin( timer ) * 10;
 
+
 
+				mixer.update( clock.getDelta() );
 
+
 
+				camera.lookAt( scene.position );
 
+
 
+				renderer.render( scene, camera );
 
+
 
+			}
 
+
 
+		</script>
 
+	</body>
 
+</html>

+ 0 - 305
examples/webgl_loader_json_objconverter.html
Файл харах 

@@ -1,305 +0,0 @@
 
-<!DOCTYPE html>
 
-<html lang="en">
 
-	<head>
 
-		<title>three.js webgl - io - OBJ converter</title>
 
-		<meta charset="utf-8">
 
-		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
 
-		<style>
 
-			body {
 
-				background:#fff;
 
-				padding:0;
 
-				margin:0;
 
-				overflow:hidden;
 
-				font-family:georgia;
 
-				text-align:center;
 
-			}
 
-			h1 { }
 
-			a { color:skyblue }
 
-
 
-			#info { position:absolute; top:0px; width: 100%; text-align:center; }
 
-			.button { background:#000; color:#fff; padding:0.2em 0.5em; cursor:pointer }
 
-			.inactive { background:#999; color:#eee }
 
-		</style>
 
-	</head>
 
-
 
-	<body>
 
-		<div id="container"></div>
 
-		<div id="info">
 
-			<h1>OBJ to Three.js converter test</h1>
 
-
 
-			<span id="rcanvas" class="button inactive">2d canvas renderer</span>
 
-			<span id="rwebgl" class="button">WebGL renderer</span>
 
-			<br/>
 
-
 
-			<p>Models by <a href="http://sketchup.google.com/3dwarehouse/details?mid=2c6fd128fca34052adc5f5b98d513da1">Reallusion</a>
 
-			<a href="http://sketchup.google.com/3dwarehouse/details?mid=f526cc4abf7cb68d76cab47c765b7255">iClone</a>.
 
-		</div>
 
-
 
-		<script src="../build/three.js"></script>
 
-		<script src="js/loaders/DDSLoader.js"></script>
 
-		<script src="js/renderers/Projector.js"></script>
 
-		<script src="js/renderers/CanvasRenderer.js"></script>
 
-
 
-		<script src="js/Detector.js"></script>
 
-		<script src="js/libs/stats.min.js"></script>
 
-
 
-		<script>
 
-
 
-			var SCREEN_WIDTH = window.innerWidth;
 
-			var SCREEN_HEIGHT = window.innerHeight;
 
-			var FLOOR = -250;
 
-
 
-			var container, stats;
 
-
 
-			var camera, scene;
 
-			var canvasRenderer, webglRenderer;
 
-
 
-			var mesh, zmesh, geometry;
 
-
 
-			var mouseX = 0, mouseY = 0;
 
-
 
-			var windowHalfX = window.innerWidth / 2;
 
-			var windowHalfY = window.innerHeight / 2;
 
-
 
-			var render_canvas = 1, render_gl = 1;
 
-			var has_gl = 0;
 
-
 
-			var bcanvas = document.getElementById( "rcanvas" );
 
-			var bwebgl = document.getElementById( "rwebgl" );
 
-
 
-			document.addEventListener( 'mousemove', onDocumentMouseMove, false );
 
-
 
-			init();
 
-			animate();
 
-
 
-			render_canvas = !has_gl;
 
-			bwebgl.style.display = has_gl ? "inline" : "none";
 
-			bcanvas.className = render_canvas ? "button" : "button inactive";
 
-
 
-			function init() {
 
-
 
-				container = document.getElementById( 'container' );
 
-
 
-				camera = new THREE.PerspectiveCamera( 75, SCREEN_WIDTH / SCREEN_HEIGHT, 1, 100000 );
 
-				camera.position.z = 500;
 
-
 
-				scene = new THREE.Scene();
 
-				scene.background = new THREE.Color( 0xffffff );
 
-
 
-				// GROUND
 
-
 
-				var x = document.createElement( "canvas" );
 
-				var xc = x.getContext("2d");
 
-				x.width = x.height = 128;
 
-				xc.fillStyle = "#fff";
 
-				xc.fillRect(0, 0, 128, 128);
 
-				xc.fillStyle = "#000";
 
-				xc.fillRect(0, 0, 64, 64);
 
-				xc.fillStyle = "#999";
 
-				xc.fillRect(32, 32, 32, 32);
 
-				xc.fillStyle = "#000";
 
-				xc.fillRect(64, 64, 64, 64);
 
-				xc.fillStyle = "#555";
 
-				xc.fillRect(96, 96, 32, 32);
 
-
 
-				var texture = new THREE.CanvasTexture( x );
 
-				texture.repeat.set( 10, 10 );
 
-				texture.wrapS = THREE.RepeatWrapping;
 
-				texture.wrapT = THREE.RepeatWrapping;
 
-
 
-				var xm = new THREE.MeshBasicMaterial( { map: texture } );
 
-
 
-				geometry = new THREE.PlaneBufferGeometry( 100, 100, 15, 10 );
 
-
 
-				mesh = new THREE.Mesh( geometry, xm );
 
-				mesh.position.set( 0, FLOOR, 0 );
 
-				mesh.rotation.x = - Math.PI / 2;
 
-				mesh.scale.set( 10, 10, 10 );
 
-				scene.add( mesh );
 
-
 
-				// LIGHTS
 
-
 
-				var ambient = new THREE.AmbientLight( 0x221100 );
 
-				scene.add( ambient );
 
-
 
-				var directionalLight = new THREE.DirectionalLight( 0xffeedd, 1.5 );
 
-				directionalLight.position.set( 0, -70, 100 ).normalize();
 
-				scene.add( directionalLight );
 
-
 
-				// RENDERER
 
-
 
-				if ( render_gl ) {
 
-
 
-					try {
 
-
 
-						webglRenderer = new THREE.WebGLRenderer();
 
-						webglRenderer.setPixelRatio( window.devicePixelRatio );
 
-						webglRenderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
 
-						webglRenderer.domElement.style.position = "relative";
 
-
 
-						container.appendChild( webglRenderer.domElement );
 
-
 
-						has_gl = 1;
 
-
 
-					}
 
-					catch (e) {
 
-					}
 
-
 
-				}
 
-
 
-				if ( render_canvas ) {
 
-
 
-					canvasRenderer = new THREE.CanvasRenderer();
 
-					canvasRenderer.setPixelRatio( window.devicePixelRatio );
 
-					canvasRenderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
 
-					container.appendChild( canvasRenderer.domElement );
 
-
 
-				}
 
-
 
-				// STATS
 
-
 
-				stats = new Stats();
 
-				container.appendChild( stats.dom );
 
-
 
-				//
 
-
 
-				bcanvas.addEventListener("click", toggleCanvas, false);
 
-				bwebgl.addEventListener("click", toggleWebGL, false);
 
-
 
-				THREE.Loader.Handlers.add( /\.dds$/i, new THREE.DDSLoader() );
 
-
 
-				var loader = new THREE.JSONLoader();
 
-				var callbackMale = function ( geometry, materials ) { createScene( geometry, materials, 90, FLOOR, 50, 105 ) };
 
-				var callbackFemale = function ( geometry, materials ) { createScene( geometry, materials, -80, FLOOR, 50, 0 ) };
 
-
 
-				loader.load( "models/json/male02/Male02_dds.json", callbackMale );
 
-				loader.load( "models/json/female02/Female02_slim.json", callbackFemale );
 
-
 
-				//
 
-
 
-				window.addEventListener( 'resize', onWindowResize, false );
 
-
 
-			}
 
-
 
-			function onWindowResize() {
 
-
 
-				windowHalfX = window.innerWidth / 2;
 
-				windowHalfY = window.innerHeight / 2;
 
-
 
-				camera.aspect = window.innerWidth / window.innerHeight;
 
-				camera.updateProjectionMatrix();
 
-
 
-				if ( webglRenderer ) webglRenderer.setSize( window.innerWidth, window.innerHeight );
 
-				if ( canvasRenderer ) canvasRenderer.setSize( window.innerWidth, window.innerHeight );
 
-
 
-			}
 
-
 
-			function createScene( geometry, materials, x, y, z, b ) {
 
-
 
-				zmesh = new THREE.Mesh( geometry, materials );
 
-				zmesh.position.set( x, y, z );
 
-				zmesh.scale.set( 3, 3, 3 );
 
-				scene.add( zmesh );
 
-
 
-				createMaterialsPalette( materials, 100, b );
 
-
 
-			}
 
-
 
-			function createMaterialsPalette( materials, size, bottom ) {
 
-
 
-				for ( var i = 0; i < materials.length; i ++ ) {
 
-
 
-					// material
 
-
 
-					mesh = new THREE.Mesh( new THREE.PlaneBufferGeometry( size, size ), materials[i] );
 
-					mesh.position.x = i * (size + 5) - ( ( materials.length - 1 )* ( size + 5 )/2);
 
-					mesh.position.y = FLOOR + size/2 + bottom;
 
-					mesh.position.z = -100;
 
-					scene.add( mesh );
 
-
 
-					// number
 
-
 
-					var x = document.createElement( "canvas" );
 
-					var xc = x.getContext( "2d" );
 
-					x.width = x.height = 128;
 
-					xc.shadowColor = "#000";
 
-					xc.shadowBlur = 7;
 
-					xc.fillStyle = "orange";
 
-					xc.font = "50pt arial bold";
 
-					xc.fillText( i, 10, 64 );
 
-
 
-					var xm = new THREE.MeshBasicMaterial( { map: new THREE.CanvasTexture( x ), transparent: true } );
 
-
 
-					mesh = new THREE.Mesh( new THREE.PlaneBufferGeometry( size, size ), xm );
 
-					mesh.position.x = i * ( size + 5 ) - ( ( materials.length - 1 )* ( size + 5 )/2);
 
-					mesh.position.y = FLOOR + size/2 + bottom;
 
-					mesh.position.z = -99;
 
-					scene.add( mesh );
 
-
 
-				}
 
-
 
-			}
 
-
 
-			function onDocumentMouseMove(event) {
 
-
 
-				mouseX = ( event.clientX - windowHalfX );
 
-				mouseY = ( event.clientY - windowHalfY );
 
-
 
-			}
 
-
 
-			//
 
-
 
-			function animate() {
 
-
 
-				requestAnimationFrame( animate );
 
-
 
-				render();
 
-				stats.update();
 
-
 
-			}
 
-
 
-			function render() {
 
-
 
-				camera.position.x += ( mouseX - camera.position.x ) * .05;
 
-				camera.position.y += ( - mouseY - camera.position.y ) * .05;
 
-
 
-				camera.lookAt( scene.position );
 
-
 
-				if ( render_gl && has_gl ) webglRenderer.render( scene, camera );
 
-				if ( render_canvas ) canvasRenderer.render( scene, camera );
 
-
 
-			}
 
-
 
-			function toggleCanvas() {
 
-
 
-				render_canvas = !render_canvas;
 
-				bcanvas.className = render_canvas ? "button" : "button inactive";
 
-
 
-				render_gl = !render_canvas;
 
-				bwebgl.className = render_gl ? "button" : "button inactive";
 
-
 
-				if( has_gl )
 
-					webglRenderer.domElement.style.display = render_gl ? "block" : "none";
 
-
 
-				canvasRenderer.domElement.style.display = render_canvas ? "block" : "none";
 
-
 
-			}
 
-
 
-			function toggleWebGL() {
 
-
 
-				render_gl = !render_gl;
 
-				bwebgl.className = render_gl ? "button" : "button inactive";
 
-
 
-				render_canvas = !render_gl;
 
-				bcanvas.className = render_canvas ? "button" : "button inactive";
 
-
 
-				if( has_gl )
 
-					webglRenderer.domElement.style.display = render_gl ? "block" : "none";
 
-
 
-				canvasRenderer.domElement.style.display = render_canvas ? "block" : "none";
 
-
 
-			}
 
-		</script>
 
-
 
-	</body>
 
-</html>

Энэ ялгаанд хэт олон файл өөрчлөгдсөн тул зарим файлыг харуулаагүй болно