Three.js入門篇(一)創建一個場景

来源:http://www.cnblogs.com/createGod/archive/2017/06/15/7012164.html
-Advertisement-
Play Games

上一面講述了向場景中添加物體對象。這一篇準備把每個功能點細細的講述一遍,一方面是為了加深自己的理解。另一方面希望能夠 幫助到有需要的人。 一、在學習WEBGL的時候,你應該先瞭解要創建一個WebGL程式需要哪些步驟。就跟弄梅菜扣肉一樣,需要哪些步驟。 初始化WebGL繪圖上下文 初始化著色器程式 建 ...


上一面講述了向場景中添加物體對象。這一篇準備把每個功能點細細的講述一遍,一方面是為了加深自己的理解。另一方面希望能夠

幫助到有需要的人。

一、在學習WEBGL的時候,你應該先瞭解要創建一個WebGL程式需要哪些步驟。就跟弄梅菜扣肉一樣,需要哪些步驟。

  • 初始化WebGL繪圖上下文
  • 初始化著色器程式
  • 建立模型和數據緩存
  • 完成繪製和動畫

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

這三個東西是什麼意思呢?聽起來完全不懂是啥。舉個小列子:就拿電影來說。場景(scene)就好比整個佈局空間,相機(camera)相當於

拍攝期。而渲染器相當於(renderer)把拍攝的電影轉換成膠卷也就是電腦的屏幕。

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

二、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>

電影,場景,膠卷都準備好了,那如何才能展示演員呢?也就是上面一篇說 的如何向場景中添加物體對象呢?

三、添加演員(3D立方體)。

 //演員進場
    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); //把畫面轉換成相機,並播放

這樣這個演員就入鏡了。

四、如何讓這個演員動起來呢?

    //懂動起來。
    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。
     簡直就是動畫神奇
     */

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

五、整個代碼(本來想托管到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>

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

 


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 一、下載Spring的jar包 通過http://repo.spring.io/release/org/springframework/spring/地址下載最新的Spring的zip包,當然,如果你是在使用maven工程的話,可以不用下載Zip包,可以直接在maven工程的pom.xml文件中添加 ...
  • 情境 server可以定時為用戶推送一些資料,現在需要用戶輸入郵箱,經過驗證後將其納入發送列表以便向此郵箱提供服務。 沒什麼新穎的技術,事先也沒有查閱相關資料,只是一些搭建簡易驗證流程的想法。 如果有更靠譜的或者更簡單的也可以comment。 關於驗證流程 郵箱地址有效性驗證 這個問題應該困擾過很多 ...
  • 工廠方法:百度百科的定義: 工廠方法模式(FACTORYMETHOD)是一種常用的對象創建型設計模式,此模式的核心精神是封裝類中不變的部分,提取其中個性化善變的部分為獨立類,通過依賴註入以達到解耦、復用和方便後期維護拓展的目的。它的核心結構有四個角色,分別是抽象工廠;具體工廠;抽象產品;具體產品 U ...
  • eval()的作用 把字元串參數解析成js代碼並運行,並返回執行的結果; eval的作用域 作用域在它所有的範圍內容有效 IE8及以下指向window 解決方法: 註意事項 應該避免使用eval,不安全,非常耗性能(2次,一次解析成js語句,一次執行)。 ...
  • JS中數組的操作 1、數組的創建 var arrayObj = new Array(); //創建一個數組 var arrayObj = new Array([size]); //創建一個數組並指定長度,註意不是上限,是長度 var arrayObj = new Array([element0[, ...
  • 對於做網站的人來說,常常需要做js跳轉,對於做seo的人來說,尤其是有興趣涉足黑帽seo的人員,js跳轉更是家常便飯。那麼,js跳轉有哪些類型呢,今天小編在這裡給大家總結了一下大概的js跳轉種類,希望能對大家有所幫助。 一、從一個頁面跳轉到另一個頁面1、在本視窗中跳轉到另一個頁面 <script t ...
  • 1、 通過在IE中載入adobe pdf reader 插件 進行直接列印和列印的配置(推薦) <body> <object id="pdf1" width="1000px" height="400px" classid="clsid:CA8A9780-280D-11CF-A24D-44455354 ...
  • 換行, 單標簽 分割線,水平線 段落, 有換行功能, 而且行距會比普通換行要寬. 通用分組, 看上去和是完全一樣的. 但是br是單標簽, 雙標簽是可以控制內容的屬性的. 頁邊縮進. 引用整塊文字的段落, 多用於轉換場景意境的引用. 多用於正規書籍出版, 或者微信平臺美化. 按照編輯器文本的排版顯示排... ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...