three.js筆記——（1）入門

ephererid 發布于2019-08-20 14:36 / 1628人閱讀

摘要：入門這部分內容的目標是簡單地介紹，我們首先講如何用來實現一個旋轉的立方體。具體的實例將會給出，以防你卡住或者需要幫助。透視投影照相機的構造函數是，其中是可視角度為，通常是容器的寬高比是近斷距離，是遠端距離。

入門

這部分內容的目標是簡單地介紹three.js，我們首先講如何用three.js來實現一個旋轉的立方體。具體的實例將會給出，以防你卡住或者需要幫助。

在html文件中引入three.js文件

在使用three.js之前，首先需要在你的html文件中將它包含進來，如下面代碼段所示：



    
        
        My first three.js app

然后在空的

正交投影照相機的構造函數為OrthographicCamera(left, right, top, bottom, near, far)包含了六個參數，left就是整個投影線區域的左側面，right就是投影線區域的右側面，top就是投影線區域的上側面，而bottom就是投影線區域的下側面。 near是到距離相機較近的那一面的距離，far是離距離相機較遠的那一面的距離，這六個投影面圍成的區域就是相機投影的可見區域。在三維空間中，只有這個區域中的物體才能被照相機所觀測到。

透視投影照相機（PerspectiveCamera）

透視投影照相機中投影是線是以照相機為匯聚點發散的，投影線和投影面不垂直，物體投影之后的比例會發生變化，我們會觀察到物體的透視效果，如下圖所示。

透視投影照相機的構造函數是PerspectiveCamera(fov, aspect, near, far) ，其中fov是可視角度；aspect為width/height，通常是容器（canvas）的寬高比；near是近斷距離，far是遠端距離。只有在距離照相機大于near的距離小于far的距離之內才可以被照相機觀察到。

關于更多照相機的知識我們會在之后的文章中進行介紹。

渲染器

定義：渲染器的功能是將我們創建的場景和照相機所觀察到的三維物體在二維平面上的投影進行渲染展現到瀏覽器中。
創建：var renderer = new THREE.WebGLRenderer();
渲染：renderer.render(scene, camera) 在進行渲染的時候需要將之前創建的場景和照相機都傳入渲染函數中。

關于更多渲染器的知識我們將會在之后的文章中進行介紹。

栗子

有了場景、照相機和渲染器三個要素之后，我們就可以在瀏覽器中展現出復雜的三維物體了，首先來看一個簡單的栗子～



    
        
        My first three.js app
    
    
        //創建一個canvas標簽用來作為展現三維圖形的容器
        
        
        //引入three.js文件

快打開瀏覽器看看，是不是看到那個旋轉的正方體了～
項目github地址：旋轉的正方體

參考文獻：
1.creating a scene
2.three.js 照相機

GPU云服務器云服務器 three.js three.js極客 three.js教程 three.js cdn

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/81777.html

SegmentFault 技術周刊 Vol.35 - WebGL：打開網頁看大片

摘要：在文末，我會附上一個可加載的模型方便學習中文藝術字渲染用原生可以很容易地繪制文字，但是原生提供的文字效果美化功能十分有限。 showImg(https://segmentfault.com/img/bVWYnb?w=900&h=385); WebGL 可以說是 HTML5 技術生態鏈中最為令人振奮的標準之一，它把 Web 帶入了 3D 的時代。初識 WebGL 先通過幾個使用 Web...

objc94 2019-08-21 17:08 評論0 收藏0
WebGL three.js學習筆記創建three.js代碼的基本框架

摘要：學習學習筆記介紹是一種繪圖協議，它把和結合在一起，通過增加的一個綁定，可以為提供硬件加速渲染。環境搭建為了以后的學習方便，首先是搭建一個萬能框架，所有的開發都可以在此框架上進行。 WebGL學習----Three.js學習筆記（1） webgl介紹 WebGL是一種3D繪圖協議，它把JavaScript和OpenGL ES 2.0結合在一起，通過增加OpenGL ES 2.0的一個Ja...

mtunique 2019-08-23 17:06 評論0 收藏0
【three.js學習筆記】幾何體

摘要：構造函數分別是長寬高是對應長寬高的分段，在使用線模式進行渲染的時候，可以看到效果如下。長寬高分別被截為段，段，段。球體構造函數球體半徑水平方向和垂直方向上分段數。最小值為，默認值為。構造函數形狀數組可選的參數對象，可配置參數。 Geometry api Geometry var geometry = new THREE.Geometry(); 立方體（BoxGeometry）老版本...

dendoink 2019-08-22 16:04 評論0 收藏0
【three.js學習筆記】相機

摘要：而針對投影方式的不同，照相機又分為正交投影照相機與透視投影照相機。我們需要為自己的程序選擇合適的照相機。相機視椎體右面。相機API 照相機就是這樣一個抽象，它定義了三維空間到二維屏幕的投影方式，用照相機這樣一個類比，可以使我們直觀地理解這一投影方式。而針對投影方式的不同，照相機又分為正交投影照相機與透視投影照相機。我們需要為自己的程序選擇合適的照相機。正交投影照相機 showIm...

KnewOne 2019-08-22 16:04 評論0 收藏0