webgl+three.js雳旅，學習筆記，畫一個立方體+注解

<!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);//設置渲染器大小间聊，即可視區(qū)域大小
                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);//創(chuàng)建透視投影相機，還有正投影相機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);//創(chuàng)建白色的點光源
                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} );//材質
                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>
最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯系作者
  • 人面猴
    序言：七十年代末热凹，一起剝皮案震驚了整個濱河市泵喘，隨后出現的幾起案子，更是在濱河造成了極大的恐慌般妙，老刑警劉巖纪铺，帶你破解...
    沈念sama閱讀 210,978評論 6贊 490
  • 死咒
    序言：濱河連續(xù)發(fā)生了三起死亡事件，死亡現場離奇詭異碟渺，居然都是意外死亡鲜锚，警方通過查閱死者的電腦和手機，發(fā)現死者居然都...
    沈念sama閱讀 89,954評論 2贊 384
  • 救了他兩次的神仙讓他今天三更去死
    文/潘曉璐 我一進店門苫拍，熙熙樓的掌柜王于貴愁眉苦臉地迎上來芜繁，“玉大人，你說我怎么就攤上這事绒极】チ睿” “怎么了？”我有些...
    開封第一講書人閱讀 156,623評論 0贊 345
  • 道士緝兇錄：失蹤的賣姜人
    文/不壞的土叔 我叫張陵垄提，是天一觀的道長榔袋。 經常有香客問我周拐，道長，這世上最難降的妖魔是什么凰兑？ 我笑而不...
    開封第一講書人閱讀 56,324評論 1贊 282
  • ?港島之戀（遺憾婚禮）
    正文 為了忘掉前任妥粟，我火速辦了婚禮，結果婚禮上吏够，老公的妹妹穿的比我還像新娘勾给。我一直安慰自己，他們只是感情好稿饰，可當我...
    茶點故事閱讀 65,390評論 5贊 384
  • 惡毒庶女頂嫁案：這布局不是一般人想出來的
    文/花漫 我一把揭開白布锦秒。 她就那樣靜靜地躺著露泊，像睡著了一般喉镰。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上惭笑，一...
    開封第一講書人閱讀 49,741評論 1贊 289
  • 城市分裂傳說
    那天侣姆，我揣著相機與錄音，去河邊找鬼沉噩。 笑死捺宗，一個胖子當著我的面吹牛，可吹牛的內容都是我干的川蒙。 我是一名探鬼主播蚜厉，決...
    沈念sama閱讀 38,892評論 3贊 405
  • 雙鴛鴦連環(huán)套：你想象不到人心有多黑
    文/蒼蘭香墨 我猛地睜開眼，長吁一口氣：“原來是場噩夢啊……” “哼畜眨！你這毒婦竟也來了昼牛？” 一聲冷哼從身側響起，我...
    開封第一講書人閱讀 37,655評論 0贊 266
  • 萬榮殺人案實錄
    序言：老撾萬榮一對情侶失蹤康聂，失蹤者是張志新（化名）和其女友劉穎贰健，沒想到半個月后，有當地人在樹林里發(fā)現了一具尸體恬汁，經...
    沈念sama閱讀 44,104評論 1贊 303
  • ?護林員之死
    正文 獨居荒郊野嶺守林人離奇死亡伶椿，尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 36,451評論 2贊 325
  • ?白月光啟示錄
    正文 我和宋清朗相戀三年，在試婚紗的時候發(fā)現自己被綠了氓侧。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片脊另。...
    茶點故事閱讀 38,569評論 1贊 340
  • 活死人
    序言：一個原本活蹦亂跳的男人離奇死亡，死狀恐怖约巷，靈堂內的尸體忽然破棺而出偎痛，到底是詐尸還是另有隱情，我是刑警寧澤载庭，帶...
    沈念sama閱讀 34,254評論 4贊 328
  • ?日本核電站爆炸內幕
    正文 年R本政府宣布看彼，位于F島的核電站廊佩，受9級特大地震影響，放射性物質發(fā)生泄漏靖榕。R本人自食惡果不足惜标锄，卻給世界環(huán)境...
    茶點故事閱讀 39,834評論 3贊 312
  • 男人毒藥：我在死后第九天來索命
    文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望茁计。 院中可真熱鬧料皇，春花似錦、人聲如沸星压。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,725評論 0贊 21
  • 一樁弒父案，背后竟有這般陰謀
    文/蒼蘭香墨 我抬頭看了看天上的太陽娜膘。三九已至逊脯，卻和暖如春，著一層夾襖步出監(jiān)牢的瞬間竣贪，已是汗流浹背军洼。 一陣腳步聲響...
    開封第一講書人閱讀 31,950評論 1贊 264
  • 情欲美人皮
    我被黑心中介騙來泰國打工， 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留演怎，地道東北人匕争。 一個月前我還...
    沈念sama閱讀 46,260評論 2贊 360
  • 代替公主和親
    正文 我出身青樓，卻偏偏與公主長得像爷耀，于是被迫代替她去往敵國和親甘桑。 傳聞我的和親對象是個殘疾皇子，可洞房花燭夜當晚...
    茶點故事閱讀 43,446評論 2贊 348

推薦閱讀更多精彩內容