亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

Three.js學(xué)習(xí)筆記

20171112 / 2996人閱讀

摘要：和使用的坐標(biāo)系是右手坐標(biāo)系。與都是指到照相機(jī)位置在深度平面的位置，而照相機(jī)不應(yīng)該拍攝到其后方的物體，因此這兩個(gè)值應(yīng)該均為正值。

Three.js是一個(gè)3D JavaScript庫(kù)。Three.js封裝了底層的圖形接口，使得程序員能夠在無(wú)需掌握繁冗的圖形學(xué)知識(shí)的情況下，也能用簡(jiǎn)單的代碼實(shí)現(xiàn)三維場(chǎng)景的渲染。

一個(gè)典型的Three.js程序至少要包括渲染器（Renderer）、場(chǎng)景（Scene）、照相機(jī)（Camera），以及你在場(chǎng)景中創(chuàng)建的物體。

渲染器（Renerer）

渲染器將和Canvas元素進(jìn)行綁定，在HTML中手動(dòng)定義了id為mainCanvas的Canvas元素，那么Renderer可以這樣寫(xiě)：

var renderer = new THREE.WebGLRenderer({
        canvas: document.getElementById("mainCanvas")
    });

將背景色（用于清除畫(huà)面的顏色）設(shè)置為黑色：

renderer.setClearColor(0x000000);
場(chǎng)景（Scene）

在Three.js中添加的物體都是添加到場(chǎng)景中的，因此它相當(dāng)于一個(gè)大容器。一般說(shuō)，場(chǎng)景里沒(méi)有很復(fù)雜的操作，在程序最開(kāi)始的時(shí)候進(jìn)行實(shí)例化，然后將物體添加到場(chǎng)景中即可。

var scene = new THREE.Scene();
照相機(jī)（Camera）

我們使用Three.js創(chuàng)建的場(chǎng)景是三維的，而通常情況下顯示屏是二維的，那么三維的場(chǎng)景如何顯示到二維的顯示屏上呢？照相機(jī)就是這樣一個(gè)抽象，它定義了三維空間到二維屏幕的投影方式。
WebGL和Three.js使用的坐標(biāo)系是右手坐標(biāo)系。

var camera = new THREE.OrthographicCamera(-5, 5, 3.75, -3.75, 0.1, 100);
//我們把 camera 放在 XYZ 坐標(biāo)為 (50, 50, 50) 的位置上，并且朝向坐標(biāo)原點(diǎn)。
camera.position.set(50, 50, 50);
camera.lookAt(new THREE.Vector3(0, 0, 0));
scene.add(camera);

正交投影照相機(jī)（Orthographic Camera）的構(gòu)造函數(shù)是：

THREE.OrthographicCamera(left, right, top, bottom, near, far)

這六個(gè)參數(shù)分別代表正交投影照相機(jī)拍攝到的空間的六個(gè)面的位置，這六個(gè)面圍成一個(gè)長(zhǎng)方體，我們稱其為視景體（Frustum）。只有在視景體內(nèi)部（下圖中的灰色部分）的物體才可能顯示在屏幕上，而視景體外的物體會(huì)在顯示之前被裁減掉。

為了保持照相機(jī)的橫豎比例，需要保證(right - left)與(top - bottom)的比例與Canvas寬度與高度的比例一致。
near與far都是指到照相機(jī)位置在深度平面的位置，而照相機(jī)不應(yīng)該拍攝到其后方的物體，因此這兩個(gè)值應(yīng)該均為正值。為了保證場(chǎng)景中的物體不會(huì)因?yàn)樘蛱h(yuǎn)而被照相機(jī)忽略，一般near的值設(shè)置得較小，far的值設(shè)置得較大，具體值視場(chǎng)景中物體的位置等決定。

渲染

在定義了場(chǎng)景中的物體，設(shè)置好的照相機(jī)之后，渲染器就知道如何渲染出二維的結(jié)果了。這時(shí)候，我們只需要調(diào)用渲染器的渲染函數(shù)，就能使其渲染一次了。

