webgl+three.js，學(xué)習(xí)筆記，畫一個(gè)立方體+注解

<!DOCTYPE html>
<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);//設(shè)置渲染器大小，即可視區(qū)域大小
                document.getElementById('canvas-frame').appendChild(renderer.domElement);//建立容器對象，并講渲染器附在所建立的容器里
                renderer.setClearColor(0xFFFFFF, 1.0);//設(shè)置背景色及其透明度
            }

            var camera;
            function initCamera() {
                camera = new THREE.PerspectiveCamera(45, width / height, 1, 10000);//創(chuàng)建透視投影相機(jī)，還有正投影相機(jī)OrthographicCamera
                //第一個(gè)參數(shù)表示視角（從下到上的觀察角度）取值為0-180之間；
                //第二個(gè)參數(shù)表示寬高比；
                //地三四個(gè)參數(shù)表示最近可是距離和最遠(yuǎn)可是距離。
                camera.position.z = 1000;//相機(jī)的位置，有x,y,z的三個(gè)屬性。
            }

            var scene;
            function initScene() {
                scene = new THREE.Scene();//構(gòu)建場景，場景只有一個(gè)
            }

            var light;
            function initLight() {

                light = new THREE.PointLight(0xFFFFFF);//創(chuàng)建白色的點(diǎn)光源
                light.position.set(100, 200,300);//光源位置
                scene.add(light);//將光源加入到場景中

            }

            var mesh;
            function initObject() {

                var geometry = new THREE.CubeGeometry( 200,200,200);//物體，CubeGeometry創(chuàng)建的是立方體
                var material = new THREE.MeshLambertMaterial( { color:0x666666} );//材質(zhì)
                mesh = new THREE.Mesh( geometry,material);//mesh對象由物體和材質(zhì)組成
                mesh.rotation.x = Math.PI / 5;//給物體換個(gè)角度，否則是正視圖，看到的就是一個(gè)正方形了
                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>
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請結(jié)合常識與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容