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>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  
  <style>
    body {
      
      background-color: #111111;
      }
    
    #btn-start {
          position: absolute;
    left: 80px;
    width: 100x;
    height: 120px;
    border: 3px solid #8AC007;
    }
    
  </style>
  
</head>
<body>
  
  
        <button type="button" id="btn-start">Start / Stop</button>
  
  
  
  
  
  
        <!-- include javascript files -->
        <script src="https://cdn.rawgit.com/mrdoob/three.js/master/build/three.js"></script>
        <script src="https://cdn.rawgit.com/mrdoob/three.js/master/examples/js/renderers/Projector.js"></script>
        <script src="https://cdn.rawgit.com/mrdoob/three.js/master/examples/js/renderers/CanvasRenderer.js"></script>
        <script src="https://cdn.rawgit.com/mrdoob/three.js/master/examples/js/libs/stats.min.js"></script>
        <script src="https://cdn.rawgit.com/mrdoob/three.js/master/examples/js/controls/OrbitControls.js"></script>
        
        <script>
​
            var container, stats;
            var camera, scene, renderer;
            var cube, plane;
            var targetRotation = 0;
            var targetRotationOnMouseDown = 0;
            var mouseX = 0;
            var mouseXOnMouseDown = 0;
            var windowHalfX = window.innerWidth / 2;
            var windowHalfY = window.innerHeight / 2;
            var rotame = 0;
          
            init();
            animate();
​
            function init() {
                // TAREA:
                // Agregar un botón comutador, parar / iniciar la autorotacion             
                // que la "sombra" sea color rojo, sin opacidad
                // que el cubo sea traslucido (40%)
                // poner una imagen de background (por css) a todo el documento
              
​
                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 = 'Drag to spin the cube';
                container.appendChild( info );
​
                camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 1000 );
                camera.position.y = 150;
                camera.position.z = 500;
​
                scene = new THREE.Scene();
                scene.background = new THREE.Color( 0xf0f0f0 );
​
​
                // Cube
                
                // creo una geometria
                var geometry = new THREE.BoxGeometry( 200, 200, 200 );
​
                for ( var i = 0; i < geometry.faces.length; i += 2 ) {
                    var hex = Math.random() * 0xffffff;
                    geometry.faces[ i ].color.setHex( hex );
                    geometry.faces[ i + 1 ].color.setHex( hex );
​
                }
              
                // creo un material (caracteristicas) para el cubo
                var material = new THREE.MeshBasicMaterial( { vertexColors: THREE.FaceColors, overdraw: 0.5, opacity: 0.9, transparent: true } );
                 
                console.log("material del cubo", material)
              
              
                cube = new THREE.Mesh( geometry, material );
                cube.position.y = 150;
                scene.add( cube );
                
                // creo la geometria del plano (sombra)
                var geometry = new THREE.PlaneBufferGeometry( 200, 200 );
                geometry.rotateX( - Math.PI / 2 );
              
                // creo un material para cada cara (caracteristicas)
                var material = new THREE.MeshBasicMaterial( { color: 0xe0e0e0, overdraw: 0.5 } );
                console.log("material del plano", material)
                
                // creo un objeto con la eometria y el material
                plane = new THREE.Mesh( geometry, material );
                scene.add( plane );
​
                renderer = new THREE.CanvasRenderer();
                renderer.setPixelRatio( window.devicePixelRatio );
                renderer.setSize( window.innerWidth, window.innerHeight );
                container.appendChild( renderer.domElement );
​
                stats = new Stats();
                container.appendChild( stats.dom );
              
              
                // suscripcion a los manejadores de eventos
                document.addEventListener( 'mousedown', onDocumentMouseDown, false );
                document.addEventListener( 'touchstart', onDocumentTouchStart, false );
                document.addEventListener( 'touchmove', onDocumentTouchMove, false );
                window.addEventListener( 'resize', onWindowResize, false );
​
            }
​
            // manejador del evento: al cambiar tamaño de la ventana 
            function onWindowResize() {
                windowHalfX = window.innerWidth / 2;
                windowHalfY = window.innerHeight / 2;
​
                camera.aspect = window.innerWidth / window.innerHeight;
                camera.updateProjectionMatrix();
​
                renderer.setSize( window.innerWidth, window.innerHeight );
            }
​
            
          
            // manejador del evento
            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;
​
            }
          
            // manejador del evento
            function onDocumentMouseMove( event ) {
                mouseX = event.clientX - windowHalfX;
                targetRotation = targetRotationOnMouseDown + ( mouseX - mouseXOnMouseDown ) * 0.02;
            }
          
            // manejador del evento
            function onDocumentMouseUp( event ) {
                document.removeEventListener( 'mousemove', onDocumentMouseMove, false );
                document.removeEventListener( 'mouseup', onDocumentMouseUp, false );
                document.removeEventListener( 'mouseout', onDocumentMouseOut, false );
            }
          
            // manejador del evento
            function onDocumentMouseOut( event ) {
                document.removeEventListener( 'mousemove', onDocumentMouseMove, false );
                document.removeEventListener( 'mouseup', onDocumentMouseUp, false );
                document.removeEventListener( 'mouseout', onDocumentMouseOut, false );
            }
          
            // manejador del evento
            function onDocumentTouchStart( event ) {
​
                if ( event.touches.length === 1 ) {
​
                    event.preventDefault();
​
                    mouseXOnMouseDown = event.touches[ 0 ].pageX - windowHalfX;
                    targetRotationOnMouseDown = targetRotation;
​
                }
​
            }
            
          
            // manejador del evento
            function onDocumentTouchMove( event ) {
​
                if ( event.touches.length === 1 ) {
​
                    event.preventDefault();
​
                    mouseX = event.touches[ 0 ].pageX - windowHalfX;
                    targetRotation = targetRotationOnMouseDown + ( mouseX - mouseXOnMouseDown ) * 0.05;
​
                }
​
            }
​
            // la animacion se llama continuamente (requestAnimationFrame)
            function animate() {
                requestAnimationFrame( animate );
                stats.begin();
                render();
                stats.end();
​
            }
​
            // aqui se "pinta"  la escena 3d
            function render() {
                targetRotation += 0.01;
                cube.rotation.y += (( targetRotation - cube.rotation.y) * 0.05);
                plane.rotation.y = cube.rotation.y;      
                renderer.render( scene, camera );
            }
​
        </script>
​
</body>
</html>
Output 300px

This bin was created anonymously and its free preview time has expired (learn why). — Get a free unrestricted account

Dismiss x
public
Bin info
anonymouspro
0viewers