简单的three.js实例

  什么是 three.js

　　　three.js是JavaScript编写的WebGL第三方库。提供了非常多的3D显示功能。（不过似乎IE不行）

　简单的实例

　　

<!DOCTYPE html>
<html>
  <head>
    <title>three</title>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <script type="text/javascript" src="js/jquery-1.5.1.min.js"></script>
    <script type="text/javascript" src="js/three.js"></script>
    <style type="text/css">
        body ,div{margin: 0px;padding: 0px;text-align: center;}
        #sce{
            border: 2px solid black;
            border-radius: 4px;
            width: 900px;
            height: 720px;
            margin: 10px auto;
            box-shadow:0px 0px 10px black;
            -webkit-box-shadow:0px 0px 10px black;
            -moz-box-shadow : 0px 0px 10px black;
        }
    </style>
    <script type="text/javascript">
        var scene,cam,render,cube,light;
        $(document).ready(function(){
            init();
        });
        function init(){
            initScene();
            initCube();
            animate();
        }
        function initScene(){
            scene = new THREE.Scene();
            cam = new THREE.PerspectiveCamera(45,$("#sce").width()/$("#sce").height(),0.1,2000);
            cam.position.x = 0;
            cam.position.y = -2;
            cam.position.z = 10;
            render = new THREE.WebGLRenderer({antialias:true});
            render.setSize($("#sce").width(),$("#sce").height());
            $("#sce").append(render.domElement);
        }
        function initCube(){
            var text = THREE.ImageUtils.loadTexture('img/monster.jpg');
            //var g = new THREE.CubeGeometry(1,1,1);立方体
            //var g =new THREE.CylinderGeometry( 3, 3, 30, 32);圆柱体
            var g = new THREE.SphereGeometry( 2, 32, 32 );//球体
            var m = new THREE.MeshBasicMaterial({map:text});//添加图片在上面
            cube = new THREE.Mesh(g,m);
            scene.add(cube);
        }
        function animate(){
            requestAnimationFrame(animate);
            cube.rotation.y +=Math.PI/180;//沿y轴旋转
            //cube.rotation.x +=Math.PI/180;沿x轴旋转
            render.render(scene,cam);
        }        
  </script>
  </head>
  <body>
      <div id="sce"></div>
  </body>
</html>

 

　　效果

　　　

 

 

 

 

posted @ 2014-04-27 00:34  知之为知之  阅读(1118)  评论(0)  编辑  收藏  举报