renderer.render(scene, camera);

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/88125.html

相關(guān)文章

  • WebGL three.js學(xué)習(xí)筆記 創(chuàng)建three.js代碼的基本框架

    摘要：學(xué)習(xí)學(xué)習(xí)筆記介紹是一種繪圖協(xié)議，它把和結(jié)合在一起，通過(guò)增加的一個(gè)綁定，可以為提供硬件加速渲染。環(huán)境搭建為了以后的學(xué)習(xí)方便，首先是搭建一個(gè)萬(wàn)能框架，所有的開(kāi)發(fā)都可以在此框架上進(jìn)行。 WebGL學(xué)習(xí)----Three.js學(xué)習(xí)筆記（1） webgl介紹 WebGL是一種3D繪圖協(xié)議，它把JavaScript和OpenGL ES 2.0結(jié)合在一起，通過(guò)增加OpenGL ES 2.0的一個(gè)Ja...

    mtunique 評(píng)論0 收藏0

  • WebGL three.js學(xué)習(xí)筆記 自定義頂點(diǎn)建立幾何體

    摘要：自定義頂點(diǎn)建立幾何體與克隆本身已經(jīng)有很多的網(wǎng)格模型，基本已經(jīng)夠我們的使用，但是如果我們還是想自己根據(jù)頂點(diǎn)坐標(biāo)來(lái)建立幾何模型的話，也是可以的。并且不僅要更新頂點(diǎn)，還要更新線條的連接方式，否則是沒(méi)有效果的。 自定義頂點(diǎn)建立幾何體與克隆 Three.js本身已經(jīng)有很多的網(wǎng)格模型，基本已經(jīng)夠我們的使用，但是如果我們還是想自己根據(jù)頂點(diǎn)坐標(biāo)來(lái)建立幾何模型的話，Three.js也是可以的。 基本效果...

    joyvw 評(píng)論0 收藏0

  • 【three.js學(xué)習(xí)筆記】場(chǎng)景

    摘要：對(duì)象是所有不同對(duì)象的容器，也就是說(shuō)該對(duì)象保存所有物體光源攝像機(jī)以及渲染所需的其他對(duì)象。對(duì)象又是被稱為場(chǎng)景圖，它不僅僅是一個(gè)對(duì)象數(shù)組，還包含了整個(gè)場(chǎng)景圖樹(shù)形結(jié)構(gòu)中的所有節(jié)點(diǎn)每個(gè)添加到場(chǎng)景的對(duì)象，甚至包括本身都是繼承自一個(gè)名為的對(duì)象。 THREE.Scene THREE.Scene 對(duì)象是所有不同對(duì)象的容器，也就是說(shuō)該對(duì)象保存所有物體、光源、攝像機(jī)以及渲染所需的其他對(duì)象。 THREE.S...

    codecraft 評(píng)論0 收藏0

  • 【three.js學(xué)習(xí)筆記】幾何體

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

    dendoink 評(píng)論0 收藏0

  • 【three.js學(xué)習(xí)筆記】光

    摘要：環(huán)境光的位置對(duì)呈現(xiàn)的效果無(wú)任何效果環(huán)境光的構(gòu)造函數(shù)只有一個(gè)參數(shù)進(jìn)制的顏色值。半球光點(diǎn)光源點(diǎn)光源的光線來(lái)自同一點(diǎn)，并向外發(fā)射。點(diǎn)光源的構(gòu)造函數(shù)有三個(gè)參數(shù)，比平行光多了一個(gè)距離參數(shù)，光會(huì)從光源經(jīng)過(guò)的距離一路衰減為。 Lightapi 光源的基類。 Light( color, intensity ) color 光源顏色的RGB數(shù)值 intensity 光源強(qiáng)度的數(shù)值。 看到的顏色 使...

    YancyYe 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<