Three.js - Pruebas

by Arturo Soto

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/101/three.min.js"></script>
<html>
	<head>
		<title>My first three.js app</title>
	</head>
	<body>
    <h1>Pruebas Three.js</h1>
    <div id="my_canvas"></div>
	</body>
</html>

CSS

body {
  margin: 0;
}

canvas {
  width: 100%;
  height: 100%;
}

#my_canvas {
  background-color: lightblue;
  width: 100px;
  height: 100px;
}

JavaScript

window.onload	= function() {
	draw();
}
function draw() {
	var my_canvas = document.getElementById('my_canvas');

  var scene = new THREE.Scene();
  var camera = new THREE.PerspectiveCamera( 75, 	my_canvas.clientWidth/my_canvas.clientHeight, 0.1, 1000 );

  var renderer = new THREE.WebGLRenderer();
  renderer.setSize( my_canvas.clientWidth, my_canvas.clientHeight );
  my_canvas.appendChild( renderer.domElement );

  var geometry = new THREE.BoxGeometry( 1, 1, 1 );
  var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
  var cube = new THREE.Mesh( geometry, material );
  scene.add( cube );

  camera.position.z = 5;

  var animate = function () {
    requestAnimationFrame( animate );

    //cube.rotation.x += 0.01;
    //cube.rotation.y += 0.01;

    renderer.render( scene, camera );
  };

  animate();
}