WebGL简单例子

运行webgl，对浏览器和显卡都有要求。

ie 各版本均不支持。

可下载谷歌的chrome浏览器运行以下例子

<!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 src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js"></script>
  <script type="text/javascript" src=" http://mrdoob.github.com/three.js/build/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>

 显示的时候1个翻滚的正方体。

如下图

posted @ 2013-05-27 21:49  simadi  阅读(815)  评论(0)  编辑  收藏  举报