email 3d

jaanga · Oct 15, 2016 · decbd2b · decbd2b
1 parent 1738f6f
commit decbd2b
Show file tree

Hide file tree

Showing 22 changed files with 860 additions and 13 deletions.
diff --git a/core4/pla-placard4/pla-placard4-r2.html b/core4/pla-placard4/pla-placard4-r2.html
@@ -0,0 +1,114 @@
+<!doctype html>
+<html lang=en >
+<head>
+<meta charset=utf-8 >
+<title>Terrain3 Core4 PLA Placard4 R2</title>
+<meta name=viewport content='width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no' >
+<meta name=description content='Core three.js' >
+<meta name=keywords content='WebGL,Three.js,JavaScript,GitHub,FOSS,3D,STEM' >
+<meta name=date content='2016-08-31' >
+</head>
+<body>
+<!--
+<script src=https://mrdoob.github.io/three.js/build/three.min.js ></script>
+<script src=https://mrdoob.github.io/three.js/examples/js/controls/OrbitControls.js ></script>
+<script src=https://mrdoob.github.io/three.js/examples/js/libs/stats.min.js ></script>
+-->
+
+<script src=https://rawgit.com/mrdoob/three.js/dev/build/three.min.js ></script>
+<script src=https://rawgit.com/mrdoob/three.js/dev/examples/js/controls/OrbitControls.js ></script>
+<script src=https://rawgit.com/mrdoob/three.js/dev/examples/js/libs/stats.min.js ></script>
+
+<script src=../../core4/0-def-defaults4/def-defaults4-r1.js ></script>
+<script src=../../core4/0-cor-core4/cor-core4-r1.js ></script>
+<script src=../../core4/thr-threejs4/thr-threejs4-r1.js ></script>
+<script src=../../core4/pla-placard4/pla-placard4-r2.js ></script>
+<script>
+
+//	THR.cameraNear = 1;
+//	THR.cameraFar = 2000;
+
+
+	var ran = Math.random;
+	var flr = Math.floor;
+
+//
+
+	init();
+
+	THR.animate();
+
+	function init() {
+
+		COR.taglineHeader += 'Three.js Howdy! &rarr;' + b;
+
+		COR.initLeftMenu();
+
+		COR.menu.innerHTML =
+
+			COR.getMenuDetailsHeader() +
+
+			COR.getMenuDetailsAbout() +
+
+			COR.getMenuFooter() +
+
+		b;
+
+		if ( window.self !== window.top ) { hamburger.style.left = '0px'; }
+
+		window.addEventListener( 'keyup', THR.onKeyUp, false );
+
+
+		THR.getThreeJS();
+
+		THR.renderer.domElement.addEventListener( 'onload', moreThreejsInits(), false );
+
+	}
+
+
+	function moreThreejsInits() {
+
+		var geometry, material
+
+//		THR.updateCamera = true;
+
+		geometry = new THREE.BoxGeometry( 360, 2, 180 );
+		material = new THREE.MeshNormalMaterial();
+
+		THR.groundPlane = new THREE.Mesh( geometry, material );
+		THR.groundPlane.position.set( 0, -31, 0 );
+		THR.scene.add( THR.groundPlane );
+
+		THR.gridHelper = new THREE.GridHelper( 90, 10 );
+		THR.gridHelper.position.set( 0, -30, 0 );
+		THR.scene.add( THR.gridHelper );
+
+		THR.axisHelper = new THREE.AxisHelper( 90 );
+		THR.scene.add( THR.axisHelper );
+
+		THR.controls.autoRotate = true;
+
+//		hk = convertPosition( 22.3964, 114.1095, 9000  );
+
+		placard = PLA.drawSprite( 'Howdy, world!', 0.1 , 120, 0, 20, 0 ) 
+		THR.scene.add( placard );
+
+		drawThings( 50 );
+	};
+
+
+	function drawThings( length ) {
+
+		for ( var i = 0; i < length; i++ ) {
+
+			sprite = PLA.drawSprite( 'Howdy, world! #' + i, 0.1 , flr( 255 * ran() ), 0, 50 * ran() + 10, 0 );
+			sprite.position.set( 300 * ran() - 150, 0, 200 * ran() - 100 ); 
+			THR.scene.add( sprite );
+
+		}
+
+	}
+
+</script>
+</body>
+</html>
diff --git a/core4/pla-placard4/pla-placard4-r2.js b/core4/pla-placard4/pla-placard4-r2.js
@@ -0,0 +1,87 @@
+// 2016-10-14 ~ https://github.com/jaanga/jaanga.github.io/tree/master/cookbook-threejs/examples/placards
+
+
+	var PLA = PLA || {};
+
+// 'Sprites' are images that always face toward the camera
+
+	PLA.drawSprite = function( text, scale, color, x, y, z ) {
+
+
+		var placard = new THREE.Object3D();
+		var v = function( x, y, z ){ return new THREE.Vector3( x, y, z ); };
+
+		var texture = canvasMultilineText( text, { backgroundColor: color }   );
+		var spriteMaterial = new THREE.SpriteMaterial( { map: texture, opacity: 0.9, transparent: true } );
+		var sprite = new THREE.Sprite( spriteMaterial );
+		sprite.position.set( x, y, z ) ;
+		sprite.scale.set( scale * texture.image.width, scale * texture.image.height );
+
+		var geometry = new THREE.Geometry();
+		geometry.vertices = [ v( 0, 0, 0 ),  v( x, y, z ) ];
+		var material = new THREE.LineBasicMaterial( { color: 0xaaaaaa, linewidth: 3 } );
+		var line = new THREE.Line( geometry, material );
+
+		placard.add( sprite, line );
+
+		return placard;
+
+
+		function canvasMultilineText( textArray, parameters ) {
+
+			var parameters = parameters || {} ;
+
+			var canvas = document.createElement( 'canvas' );
+			var context = canvas.getContext( '2d' );
+
+			var width = parameters.width ? parameters.width : 0;
+			var font = parameters.font ? parameters.font : '48px monospace';
+			var color = parameters.backgroundColor ? parameters.backgroundColor : 120 ;
+
+			if ( typeof textArray === 'string' ) textArray = [ textArray ];
+
+			context.font = font;
+
+			for ( var i = 0; i < textArray.length; i++) {
+
+				width = context.measureText( textArray[ i ] ).width > width ? context.measureText( textArray[ i ] ).width : width;
+
+			}
+
+			canvas.width = width + 20;
+			canvas.height =  parameters.height ? parameters.height : textArray.length * 65;
+
+			context.fillStyle = 'hsl( ' + color + ', 80%, 50% )' ;
+			context.fillRect( 0, 0, canvas.width, canvas.height);
+
+			context.lineWidth = 1 ;
+			context.strokeStyle = '#000';
+			context.strokeRect( 0, 0, canvas.width, canvas.height );
+
+			context.fillStyle = '#000' ;
+			context.font = font;
+
+			for ( i = 0; i < textArray.length; i++) {
+
+				context.fillText( textArray[ i ], 10, 48  + i * 60 );
+
+			}
+
+			var texture = new THREE.Texture( canvas );
+			texture.minFilter = texture.magFilter = THREE.NearestFilter;
+			texture.needsUpdate = true;
+
+			return texture;
+
+		}
+
+	};
+
+
+	PLA.convertPosition = function( lat, lon, radius ) {
+
+		var rc = radius * Math.cos( lat * d2r );
+		return v( rc * Math.cos( - lon * d2r ), radius * Math.sin( lat * d2r ), rc * Math.sin( - lon * d2r) );
+
+	};
+