three.js學習筆記--基礎知識

時間 2019-11-17

原文原文鏈接

基礎知識

從去年開始就在計劃中的three.js終於開始了javascript

歷史介紹

（摘自ijunfan1994的轉載，感謝做者）
OpenGL大概許多人都有所耳聞，它是最經常使用的跨平臺圖形庫。
WebGL是基於OpenGL設計的面向web的圖形標準，提供了一系列JavaScript API，經過這些API進行圖形渲染將得以利用圖形硬件從而得到較高性能。
而Three.js是經過對WebGL接口的封裝與簡化而造成的一個易用的圖形庫。
簡單點的說法：WebGL能夠當作是瀏覽器給咱們提供的接口，在javascript中能夠直接用這些API進行3D圖形的繪製；而Three.js就是在這些接口上又幫咱們封裝得更好用一些。html

(WebGL)與(Three.js)對比

（摘自ijunfan1994的轉載，感謝做者）
既然有了WebGL，咱們爲何還須要Three.js？
這是由於WebGL門檻相對較高，須要相對較多的數學知識。雖然WebGL提供的是面向前端的API，但本質上WebGL跟前端開發徹底是兩個不一樣的方向，知識的重疊不多。相關性只是他們都在web平臺上，都是用javascript而已。一個前端程序員或許還熟悉解析幾何，可是還熟悉線性代數的應該寥寥無幾了（好比求個逆轉置矩陣試試？），更況且使用中強調矩陣運算中的物理意義，這在教學中也是比較缺失的。
所以，前端工程師想要短期上手WebGL仍是挺有難度的。
因而，Three.js對WebGL提供的接口進行了很是好的封裝，簡化了不少細節，大大下降了學習成本。而且，幾乎沒有損失WebGL的靈活性。
所以，從Three.js入手是值得推薦的，這可讓你在較短的學習後就能面對大部分需求場景。（Three.js的更新是至關頻繁）前端

思路講解

咱們要在屏幕上展現一個3D圖形，大致的思路是這樣的：java

構建一個場景，也就是一個三維空間
建立一個相機，也就是一個觀察點，而且定義觀察的位置和角度
定義物體和材質，把他們合起來以後放到場景中
使用指定的渲染器將總體渲染到屏幕上

概念具體講解

Scene

場景是全部物體的容器，也對應着咱們建立的三維世界
Camera

Camera是三維世界中的觀察者，用來描述空間的位置，three中相機有兩種，分別是正交投影相機和透視投影相機，正交投影相機通俗的說就是看到的物體都是同樣大，而透視投影相機看到的物體是近大遠小，更符合咱們視覺的習慣
物體

three中供顯示的物體有不少，他們所有都繼承自Object3D類
Mesh

咱們都知道，計算機的世界裏，一條弧線是由有限個點構成的有限條線段鏈接獲得的。線段不少時，看起來就是一條平滑的弧線了。計算機中的三維模型也是相似的，廣泛的作法是用三角形組成的網格來描述，咱們把這種模型稱之爲Mesh模型。在Three中，Mesh的構造函數是這樣的：Mesh( geometry, material )，geometry是它的形狀，material是它的材質
Geometry

意思爲形狀，經過存儲模型用到的點集和點間關係來達到描述物體形狀的目的，three提供了立方體、平面、球體、圓形、圓柱、圓臺等許多基本形狀，你也能夠經過本身定義每一個點的位置來構造形狀，對於比較複雜的形狀，咱們還能夠經過外部的模型文件導入
Material

意思爲材質，材質就是物體表面除了形狀意外的全部可視屬性的合集，例如色彩、紋理、光滑度、反射率、折射率、發光度。這裏講一下材質(Material)、貼圖(Map)和紋理(Texture)的關係。
- 材質上面已經提到了，它包括了貼圖以及其它。
- 貼圖實際上是‘貼'和‘圖'，它包括了圖片和圖片應當貼到什麼位置。
- 紋理其實就是‘圖'了。
  Three提供了多種材質可供選擇，可以自由地選擇漫反射/鏡面反射等材質。
Points

points其實就是一堆點的集合，他在以前很長時間都被成爲粒子系統，改名主要是由於粒子系統應該是包括粒子和相關的物理特性的處理的一套完總體系，而three中的Points則要簡單的多，所以被命名爲Points，Points的相關效果能夠查看官網demo1 demo2 demo3
Light

光影效果是讓畫面豐富的重要元素，Three提供了包括環境光AmbientLight、點光源PointLight、聚光燈SpotLight、方向光DirectionalLight、半球光HemisphereLight等多種光源。
只要在場景中添加須要的光源就行了。
Renderer

Renderer的做用就是將剛纔全部的東西都渲染到屏幕上，Renderer綁定一個canvas對象，而且能夠設置大小和默認北京顏色等，調用Renderer的render函數，傳入scene和camera，就能夠把圖像渲染到canvas中了

最後以一個簡單的demo結束

在fiddle中查看效果程序員

<html>
    <head>
        <title>My first Three.js app</title>
        <style>
            body { margin: 0; }
            canvas { width: 100%; height: 100% }
        </style>
    </head>
    <body>
        <script src="//wow.techbrood.com/libs/three.r73.js"></script>
        <script>
            //建立場景 
            var scene = new THREE.Scene();
            // 建立透視投影相機，PerspectiveCamera( fov, aspect, near, far )
            // fov：相機視錐體垂直視角，aspect：相機視錐體寬高比
            // near：相機視錐體近裁剪面距離，far：相機視錐體遠裁剪面距離。
            var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 );
            // 建立一個webGL渲染器
            var renderer = new THREE.WebGLRenderer();
            // 設置渲染器大小
            renderer.setSize( window.innerWidth, window.innerHeight );
            // 將渲染出來的canvas加入到body中
            document.body.appendChild( renderer.domElement );
            // 建立形狀
            var geometry = new THREE.BoxGeometry( 1, 1, 1 );
            // 建立材質
            var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
            // 合成圖形
            var cube = new THREE.Mesh( geometry, material );
            // 添加到場景中
            scene.add( cube );
            // 設置相機位置
            camera.position.z = 5;
            // 渲染函數
            var render = function () {
                requestAnimationFrame( render );

                cube.rotation.x += 0.1;
                cube.rotation.y += 0.1;

                renderer.render(scene, camera);
            };

            render();
        </script>
    </body>
</html>

相關標籤/搜索

每日一句

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