資訊專欄INFORMATION COLUMN
摘要：入門這部分內(nèi)容的目標是簡單地介紹，我們首先講如何用來實現(xiàn)一個旋轉(zhuǎn)的立方體。具體的實例將會給出，以防你卡住或者需要幫助。透視投影照相機的構(gòu)造函數(shù)是，其中是可視角度為，通常是容器的寬高比是近斷距離，是遠端距離。
入門
這部分內(nèi)容的目標是簡單地介紹three.js，我們首先講如何用three.js來實現(xiàn)一個旋轉(zhuǎn)的立方體。具體的實例將會給出，以防你卡住或者需要幫助。
在html文件中引入three.js文件在使用three.js之前，首先需要在你的html文件中將它包含進來，如下面代碼段所示：
My first three.js app
然后在空的
正交投影照相機的構(gòu)造函數(shù)為OrthographicCamera(left, right, top, bottom, near, far)包含了六個參數(shù)，left就是整個投影線區(qū)域的左側(cè)面，right就是投影線區(qū)域的右側(cè)面，top就是投影線區(qū)域的上側(cè)面，而bottom就是投影線區(qū)域的下側(cè)面。 near是到距離相機較近的那一面的距離，far是離距離相機較遠的那一面的距離，這六個投影面圍成的區(qū)域就是相機投影的可見區(qū)域。在三維空間中，只有這個區(qū)域中的物體才能被照相機所觀測到。
透視投影照相機（PerspectiveCamera）透視投影照相機中投影是線是以照相機為匯聚點發(fā)散的，投影線和投影面不垂直，物體投影之后的比例會發(fā)生變化，我們會觀察到物體的透視效果，如下圖所示。
透視投影照相機的構(gòu)造函數(shù)是PerspectiveCamera(fov, aspect, near, far) ，其中fov是可視角度；aspect為width/height，通常是容器（canvas）的寬高比；near是近斷距離，far是遠端距離。只有在距離照相機大于near的距離小于far的距離之內(nèi)才可以被照相機觀察到。
關于更多照相機的知識我們會在之后的文章中進行介紹。
渲染器定義：渲染器的功能是將我們創(chuàng)建的場景和照相機所觀察到的三維物體在二維平面上的投影進行渲染展現(xiàn)到瀏覽器中。
創(chuàng)建：var renderer = new THREE.WebGLRenderer();
渲染：renderer.render(scene, camera) 在進行渲染的時候需要將之前創(chuàng)建的場景和照相機都傳入渲染函數(shù)中。
關于更多渲染器的知識我們將會在之后的文章中進行介紹。
栗子有了場景、照相機和渲染器三個要素之后，我們就可以在瀏覽器中展現(xiàn)出復雜的三維物體了，首先來看一個簡單的栗子～
My first three.js app
//創(chuàng)建一個canvas標簽用來作為展現(xiàn)三維圖形的容器
//引入three.js文件
快打開瀏覽器看看，是不是看到那個旋轉(zhuǎn)的正方體了～
項目github地址：旋轉(zhuǎn)的正方體
參考文獻：
1.creating a scene
2.three.js 照相機
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/81777.html
摘要：在文末，我會附上一個可加載的模型方便學習中文藝術字渲染用原生可以很容易地繪制文字，但是原生提供的文字效果美化功能十分有限。 showImg(https://segmentfault.com/img/bVWYnb?w=900&h=385); WebGL 可以說是 HTML5 技術生態(tài)鏈中最為令人振奮的標準之一，它把 Web 帶入了 3D 的時代。 初識 WebGL 先通過幾個使用 Web...
摘要：學習學習筆記介紹是一種繪圖協(xié)議，它把和結(jié)合在一起，通過增加的一個綁定，可以為提供硬件加速渲染。環(huán)境搭建為了以后的學習方便，首先是搭建一個萬能框架，所有的開發(fā)都可以在此框架上進行。 WebGL學習----Three.js學習筆記（1） webgl介紹 WebGL是一種3D繪圖協(xié)議，它把JavaScript和OpenGL ES 2.0結(jié)合在一起，通過增加OpenGL ES 2.0的一個Ja...
摘要：構(gòu)造函數(shù)分別是長寬高是對應長寬高的分段，在使用線模式進行渲染的時候，可以看到效果如下。長寬高分別被截為段，段，段。球體構(gòu)造函數(shù)球體半徑水平方向和垂直方向上分段數(shù)。最小值為，默認值為。構(gòu)造函數(shù)形狀數(shù)組可選的參數(shù)對象，可配置參數(shù)。 Geometry api Geometry var geometry = new THREE.Geometry(); 立方體（BoxGeometry） 老版本...
摘要：而針對投影方式的不同，照相機又分為正交投影照相機與透視投影照相機。我們需要為自己的程序選擇合適的照相機。相機視椎體右面。 相機API 照相機就是這樣一個抽象，它定義了三維空間到二維屏幕的投影方式，用照相機這樣一個類比，可以使我們直觀地理解這一投影方式。而針對投影方式的不同，照相機又分為正交投影照相機與透視投影照相機。我們需要為自己的程序選擇合適的照相機。 正交投影照相機 showIm...
閱讀 3821·2021-11-25 09:43
閱讀 2623·2021-11-18 13:11
閱讀 2290·2019-08-30 15:55
閱讀 3297·2019-08-26 11:58
閱讀 2854·2019-08-26 10:47
閱讀 2261·2019-08-26 10:20
閱讀 1300·2019-08-23 17:59
閱讀 3047·2019-08-23 15:54
