Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
​
<!DOCTYPE html>
<html lang="en">
    <head>
        <title>three.js webgl - dashed lines Click & TOUCH ZOOMABLE</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 {
                color: #ffffff;
                font-family:Monospace;
                font-size:13px;
                text-align:center;
                font-weight: bold;
​
                background-color: #000000;
                margin: 0px;
                overflow: hidden;
            }
            #info {
                color: #fff;
                position: absolute;
                top: 0px; width: 100%;
                padding: 5px;
                z-index:100;
            }
​
        </style>
        
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>
        <script src="jquery.zoomooz.min.js"></script>
    </head>
​
    <body>
        <div id="info"><a href="http://threejs.org" target="_blank">three.js</a> - dashed lines example Click & TOUCH ZOOMABLE</div>
        
        <div class="zoomViewport">
            <div class="zoomContainer">
                <div class="zoomTarget" data-targetsize="2.0" data-closeclick="true" id="container"></div>
​
                <div class="zoomTarget" data-targetsize="2.0" data-closeclick="true"  id="container2"></div>
            </div>
        </div>
        <script src="http://mrdoob.github.io/three.js/build/three.min.js"></script>
​
        <script src="http://mrdoob.github.io/three.js/examples/js/geometries/hilbert3D.js"></script>
​
        <script src="http://mrdoob.github.io/three.js/examples/js/Detector.js"></script>
        <script src="http://mrdoob.github.io/three.js/examples/js/libs/stats.min.js"></script>
​
        <script>
​
            if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
​
            var renderer, renderer2, scene, camera, scene2, camera2, stats, stats2;
            var objects = [];
            var objects2 = [];
​
​
            var WIDTH = 0.25*window.innerWidth,
                HEIGHT = 0.25*window.innerHeight;
​
            init();
            animate();
​
            function init() {
​
                camera = new THREE.PerspectiveCamera( 60, WIDTH / HEIGHT, 1, 200 );
                camera.position.z = 150;
​
                scene = new THREE.Scene();
​
                scene.fog = new THREE.Fog( 0x111111, 150, 200 );
                
                root = new THREE.Object3D();
​
                var subdivisions = 6;
                var recursion = 1;
​
                var points = hilbert3D( new THREE.Vector3( 0,0,0 ), 25.0, recursion, 0, 1, 2, 3, 4, 5, 6, 7 );
​
                var spline = new THREE.Spline( points );
                var geometrySpline = new THREE.Geometry();
​
                for ( var i = 0; i < points.length * subdivisions; i ++ ) {
​
                    var index = i / ( points.length * subdivisions );
                    var position = spline.getPoint( index );
​
                    geometrySpline.vertices[ i ] = new THREE.Vector3( position.x, position.y, position.z );
​
                }
​
                var geometryCube = cube( 50 );
​
                geometryCube.computeLineDistances();
                geometrySpline.computeLineDistances();
​
                var object = new THREE.Line( geometrySpline, new THREE.LineDashedMaterial( { color: 0xffffff, dashSize: 1, gapSize: 0.5 } ), THREE.LineStrip );
​
                objects.push( object );
                scene.add( object );                
​
                var object = new THREE.Line( geometryCube, new THREE.LineDashedMaterial( { color: 0xffaa00, dashSize: 3, gapSize: 1, linewidth: 2 } ), THREE.LinePieces );
​
                objects.push( object );
                scene.add( object );
                
​
                //Second object
                camera2 = new THREE.PerspectiveCamera( 60, WIDTH / HEIGHT, 1, 200 );
                camera2.position.z = 150;
​
                scene2 = new THREE.Scene();
​
                scene2.fog = new THREE.Fog( 0x111111, 150, 200 );
​
                root = new THREE.Object3D();
​
                var subdivisions = 6;
                var recursion = 1;
​
                var points = hilbert3D( new THREE.Vector3( 0,0,0 ), 25.0, recursion, 0, 1, 2, 3, 4, 5, 6, 7 );
​
                var spline = new THREE.Spline( points );
                var geometrySpline = new THREE.Geometry();
​
                for ( var i = 0; i < points.length * subdivisions; i ++ ) {
​
                    var index = i / ( points.length * subdivisions );
                    var position = spline.getPoint( index );
​
                    geometrySpline.vertices[ i ] = new THREE.Vector3( position.x, position.y, position.z );
​
                }
​
                var geometryCube = cube( 50 );
​
                geometryCube.computeLineDistances();
                geometrySpline.computeLineDistances();
​
                var object2 = new THREE.Line( geometrySpline, new THREE.LineDashedMaterial( { color: 0xffffff, dashSize: 1, gapSize: 0.5 } ), THREE.LineStrip );
​
                objects2.push( object2 );
                scene2.add( object2 );              
​
                var object2 = new THREE.Line( geometryCube, new THREE.LineDashedMaterial( { color: 0xffaa00, dashSize: 3, gapSize: 1, linewidth: 2 } ), THREE.LinePieces );
​
                objects2.push( object2 );
                scene2.add( object2 );
                
                
​
                renderer = new THREE.WebGLRenderer( { antialias: true } );
                renderer.setClearColor( 0x111111, 1 );
                renderer.setSize( WIDTH, HEIGHT );
​
                var container = document.getElementById( 'container' );
                container.appendChild( renderer.domElement );
                
                renderer2 = new THREE.WebGLRenderer( { antialias: true } );
                renderer2.setClearColor( 0x111111, 1 );
                renderer2.setSize( WIDTH, HEIGHT );
                var container2 = document.getElementById( 'container2' );
                container2.appendChild( renderer2.domElement );
                
                /*stats = new Stats();
                stats.domElement.style.position = 'absolute';
                stats.domElement.style.top = '0px';
                container.appendChild( stats.domElement );
                
                stats2 = new Stats();
                stats2.domElement.style.position = 'absolute';
                stats2.domElement.style.top = '50px';
                container2.appendChild( stats2.domElement );*/
​
                //
​
                //window.addEventListener( 'resize', onWindowResize, false );
​
            }
