September 29, 2017 21:15 · serweb-labs · Sep 29, 2017
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html>
 <head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  
  <style>
    body {
           
      background: url(https://cdn.shutterstock.com/shutterstock/videos/9082259/thumb/1.jpg) no-repeat;
      background-size: 918px 900px;
      
      }
    
    #btn-colores {
      position: absolute;
      z-index:2;
      left: 30px;
      top: 100px;
      width: 100x;
      height: 50px;
      border: 3px solid black;
      
    }
    
    #btn-start {
      position: absolute;
      z-index:2;
      left: 30px;
      top: 160px;
      width: 100x;
      height: 50px;
      border: 3px solid black;
      
    }
    
  </style>
  
 </head>
 <body>
  
        
          <button type="button" id="btn-colores" onclick="render"> Colores</button>

          <button type="button" id="btn-start" onclick="pause()"> Parar / Iniciar </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;
              
              var loader = new THREE.TextureLoader();

              init();
              animate();
            
              var texture = loader.load( 'https://cdn.shutterstock.com/shutterstock/videos/9082259/thumb/1.jpg' )

              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.4, 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: 0xFF0000} );
                  console.log("material del plano", material)

                  // creo un objeto con la geometria 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>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width">
	<title>JS Bin</title>

	<style>
	body {

	background: url(https://cdn.shutterstock.com/shutterstock/videos/9082259/thumb/1.jpg) no-repeat;
	background-size: 918px 900px;

	}

	#btn-colores {
	position: absolute;
	z-index:2;
	left: 30px;
	top: 100px;
	width: 100x;
	height: 50px;
	border: 3px solid black;

	}

	#btn-start {
	position: absolute;
	z-index:2;
	left: 30px;
	top: 160px;
	width: 100x;
	height: 50px;
	border: 3px solid black;

	}

	</style>

	</head>
	<body>


	<button type="button" id="btn-colores" onclick="render"> Colores</button>

	<button type="button" id="btn-start" onclick="pause()"> Parar / Iniciar </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;

	var loader = new THREE.TextureLoader();

	init();
	animate();

	var texture = loader.load( 'https://cdn.shutterstock.com/shutterstock/videos/9082259/thumb/1.jpg' )

	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.4, 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: 0xFF0000} );
	console.log("material del plano", material)

	// creo un objeto con la geometria 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>