web 3d引擎

http://www.cssass.com/blog/index.php/2012/1266.html


使用three.js库,在页面中导入显示3D模型。

Java代码   收藏代码
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4. <meta charset="UTF-8" />  
  5. <title>MGA-411 Mangusa</title>  
  6.     <script type="text/javascript" charset="utf-8" src="http://www.cssass.com/blog/resource/threejs/three.js"></script>  
  7.     <style>body{overflow:hidden;background:#000}</style>  
  8. </head>  
  9. <body>  
  10.     <div id="Loading" style="color:#fff">Loading...</div>  
  11. </body>  
  12.     <script>  
  13.     /* 场景 */  
  14.     var WIDTH = document.documentElement.offsetWidth || 800,  
  15.         HEIGHT = document.documentElement.clientHeight || 600;  
  16.     var scene = new THREE.Scene();  
  17.     /* 摄像头 */  
  18.     var VIEW_ANGLE = 75,  
  19.         ASPECT = WIDTH / HEIGHT,  
  20.         NEAR = 0.1,  
  21.         FAR = 10000;  
  22.     var camera = new THREE.PerspectiveCamera(VIEW_ANGLE, ASPECT, NEAR, FAR);  
  23.         camera.position.set(001000);  
  24.         scene.add(camera);  
  25.     /* 渲染器 */  
  26.     var renderer = new THREE.WebGLRenderer();  
  27.         renderer.setSize(WIDTH , HEIGHT);  
  28.         document.body.appendChild(renderer.domElement);  
  29.     /* 灯光 */  
  30.     var light = new THREE.DirectionalLight(0xFFFFFF);  
  31.         light.position.set(0099).normalize();  
  32.         scene.add(light);  
  33.     /* 显示对象 */  
  34.     var material = new THREE.MeshLambertMaterial({ color: 0xcccccc, wireframe: true }),  
  35.         obj;  
  36.     var loader = new THREE.JSONLoader(true);  
  37.     loader.load("http://www.cssass.com/blog/resource/threejs/model/MGA.js", function ( geometry ) {  
  38.         var loading = document.getElementById("Loading");  
  39.         loading.parentNode.removeChild(loading);  
  40.         obj = new THREE.Mesh(geometry, material);  
  41.         obj.position.set(0,1,990);  
  42.         scene.add(obj);  
  43.         var start = new Date().getTime(),delta;  
  44.         (function anime(){  
  45.             delta = new Date().getTime() - start;  
  46.             obj.rotation.y =   delta / 1000;  
  47.             renderer.render(scene, camera);  
  48.             return requestAnimationFrame(anime);  
  49.         })();  
  50.     });  
  51. </script>  
  52. </html>  


预览地址: http://www.cssass.com/blog/index.php/2012/1266.html


你可能感兴趣的:(java,Web,Date,function,引擎)