WebGL简例 

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  <html xmlns="http://www.w3.org/1999/xhtml">
  <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <script type="text/javascript" src="jquery.js" ></script>
  <script type="text/javascript" src="three.min.js"></script>
  
  <title>WebGl</title>
  </head>
  
  <body>
  <div id="main">
  <script>
  var camera, scene, renderer;
  var geometry, material, mesh;
  init();
  animate();
  
  function init() {
      //镜头属性
      camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 10000 );
      camera.position.z = 1000;
      scene = new THREE.Scene();
      //var pointLight =new THREE.PointLight(0x00FFAA);
        // pointLight.position.x = 10;
        //pointLight.position.y = 50;
        //pointLight.position.z = 130;      
      geometry = new THREE.CubeGeometry( 400, 400, 400 );
      material = new THREE.MeshBasicMaterial( { color: 0xff0000, wireframe: true, transparent: true, opacity: 0.8 } );
      mesh = new THREE.Mesh( geometry, material );
      scene.add( mesh );
  // scene.add(pointLight);
      renderer = new THREE.CanvasRenderer();
      renderer.setSize( window.innerWidth-100, window.innerHeight-100 );
      document.body.appendChild( renderer.domElement );
  }
  
  function animate() {
      // note: three.js includes requestAnimationFrame shim
      requestAnimationFrame( animate );
      mesh.rotation.x += 0.02;
      mesh.rotation.y += 0.02;
      renderer.render( scene, camera );
  }
  </script>
  </div>
  </body>
  </html>

挺好玩的

posted @ 2013-04-09 22:32  强子~Developer  阅读(200)  评论(2)  编辑  收藏  举报