|
|
@@ -6,17 +6,38 @@
|
|
|
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
|
|
|
<style>
|
|
|
body {
|
|
|
+ color: #ffffff;
|
|
|
font-family: Monospace;
|
|
|
- background-color: #f0f0f0;
|
|
|
+ font-size: 13px;
|
|
|
+ text-align: center;
|
|
|
+ font-weight: bold;
|
|
|
+ background-color: #000000;
|
|
|
margin: 0px;
|
|
|
overflow: hidden;
|
|
|
}
|
|
|
+
|
|
|
+ #info {
|
|
|
+ position: absolute;
|
|
|
+ top: 0px;
|
|
|
+ width: 100%;
|
|
|
+ padding: 5px;
|
|
|
+ }
|
|
|
+
|
|
|
+ a {
|
|
|
+ color: #ffffff;
|
|
|
+ }
|
|
|
</style>
|
|
|
</head>
|
|
|
|
|
|
<body>
|
|
|
|
|
|
+ <div id="container"></div>
|
|
|
+ <div id="info">
|
|
|
+ <a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> - Shapes Extrusion via Geo Data
|
|
|
+ </div>
|
|
|
+
|
|
|
<script type="text/javascript" src="../build/three.js"></script>
|
|
|
+ <script src="js/controls/OrbitControls.js"></script>
|
|
|
<script src="js/libs/stats.min.js"></script>
|
|
|
|
|
|
<script>
|
|
|
@@ -259,124 +280,117 @@
|
|
|
}
|
|
|
|
|
|
var $d3g = {};
|
|
|
- d3threeD($d3g);
|
|
|
+ d3threeD( $d3g );
|
|
|
|
|
|
/// Part from g0v/twgeojson
|
|
|
/// Graphic Engine and Geo Data Init Functions
|
|
|
|
|
|
var addGeoObject = function( group, svgObject ) {
|
|
|
- var i,j, len, len1;
|
|
|
- var path, mesh, color, material, amount, simpleShapes, simpleShape, shape3d, x, toAdd, results = [];
|
|
|
- var thePaths = svgObject.paths;
|
|
|
- var theAmounts = svgObject.amounts;
|
|
|
- var theColors = svgObject.colors;
|
|
|
- var theCenter = svgObject.center;
|
|
|
-
|
|
|
- len = thePaths.length;
|
|
|
- for (i = 0; i < len; ++i) {
|
|
|
- path = $d3g.transformSVGPath( thePaths[i] );
|
|
|
- color = new THREE.Color( theColors[i] );
|
|
|
- material = new THREE.MeshLambertMaterial({
|
|
|
- color: color,
|
|
|
- emissive: color
|
|
|
- });
|
|
|
- amount = theAmounts[i];
|
|
|
- simpleShapes = path.toShapes(true);
|
|
|
- len1 = simpleShapes.length;
|
|
|
- for (j = 0; j < len1; ++j) {
|
|
|
- simpleShape = simpleShapes[j];
|
|
|
- shape3d = simpleShape.extrude({
|
|
|
- amount: amount,
|
|
|
- bevelEnabled: false
|
|
|
- });
|
|
|
- mesh = new THREE.Mesh(shape3d, material);
|
|
|
- mesh.rotation.x = Math.PI;
|
|
|
- mesh.translateZ( - amount - 1);
|
|
|
- mesh.translateX( - theCenter.x);
|
|
|
- mesh.translateY( - theCenter.y);
|
|
|
- group.add(mesh);
|
|
|
- }
|
|
|
- }
|
|
|
- };
|
|
|
|
|
|
- // Main
|
|
|
+ var paths = svgObject.paths;
|
|
|
+ var amounts = svgObject.amounts;
|
|
|
+ var colors = svgObject.colors;
|
|
|
+ var center = svgObject.center;
|
|
|
|
|
|
- var renderer, stats;
|
|
|
- var scene, camera, group;
|
|
|
+ for ( var i = 0; i < paths.length; i ++ ) {
|
|
|
|
|
|
- var targetRotation = 0;
|
|
|
- var targetRotationOnMouseDown = 0;
|
|
|
+ var path = $d3g.transformSVGPath( paths[ i ] );
|
|
|
+ var color = new THREE.Color( colors[ i ] );
|
|
|
+ var material = new THREE.MeshLambertMaterial( {
|
|
|
+ color: color,
|
|
|
+ emissive: color
|
|
|
+ } );
|
|
|
+ var amount = amounts[ i ];
|
|
|
+ var simpleShapes = path.toShapes( true );
|
|
|
|
|
|
- var mouseX = 0;
|
|
|
- var mouseXOnMouseDown = 0;
|
|
|
+ for ( var j = 0; j < simpleShapes.length; j ++ ) {
|
|
|
|
|
|
- var windowHalfX = window.innerWidth / 2;
|
|
|
- var windowHalfY = window.innerHeight / 2;
|
|
|
+ simpleShape = simpleShapes[ j ];
|
|
|
+ var shape3d = new THREE.ExtrudeBufferGeometry( simpleShape, {
|
|
|
+ amount: amount,
|
|
|
+ bevelEnabled: false
|
|
|
+ } );
|
|
|
|
|
|
- var container = document.createElement( 'div' );
|
|
|
- document.body.appendChild( container );
|
|
|
+ var mesh = new THREE.Mesh( shape3d, material );
|
|
|
+ mesh.rotation.x = Math.PI;
|
|
|
+ mesh.translateZ( - amount - 1 );
|
|
|
+ mesh.translateX( - center.x );
|
|
|
+ mesh.translateY( - center.y );
|
|
|
|
|
|
- var info = document.createElement( 'div' );
|
|
|
- info.style.position = 'absolute';
|
|
|
- info.style.top = '10px';
|
|
|
- info.style.width = '100%';
|
|
|
- info.style.textAlign = 'center';
|
|
|
- info.innerHTML = 'Shapes Extrusion via Geo Data<br/>Drag to spin';
|
|
|
- container.appendChild( info );
|
|
|
+ group.add( mesh );
|
|
|
|
|
|
- init();
|
|
|
+ }
|
|
|
|
|
|
- container.appendChild( renderer.domElement );
|
|
|
+ }
|
|
|
|
|
|
- stats = new Stats();
|
|
|
- container.appendChild( stats.dom );
|
|
|
+ };
|
|
|
|
|
|
- document.addEventListener( 'mousedown', onDocumentMouseDown, false );
|
|
|
- document.addEventListener( 'touchstart', onDocumentTouchStart, false );
|
|
|
- document.addEventListener( 'touchmove', onDocumentTouchMove, false );
|
|
|
- window.addEventListener( 'resize', onWindowResize, false );
|
|
|
+ var renderer, stats, scene, camera;
|
|
|
|
|
|
+ init();
|
|
|
animate();
|
|
|
|
|
|
//
|
|
|
|
|
|
function init() {
|
|
|
|
|
|
- /// Global : renderer
|
|
|
- renderer = new THREE.WebGLRenderer( { antialias: true } );
|
|
|
- renderer.setPixelRatio( window.devicePixelRatio );
|
|
|
- renderer.setSize( window.innerWidth, window.innerHeight );
|
|
|
+ var container = document.getElementById( 'container' );
|
|
|
+
|
|
|
+ //
|
|
|
|
|
|
- /// Global : scene
|
|
|
scene = new THREE.Scene();
|
|
|
scene.background = new THREE.Color( 0xb0b0b0 );
|
|
|
|
|
|
- /// Global : camera
|
|
|
+ //
|
|
|
+
|
|
|
camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 1, 1000 );
|
|
|
camera.position.set( 0, 0, 200 );
|
|
|
|
|
|
- /// Global : group
|
|
|
- group = new THREE.Group();
|
|
|
+ //
|
|
|
+
|
|
|
+ var group = new THREE.Group();
|
|
|
scene.add( group );
|
|
|
|
|
|
- /// direct light
|
|
|
- var light = new THREE.DirectionalLight( 0x404040 );
|
|
|
- light.position.set( 0.75, 0.75, 1.0 ).normalize();
|
|
|
- scene.add( light );
|
|
|
+ //
|
|
|
+
|
|
|
+ var directionalLight = new THREE.DirectionalLight( 0xffffff, 0.6 );
|
|
|
+ directionalLight.position.set( 0.75, 0.75, 1.0 ).normalize();
|
|
|
+ scene.add( directionalLight );
|
|
|
|
|
|
- /// ambient light
|
|
|
- var ambientLight = new THREE.AmbientLight(0x404040);
|
|
|
+ var ambientLight = new THREE.AmbientLight( 0xcccccc, 0.2 );
|
|
|
scene.add( ambientLight );
|
|
|
|
|
|
- /// backgroup grids
|
|
|
+ //
|
|
|
+
|
|
|
var helper = new THREE.GridHelper( 160, 10 );
|
|
|
helper.rotation.x = Math.PI / 2;
|
|
|
group.add( helper );
|
|
|
|
|
|
- var obj = initSVGObject();
|
|
|
+ //
|
|
|
|
|
|
+ var obj = initSVGObject();
|
|
|
addGeoObject( group, obj );
|
|
|
|
|
|
+ //
|
|
|
+
|
|
|
+ renderer = new THREE.WebGLRenderer( { antialias: true } );
|
|
|
+ renderer.setPixelRatio( window.devicePixelRatio );
|
|
|
+ renderer.setSize( window.innerWidth, window.innerHeight );
|
|
|
+ container.appendChild( renderer.domElement );
|
|
|
+
|
|
|
+ //
|
|
|
+
|
|
|
+ var controls = new THREE.OrbitControls( camera, renderer.domElement );
|
|
|
+
|
|
|
+ //
|
|
|
+
|
|
|
+ stats = new Stats();
|
|
|
+ container.appendChild( stats.dom );
|
|
|
+
|
|
|
+ //
|
|
|
+
|
|
|
+ window.addEventListener( 'resize', onWindowResize, false );
|
|
|
+
|
|
|
}
|
|
|
|
|
|
function initSVGObject() {
|
|
|
@@ -417,93 +431,34 @@
|
|
|
|
|
|
obj.amounts = [ 19, 20, 21 ];
|
|
|
obj.colors = [ 0xC07000, 0xC08000, 0xC0A000 ];
|
|
|
- obj.center = { x:365, y:125 };
|
|
|
+ obj.center = { x: 365, y: 125 };
|
|
|
|
|
|
return obj;
|
|
|
|
|
|
}
|
|
|
|
|
|
- /// Events from extrude shapes example
|
|
|
-
|
|
|
function onWindowResize() {
|
|
|
|
|
|
- windowHalfX = window.innerWidth / 2;
|
|
|
- windowHalfY = window.innerHeight / 2;
|
|
|
-
|
|
|
camera.aspect = window.innerWidth / window.innerHeight;
|
|
|
camera.updateProjectionMatrix();
|
|
|
|
|
|
renderer.setSize( window.innerWidth, window.innerHeight );
|
|
|
- }
|
|
|
|
|
|
- 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;
|
|
|
-
|
|
|
- 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 animate() {
|
|
|
|
|
|
- /// compatibility : http://caniuse.com/requestanimationframe
|
|
|
requestAnimationFrame( animate );
|
|
|
|
|
|
render();
|
|
|
stats.update();
|
|
|
+
|
|
|
}
|
|
|
|
|
|
function render() {
|
|
|
|
|
|
- group.rotation.y += ( targetRotation - group.rotation.y ) * 0.05;
|
|
|
renderer.render( scene, camera );
|
|
|
+
|
|
|
}
|
|
|
|
|
|
</script>
|
Mugen87