javascript
/
three.js
kopia lustrzana https://github.com/tazdij/three.js.git


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399
							<!DOCTYPE HTML>
<html lang="en">
	<head>
		<title>three.js - geometry - C4D exporter colour test</title>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/>
		<style type="text/css">
			body {
				font-family: Monospace;
				background-color: #252525;
				color: #FFFFFF;
				margin: 0px;
				overflow: hidden;
			}
			a{
				color: #FE8101;
			}
				#colour-picker {
					margin:auto;
					position:absolute;
					bottom:10px;
					left:50%;
					margin-left:-400px;
					width:800px;
					height:50px;
					border:1px solid #000;
				}
				#colour-picker #left, #colour-picker #right {
					width:50px;
					height:50px;
					line-height:50px;
					text-align:center;
					moz-user-select:none;
					webkit-user-select:none;
					user-select:none;
					cursor:pointer;
				}
				#colour-picker #left {
					position:absolute;
					left:0px;
					border-right:1px solid #000;
				}

				#colour-picker #right {
					position:absolute;
					right:0px;
					border-left:1px solid #000;
				}
				#colour-picker #colours-container {
					overflow:hidden;
					width:700px;
					height:50px;
					position:absolute;
					left:51px;
				}
				#colour-picker #colours-scroller {
				}
				#colour-picker .colours {
					float:left;
				}
				#colour-picker .colours div {
					width:174px;
					border-right:1px solid #000;
					height:50px;
					float:left;
					background-color:#ccc;
				}
				#colour-picker .colours div:last-child {
					border-right:1px solid #fff;
				}
		</style>
	</head>
	<body>
		<!--<Colour picker>-->
		<div id="colour-picker">
			<div id="left">
				&lt;
			</div>
			<div id="colours-container">
				<div id="colours-scroller">
				</div>
			</div>
			<div id="right">
				&gt;
			</div>
		</div>
		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>	
		<script>
			//Big thanks to Max Novakovic for the color picker! woo hoo!
			//for more handy js for Max's projects on github: https://github.com/betamax
		
			var colours = [{"c3":"#F0EDE8","c2":"#E3E4AA","c1":"#959684","c4":"#070707"},{"c3":"#4B4B4B","c2":"#010101","c1":"#020202","c4":"#252525"},{"c3":"#FDFDFD","c2":"#FC0000","c1":"#010101","c4":"#99D0EE"},{"c3":"#FFFFC9","c2":"#FBFD04","c1":"#FF0500","c4":"#111111"},{"c3":"#FFFFFF","c2":"#811881","c1":"#111111","c4":"#F60081"},{"c3":"#FFC306","c2":"#040301","c1":"#5D9412","c4":"#0AA0C3"},{"c3":"#111111","c2":"#C8EBF1","c1":"#FC0007","c4":"#FE8101"},{"c3":"#5A065C","c2":"#E6057B","c1":"#FB9205","c4":"#FAFF02"},{"c3":"#F70084","c2":"#7BC20C","c1":"#02A4CB","c4":"#030301"},{"c3":"#FDFDFD","c2":"#FF0700","c1":"#111111","c4":"#CB0305"},{"c3":"#FBFF04","c2":"#8BD9E5","c1":"#F1017E","c4":"#111111"},{"c3":"#FF3F08","c2":"#EF0276","c1":"#029FC8","c4":"#080705"},{"c3":"#FEFEFE","c2":"#FF0305","c1":"#A5D1EE","c4":"#0B3098"},{"c3":"#FFFFFF","c2":"#CEECF6","c1":"#FCFD09","c4":"#020202"}];
			function createColourPicker(colours){

				var container_width = 700,
				total_length = colours.length * container_width;

				$("#colours-scroller").css("width", total_length + "px");

				for(var i = 0, j = colours.length; i < j; i++) {
					var container = $("<div />"),
					c1 = $("<div />"),
					c2 = $("<div />"),
					c3 = $("<div />"),
					c4 = $("<div />");

					container.addClass("colours");

					c1.css("background-color", colours[i].c1.replace("0x", "#"));
					c2.css("background-color", colours[i].c2.replace("0x", "#"));
					c3.css("background-color", colours[i].c3.replace("0x", "#"));
					c4.css("background-color", colours[i].c4.replace("0x", "#"));

					container.append(c1);
					container.append(c2);
					container.append(c3);
					container.append(c4);

					$("#colours-scroller").append(container);

				}

				$("#right").unbind("click");
				$("#right").bind("click", function(e){
					$("#colours-scroller").stop(true, true);
					var current_margin = parseInt($("#colours-scroller").css("margin-left").replace("px", ""));
					if(Math.abs(current_margin-container_width) != total_length) {
						$("#colours-scroller").animate({"margin-left": current_margin-container_width+"px"});
					}
				});

				$("#left").unbind("click");
				$("#left").bind("click", function(e){
					$("#colours-scroller").stop(true, true);
					var current_margin = parseInt($("#colours-scroller").css("margin-left").replace("px", ""));
					if(current_margin+container_width != container_width) {
						$("#colours-scroller").animate({"margin-left": current_margin+container_width+"px"});
					}
				});

				$(".colours").unbind("click");
				$(".colours").bind("click", function(e){
					var divs = $(this).children("div"),
					c1 = $(divs[0]).css("background-color"),
					c2 = $(divs[1]).css("background-color"),
					c3 = $(divs[2]).css("background-color"),
					c4 = $(divs[3]).css("background-color");

					// console.log("c1: " + rgb2hex(c1), "c2: " + rgb2hex(c2), "c3: " + rgb2hex(c3), "c4: " + rgb2hex(c4))
					
					for(var i = 0 ; i < geoms.length ; i++){
						
						if(geoms[i].colors['c1'] != undefined) geoms[i].colors['c1'] =  parseInt(rgb2hex(c1));
						if(geoms[i].colors['c2'] != undefined) geoms[i].colors['c2'] =  parseInt(rgb2hex(c2));
						if(geoms[i].colors['c3'] != undefined) geoms[i].colors['c3'] =  parseInt(rgb2hex(c3));
						if(geoms[i].colors['c4'] != undefined) geoms[i].colors['c4'] =  parseInt(rgb2hex(c4));
						geoms[i].autoColor();
					}
					
				});
				
				function rgb2hex(rgbString){
					var parts = rgbString
					        .match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/)
					;
					// parts now should be ["rgb(0, 70, 255", "0", "70", "255"]

					delete (parts[0]);
					for (var i = 1; i <= 3; ++i) {
					    parts[i] = parseInt(parts[i]).toString(16);
					    if (parts[i].length == 1) parts[i] = '0' + parts[i];
					}
					var hexString = '0x'+parts.join('');
					return hexString;
				}

			}

			$(function(){
				createColourPicker(colours);
			});
		</script>
		<!--</Colour picker>-->
			
		<script type="text/javascript" src="../build/Three.js"></script>

		<script type="text/javascript" src="geometry/BotUpperBody.js"></script>
		<script type="text/javascript" src="geometry/BotLowerBody.js"></script>
		<script type="text/javascript" src="geometry/BotArmL.js"></script>
		<script type="text/javascript" src="geometry/BotArmR.js"></script>
		<script type="text/javascript" src="js/Stats.js"></script>

		<script type="text/javascript">
	//*
			var SCREEN_WIDTH = window.innerWidth;
			var SCREEN_HEIGHT = window.innerHeight;

			var container;
			var stats;

			var camera;
			var scene;
			var renderer;
			
			var model,armR,armL,upperBody;
			var geoms = [];
			var armLDist,armRDist;
			
			var targetRotation = 0;
			var targetRotationOnMouseDown = 0;

			var mouseX = 0;
			var mouseXOnMouseDown = 0;
			var mouseY = 0;

			var windowHalfX = window.innerWidth / 2;
			var windowHalfY = window.innerHeight / 2;

			init();
			setInterval(loop, 1000/60);

			function init() {

				container = document.createElement('div');
				document.body.appendChild(container);

				var info = document.createElement('div');
				info.style.position = 'absolute';
				info.style.top = '10px';
				info.style.width = '100%';
				info.style.textAlign = 'center';
				info.innerHTML = '<h3>Original design by <a href="http://www.deltainc.nl/">deltaInc</a></h3><br />Color Picker by <a href="http://maxnov.com/">Max Novakovic</a><br />Drag to spin';
				container.appendChild(info);

				camera = new THREE.Camera( 70, SCREEN_WIDTH / SCREEN_HEIGHT, 1, 10000 );
				camera.position.y = -200;
				camera.position.z = 500;
				camera.target.position.y = -250;

				scene = new THREE.Scene();

				//model
				var upperGeom = new BotUpperBody();
				upperBody = new THREE.Mesh( upperGeom, new THREE.MeshFaceMaterial());
				var armLGeom = new BotArmL();
				armL = new THREE.Mesh( armLGeom, new THREE.MeshFaceMaterial());
				var armRGeom = new BotArmR();
				armR = new THREE.Mesh( armRGeom, new THREE.MeshFaceMaterial());
				lowerGeom = new BotLowerBody();
				model = new THREE.Mesh( lowerGeom, new THREE.MeshFaceMaterial());
				lowerGeom.autoColor();
				armRGeom.autoColor();
				armLGeom.autoColor();
				upperGeom.autoColor();
				geoms = [lowerGeom,upperGeom,armLGeom,armRGeom];
				
				initModel(model,lowerGeom);
				initModel(upperBody,upperGeom);
				initModel(armL,armLGeom);
				initModel(armR,armRGeom);
				
				armRDist = upperBody.position.distanceTo(armR.position) * .73;
				armLDist = upperBody.position.distanceTo(armL.position) * .73;
				
				scene.addObject(model);
				scene.addObject(upperBody);
				scene.addObject(armR);
				scene.addObject(armL);

				renderer = new THREE.CanvasRenderer();
				renderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );

				container.appendChild( renderer.domElement );

				stats = new Stats();
				stats.domElement.style.position = 'absolute';
				stats.domElement.style.top = '0px';
				container.appendChild( stats.domElement );

				document.addEventListener( 'mousedown', onDocumentMouseDown, false );
				document.addEventListener( 'touchstart', onDocumentTouchStart, false );
				document.addEventListener( 'touchmove', onDocumentTouchMove, false );
			}

			//

			function onDocumentMouseDown( event ) {

				event.preventDefault();

				document.addEventListener( 'mousemove', onDocumentMouseMove, false );
				document.addEventListener( 'mouseup', onDocumentMouseUp, false );
				document.addEventListener( 'mouseout', onDocumentMouseOut, false );

				mouseXOnMouseDown = event.clientX - windowHalfX;
				targetRotationOnMouseDown = targetRotation;
			}

			function onDocumentMouseMove( event ) {

				mouseX = event.clientX - windowHalfX;
				mouseY = event.clientY - windowHalfY;

				targetRotation = targetRotationOnMouseDown + ( mouseX - mouseXOnMouseDown ) * 0.02;
			}

			function onDocumentMouseUp( event ) {

				document.removeEventListener( 'mousemove', onDocumentMouseMove, false );
				document.removeEventListener( 'mouseup', onDocumentMouseUp, false );
				document.removeEventListener( 'mouseout', onDocumentMouseOut, false );
			}

			function onDocumentMouseOut( event ) {

				document.removeEventListener( 'mousemove', onDocumentMouseMove, false );
				document.removeEventListener( 'mouseup', onDocumentMouseUp, false );
				document.removeEventListener( 'mouseout', onDocumentMouseOut, false );
			}

			function onDocumentTouchStart( event ) {

				if ( event.touches.length == 1 ) {

					event.preventDefault();

					mouseXOnMouseDown = event.touches[ 0 ].pageX - windowHalfX;
					targetRotationOnMouseDown = targetRotation;

				}
			}

			function onDocumentTouchMove( event ) {

				if ( event.touches.length == 1 ) {

					event.preventDefault();

					mouseX = event.touches[ 0 ].pageX - windowHalfX;
					targetRotation = targetRotationOnMouseDown + ( mouseX - mouseXOnMouseDown ) * 0.05;

				}
			}

			//

			function loop() {
				model.rotation.z += ( targetRotation - model.rotation.z ) * 0.025;
				//armL.rotation.x += ( targetRotation - model.rotation.z ) * 0.01;
				//armL.rotation.x -= ( targetRotation - model.rotation.z ) * 0.01;
				upperBody.rotation.y = -model.rotation.z * 0.5;
				
				armL.rotation.y = armR.rotation.y = upperBody.rotation.y;
				
				/*
				armL.position.x = upperBody.position.x + (Math.cos(upperBody.rotation.y) * armRDist);
				armL.position.z = upperBody.position.z + (Math.sin(upperBody.rotation.y) * armRDist);
				//armL.rotation.x = upperBody.rotation.y * .005;
				armL.rotation.y = upperBody.rotation.y;
				//armR.rotation.x -= 0.005;
			
				
				armR.position.x = upperBody.position.x - (Math.cos(upperBody.rotation.y) * armLDist);
				armR.position.z = upperBody.position.z - (Math.sin(upperBody.rotation.y) * armLDist);
				//armR.rotation.x = upperBody.rotation.y * .005;//gimbal lock ?
				armR.rotation.y = upperBody.rotation.y;
				//*/
				renderer.render(scene, camera);
				stats.update();
			}
			function initBitmapMaterial(url) {

				texture = document.createElement( 'canvas' );
				texture.width = 128;
				texture.height = 128;

				material = new THREE.MeshBitmapMaterial( texture );

				var temp = new Image();
				temp.onload = function () {
					material.bitmap = this;
					renderer.render(scene, camera);
				};
				temp.src = url;
			}
			function initModel(model,geom){
				geom.autoColor();
				model.position = geom.getPosition();
				model.rotation = geom.getRotation();
				model.rotation.x += Math.PI;
				// model.rotation.y += Math.PI;
				// model.rotation.z += Math.PI;
				model.scale    = geom.getScale();
			}

		</script>

	</body>
</html>