webgl+three.js,学习笔记,画一个立方体+解析


<html>
    <head>
        <meta charset="UTF-8">
        <title>物体title>
        <script src="js/Three.js">script>
        <style type="text/css">
            div#canvas-frame {
                border: none;
                cursor: pointer;
                width: 100%;
                height: 600px;
                background-color: #EEEEEE;
            }
        style>
        <script>
            var renderer;
            function initThree() {
                width = document.getElementById('canvas-frame').clientWidth;
                height = document.getElementById('canvas-frame').clientHeight;

                renderer = new THREE.WebGLRenderer({antialias : true});//建立渲染器对象
                renderer.setSize(width, height);//设置渲染器大小,即可视区域大小
                document.getElementById('canvas-frame').appendChild(renderer.domElement);//建立容器对象,并讲渲染器附在所建立的容器里
                renderer.setClearColor(0xFFFFFF, 1.0);//设置背景色及其透明度
            }

            var camera;
            function initCamera() {
                camera = new THREE.PerspectiveCamera(45, width / height, 1, 10000);//创建透视投影相机,还有正投影相机OrthographicCamera
                //第一个参数表示视角(从下到上的观察角度)取值为0-180之间;
                //第二个参数表示宽高比;
                //地三四个参数表示最近可是距离和最远可是距离。
                camera.position.z = 1000;//相机的位置,有x,y,z的三个属性。
            }

            var scene;
            function initScene() {
                scene = new THREE.Scene();//构建场景,场景只有一个
            }

            var light;
            function initLight() {

                light = new THREE.PointLight(0xFFFFFF);//创建白色的点光源
                light.position.set(100, 200,300);//光源位置
                scene.add(light);//将光源加入到场景中

            }

            var mesh;
            function initObject() {

                var geometry = new THREE.CubeGeometry( 200,200,200);//物体,CubeGeometry创建的是立方体
                var material = new THREE.MeshLambertMaterial( { color:0x666666} );//材质
                mesh = new THREE.Mesh( geometry,material);//mesh对象由物体和材质组成
                mesh.rotation.x = Math.PI / 5;//给物体换个角度,否则是正视图,看到的就是一个正方形了
                mesh.rotation.y = Math.PI / 5;
                scene.add(mesh);//将mesh加入到场景中
            }


            function threeStart() {
                initThree();
                initCamera();
                initScene();
                initLight();
                initObject();
                renderer.render(scene, camera);//渲染 
            }


        script>
    head>

    <body onload="threeStart();">
        <div id="canvas-frame">div>
    body>
html>

你可能感兴趣的:(webgl)