Three.js入門篇（一）建立一個場景

時間 2019-12-01

標籤 three.js 入門建立一個場景欄目 JavaScript 简体版

原文原文鏈接

上一面講述了向場景中添加物體對象。這一篇準備把每一個功能點細細的講述一遍，一方面是爲了加深本身的理解。另外一方面但願可以javascript

幫助到有須要的人。html

1、在學習WEBGL的時候，你應該先了解要建立一個WebGL程序須要哪些步驟。就跟弄梅菜扣肉同樣，須要哪些步驟。java

初始化WebGL繪圖上下文
初始化着色器程序
創建模型和數據緩存
完成繪製和動畫

這是一個面向過程編程。然而three.js不同，是一個面向對象編程。主要構建三個對象 scene(場景) camera(相機) renderer(渲染器).。git

這三個東西是什麼意思呢？聽起來徹底不懂是啥。舉個小列子：就拿電影來講。場景（scene)就比如整個佈局空間，相機(camera)至關於編程

拍攝期。而渲染器至關於(renderer)把拍攝的電影轉換成膠捲也就是電腦的屏幕。api

場景和空間包含了3D和數據模型，而renderer包含了着色器和WebGL繪圖上下文。瀏覽器

2、THREE.JS建立場景，相機，渲染器緩存

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Demo1(three入門第一篇)</title>
</head>
<body>

</body>
<script type="text/javascript" src="js/three.js"></script>
<script type="text/javascript">
    var width = window.innerWidth, height = window.innerHeight;
    var scene = new THREE.Scene(); //建立一個場景
    var camera = new THREE.PerspectiveCamera(75,width/height,1,5000); //建立相機
    /*
        three.js建立相機的方式有不少種,其中最長用的是PerspectiveCamera();
        遠景相機，至關於人眼觀察模式
        確定有人會有疑問，這幾個參數是什麼意思呢？
        第一個 75 是 視角
        width / height 相機拍攝面的長寬比，別問爲何這麼寫，我也沒搞清楚。反正設置爲窗口
        的width/height圖形就不會被壓變形。
        下面兩個是近裁剪面。和遠裁剪面。
     */
    var renderer = new THREE.WebGLRenderer();  //s上一篇用的是CSS3DRenderer
    //WebGLrenderer實際上是用CANVAS渲染。
    renderer.setSize(width,height);
    document.getElementsByTagName('body')[0].appendChild(renderer.domElement);
</script>
</html>

電影，場景，膠捲都準備好了，那如何才能展現演員呢？也就是上面一篇說的如何向場景中添加物體對象呢？安全

3、添加演員（3D立方體）。app

 //演員進場
    var geometry = new THREE.BoxGeometry(1,1,1);
    //BoxGeometry(); 3D盒子模型。包含了立方體全部頂點和填充面的對象。
    var material = new THREE.MeshBasicMaterial({color:'red'});
    //有個幾何模型，咱們須要材料爲其上色。咱們採用的時候 網孔基礎材料MeshBasicMaterial();
    var mesh = new THREE.Mesh(geometry,material);
    //須要一個網孔,來承載幾何模型和材料
    scene.add(mesh);  //把這個網孔放置到場景中去。

    camera.position.z = 5; //調節相機的位置。

    renderer.render(scene,camera); //把畫面轉換成相機，並播放

這樣這個演員就入鏡了。

4、如何讓這個演員動起來呢？

    //懂動起來。
    function loop(){
        requestAnimationFrame(loop);
        mesh.rotation.x += 0.1;  //X選擇
        mesh.rotation.y += 0.1;  //Y旋轉
        renderer.render(scene,camera); //把畫面轉換成相機，並播放
    }
    loop();
    //解釋下requestAnimationFrame這個api
    /*
     requestAnimationFrame這個函數，它用來替代 setInterval， 這個新接口具有多個優勢，
     好比瀏覽器Tab切換後中止渲染以節約資源、
     和屏幕刷新同步避免無效刷新、在不支持該接口的瀏覽器中能安全回退爲setInterval。
     簡直就是動畫神奇
     */

演員入鏡，並有了，打動效果。第一個小短篇算完成了吧。

5、整個代碼(原本想託管到githup上)。發現太慢了。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Demo1(three入門第一篇)</title>
</head>
<body>

</body>
<script type="text/javascript" src="js/three.js"></script>
<script type="text/javascript">
    var width = window.innerWidth, height = window.innerHeight;
    var scene = new THREE.Scene(); //建立一個場景
    var camera = new THREE.PerspectiveCamera(75,width/height,1,5000); //建立相機
    /*
        three.js建立相機的方式有不少種,其中最長用的是PerspectiveCamera();
        遠景相機，至關於人眼觀察模式
        確定有人會有疑問，這幾個參數是什麼意思呢？
        第一個 75 是 視角
        width / height 相機拍攝面的長寬比，別問爲何這麼寫，我也沒搞清楚。反正設置爲窗口
        的width/height圖形就不會被壓縮。
        下面兩個是近裁剪面。和遠裁剪面。
     */
    var renderer = new THREE.WebGLRenderer();  //s上一篇用的是CSS3DRenderer
    //WebGLrenderer實際上是用CANVAS渲染。
    renderer.setSize(width,height);
    document.getElementsByTagName('body')[0].appendChild(renderer.domElement);

    //演員進場
    var geometry = new THREE.BoxGeometry(1,1,1);
    //BoxGeometry(); 3D盒子模型。包含了立方體全部頂點和填充面的對象。
    var material = new THREE.MeshBasicMaterial({color:'red'});
    //有個幾何模型，咱們須要材料爲其上色。咱們採用的時候 網孔基礎材料MeshBasicMaterial();
    var mesh = new THREE.Mesh(geometry,material);
    //須要一個網孔,來承載幾何模型和材料
    scene.add(mesh);  //把這個網孔放置到場景中去。

    camera.position.z = 5; //調節相機的位置。


    //懂動起來。
    function loop(){
        requestAnimationFrame(loop);
        mesh.rotation.x += 0.1;  //X選擇
        mesh.rotation.y += 0.1;  //Y旋轉
        renderer.render(scene,camera); //把畫面轉換成相機，並播放
    }
    loop();
    //解釋下requestAnimationFrame這個api
    /*
     requestAnimationFrame這個函數，它用來替代 setInterval， 這個新接口具有多個優勢，
     好比瀏覽器Tab切換後中止渲染以節約資源、
     和屏幕刷新同步避免無效刷新、在不支持該接口的瀏覽器中能安全回退爲setInterval。
     簡直就是動畫神奇
     */

</script>
</html>

6、在WebGL中three.js扮演了重要的角色，然而中文api真的少。只有一個一個的慢慢累積。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。