初入three.js

来源：互联网发布：淘宝上比较好的男装店编辑：程序博客网时间：2024/05/20 07:20
</pre><pre name="code" class="javascript"><!DOCTYPE html><html lang = "en">    <head>        <meta charset="UTF-8">        <title>three.js.try1</title>        <!--引入Three.js-->        <script src="../Three.js"></script>             <script>             //开启three.js渲染器                var renderer;                function initThree(){                  width = document.getElementsById('canvas3d').clientWidth;      //get the width of "canvas3d"                  height = document.getElementsById('canvas3d').clientHeight;      //get the hight of "canvas3d"                  renderer = new THREE.WebGLRenderer({antialias:true});         //create a object of renderer                  renderer.setSize(width,height);          //the height of the renderer as same as "canvas3d"                  document.getElementsById('canvas3d').appendChild(renderer.domElement);         //追加【canvas】元素到【canvas3d】元素中                  renderer.setClearColorHex(0xFFFFFF,1.0);       //set the BGC of the canvas(clearColor)                }            //设置相机                var cameras;                function initCamera(){                  camera = new THREE.PerspectiveCamera(45,width / height,1,5000);                            //(视野角：fov,纵横比：aspect,相机离视体积最近的距离：near,相机离视体积最远的距离：far)                  camera.position.x = 0;                       camera.position.y = 50;                  camera.position.z = 100;           //相机的位置坐标                  camera.up.x = 0;                   //相机的上为x轴方向                  camera.up.y = 1;                   //相机的上为y轴方向                  camera.up.z = 0;                   //相机的上为z轴方向                  camera.lookAt = ({x:0,y:0,z:0});   //相机视野中心坐标                }            //设置场景（场景就是一个三维空间）                var scene ;                function initScene(){                  scene = new THREE.Scene();                }            //设置光源                var light;                function initLight(){                  light = new THREE.DirectionalLight(0xff0000,1.0,0);      //设置平行光源                  light.position.set(200,200,200);          //设置光源向量                  sence.add(light);           //追加光源到场景                }            //终于到了设置物体了                var sphere;                function initObject(){                  sphere = new THREE.Mesh(                    new THREE.CubeGeometry(180,180,180),              //形状设定                    new THREE.MeshLambertMaterial({color:0xff0000})    //材质设定                    )；                  scene.add(sphere);               //追加物体到场景                  sphere.position.set(0,0,0);                }            //写一个主函数完成上面五步                function threeStart(){                  initThree();                  initCamera();                  initScene();                  initLight();                  initObject();                  renderer.clear();                  renderer.render(scene,camera);                }        </script>        <style type="text/css">            div#canvas3d{                  border: none;                  cursor: pointer;                  width: 1280px;                  height: 600px;                  background-color: #EEEEEE;                }        </style>    </head>    <body onload = 'threeStart();'>        <!--盛放canvas的容器-->        <div id="canvas3d">        </div>    </body></html>
0 0