three.js 顯示一個綠色的正方體


第一個框架的效果是顯示一個綠色的正方體

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style>canvas { width: 100%; height: 100% }</style>
    <script src="libs/three.js"></script>
</head>
<body>
    <script>
        var scene = new THREE.Scene();//構件一個場景
        
        var camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);//定義一個透視相機
        
        var renderer = new THREE.WebGLRenderer();//渲染器
        
        renderer.setSize(window.innerWidth, window.innerHeight);// 設置渲染器的大小為窗口的內寬度,也就是內容區的寬度
        
        document.body.appendChild(renderer.domElement);//domElement元素,表示渲染器中的畫布,所有的渲染都是畫在domElement上的
        var geometry = new THREE.CubeGeometry(1,1,1);//THREE.CubeGeometry是一個幾何體,有3個參數:width:立方體x軸的長度,height:立方體y軸的長度,depth:立方體z軸的深度
        var material = new THREE.MeshBasicMaterial({color: 0x00ff00});
        var cube = new THREE.Mesh(geometry, material); scene.add(cube);
        camera.position.z = 5;
        function render() {//實時渲染,不停循環
            requestAnimationFrame(render);
            cube.rotation.x += 0.1;
            cube.rotation.y += 0.1;
            renderer.render(scene, camera);//場景 相機
        }
        render();
    </script>
</body>
</html>

 

這個旋轉的立方體算我們踏入WebGL這個神奇的世界的開始。借助於three.js,我們並沒有寫太多的代碼就完成了這個示例。現在,我們來分析它。

在Three.js中,要渲染物體到網頁中,我們需要3個組建:場景(scene)、相機(camera)和渲染器(renderer)。有了這三樣東西,才能將物體渲染到網頁中去。

1.場景

在Threejs中場景就只有一種,用THREE.Scene來表示,要構件一個場景也很簡單,只要new一個對象就可以了,代碼如下:

var scene = new THREE.Scene();

場景是所有物體的容器,如果要顯示一個蘋果,就需要將蘋果對象加入場景中。

2.相機

相機決定了場景中那個角度的景色會顯示出來。相機就像人的眼睛一樣,人站在不同位置,抬頭或者低頭都能夠看到不同的景色。

場景只有一種,但是相機卻又很多種。和現實中一樣,不同的相機確定了呈相的各個方面。比如有的相機適合人像,有的相機適合風景,專業的攝影師根據實際用途不一樣,選擇不同的相機。

對程序員來說,只要設置不同的相機參數,就能夠讓相機產生不一樣的效果。

3.渲染器

設置渲染器,渲染器決定了渲染的結果應該畫在頁面的什么元素上面,並且以怎樣的方式來繪制。

注意,渲染器renderer的domElement元素,表示渲染器中的畫布,所有的渲染都是畫在domElement上的,所以這里的appendChild表示將這個domElement掛接在body下面,這樣渲染的結果就能夠在頁面中顯示了。

4.添加物體到場景中

CubeGeometry是一個正方體或者長方體,究竟是什么,由它的3個參數所決定,cubeGeometry的原型如下代碼所示:

CubeGeometry(width, height, depth, segmentsWidth, segmentsHeight, segmentsDepth, materials, sides)

width:立方體x軸的長度

height:立方體y軸的長度

depth:立方體z軸的深度,也就是長度

想一想大家就明白,以上3個參數就能夠確定一個立方體。

 

5、渲染

渲染器,結合相機和場景來得到結果畫面。實現這個功能的函數是

renderer.render(scene, camera);

渲染函數的原型如下:

render( scene, camera, renderTarget, forceClear )

各個參數的意義是:

scene:前面定義的場景

camera:前面定義的相機

renderTarget:渲染的目標,默認是渲染到前面定義的render變量中

forceClear:每次繪制之前都將畫布的內容給清除,即使自動清除標志autoClear為false,也會清除。

6、渲染循環

渲染有兩種方式:實時渲染和離線渲染 。

先看看離線渲染,想想《西游降魔篇》中最后的佛主,他肯定不是真的,是電腦渲染出來的,其畫面質量是很高的,它是事先渲染好一幀一幀的圖片,然后再把圖片拼接成電影的。這就是離線渲染。如果不事先處理好一幀一幀的圖片,那么電影播放得會很卡。CPU和GPU根本沒有能力在播放的時候渲染出這種高質量的圖片。

實時渲染:就是需要不停的對畫面進行渲染,即使畫面中什么也沒有改變,也需要重新渲染。下面就是一個渲染循環:

function render() {
    cube.rotation.x += 0.1;
    cube.rotation.y += 0.1;
    renderer.render(scene, camera);
    requestAnimationFrame(render);
}

其中一個重要的函數是requestAnimationFrame,這個函數就是讓瀏覽器去執行一次參數中的函數,這樣通過上面render中調用requestAnimationFrame()函數,requestAnimationFrame()函數又讓rander()再執行一次,就形成了我們通常所說的游戲循環了。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM