webgl_geometry_cube.html 1.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566
  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4. <title>three.js webgl - geometry - cube</title>
  5. <meta charset="utf-8">
  6. <style>
  7. body {
  8. margin: 0px;
  9. background-color: #000000;
  10. overflow: hidden;
  11. }
  12. </style>
  13. </head>
  14. <body>
  15. <script src="../build/Three.js"></script>
  16. <script>
  17. var camera, scene, renderer;
  18. var mesh;
  19. init();
  20. animate();
  21. function init() {
  22. scene = new THREE.Scene();
  23. //
  24. camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 1000 );
  25. camera.position.z = 400;
  26. scene.add( camera );
  27. //
  28. geometry = new THREE.CubeGeometry( 200, 200, 200 );
  29. material = new THREE.MeshBasicMaterial( { map: THREE.ImageUtils.loadTexture( 'textures/crate.gif' ) });
  30. mesh = new THREE.Mesh( geometry, material);
  31. scene.add( mesh );
  32. //
  33. renderer = new THREE.WebGLRenderer();
  34. renderer.setSize( window.innerWidth, window.innerHeight );
  35. document.body.appendChild( renderer.domElement );
  36. }
  37. function animate() {
  38. requestAnimationFrame( animate );
  39. mesh.rotation.x += 0.005;
  40. mesh.rotation.y += 0.01;
  41. renderer.render( scene, camera );
  42. }
  43. </script>
  44. </body>
  45. </html>