​
            function cube( size ) {
​
                var h = size * 0.5;
​
                var geometry = new THREE.Geometry();
​
                geometry.vertices.push(
                    new THREE.Vector3( -h, -h, -h ),
                    new THREE.Vector3( -h, h, -h ),
​
                    new THREE.Vector3( -h, h, -h ),
                    new THREE.Vector3( h, h, -h ),
​
                    new THREE.Vector3( h, h, -h ),
                    new THREE.Vector3( h, -h, -h ),
​
                    new THREE.Vector3( h, -h, -h ),
                    new THREE.Vector3( -h, -h, -h ),
​
​
                    new THREE.Vector3( -h, -h, h ),
                    new THREE.Vector3( -h, h, h ),
​
                    new THREE.Vector3( -h, h, h ),
                    new THREE.Vector3( h, h, h ),
​
                    new THREE.Vector3( h, h, h ),
                    new THREE.Vector3( h, -h, h ),
​
                    new THREE.Vector3( h, -h, h ),
                    new THREE.Vector3( -h, -h, h ),
​
                    new THREE.Vector3( -h, -h, -h ),
                    new THREE.Vector3( -h, -h, h ),
​
                    new THREE.Vector3( -h, h, -h ),
                    new THREE.Vector3( -h, h, h ),
​
                    new THREE.Vector3( h, h, -h ),
                    new THREE.Vector3( h, h, h ),
​
                    new THREE.Vector3( h, -h, -h ),
                    new THREE.Vector3( h, -h, h )
                 );
​
                return geometry;
​
            }
​
            function onWindowResize() {
​
                camera.aspect = window.innerWidth / window.innerHeight;
                camera.updateProjectionMatrix();
​
                renderer.setSize( window.innerWidth, window.innerHeight );
                
                renderer2.setSize( window.innerWidth, window.innerHeight );
​
            }
​
            function animate() {
​
                requestAnimationFrame( animate );
​
                render();
                //stats.update();
                //stats2.update();
​
            }
​
            function render() {
​
                var time = Date.now() * 0.001;
​
                for ( var i = 0; i < objects.length; i ++ ) {
​
                    var object = objects[ i ];
​
                    //object.rotation.x = 0.25 * time * ( i%2 == 1 ? 1 : -1);
                    object.rotation.x = 0.25 * time;
                    object.rotation.y = 0.25 * time;
​
                }
​
                for ( var i = 0; i < objects2.length; i ++ ) {
​
                    var object = objects2[ i ];
​
                    //object.rotation.x = 0.25 * time * ( i%2 == 1 ? 1 : -1);
                    object.rotation.x = 0.25 * time;
                    object.rotation.y = 0.25 * time;
​
                }
                
                renderer.render( scene, camera );
                //var scene2 = scene;
                //var camera2 = camera;
                
                renderer2.render( scene2, camera2 );
​
            }
​
    </script>
​
</body>
​
</html>
​
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
ieashtianpro
0viewers