WebGL three.js學習筆記 自定義頂點建立幾何體

来源:https://www.cnblogs.com/nsytsqdtn/archive/2019/04/25/10771663.html
-Advertisement-
Play Games

自定義頂點建立幾何體與克隆 Three.js本身已經有很多的網格模型，基本已經夠我們的使用，但是如果我們還是想自己根據頂點坐標來建立幾何模型的話，Three.js也是可以的。 基本效果如圖： "點擊查看demo演示" demo演示：https://nsytsqdtn.github.io/demo/v ...


自定義頂點建立幾何體與克隆

Three.js本身已經有很多的網格模型，基本已經夠我們的使用，但是如果我們還是想自己根據頂點坐標來建立幾何模型的話，Three.js也是可以的。

基本效果如圖：

點擊查看demo演示

demo演示：https://nsytsqdtn.github.io/demo/vertices/vertices

實際上出於性能的考慮，three.js是認為我們的幾何體在整個生命周期中是不會改變的，但是我們還是想使用dat.gui.js去實時更新我們自定義幾何體的頂點信息。

當頂點信息發生變化時，我們就需要使用
geometry.verticesNeedUpdate = true;
但是在每一幀渲染完後這個值又會變為false，所以我們需要每次渲染中都更新這個值。

完整代碼如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Three.js</title>
    <script src="../../../Import/three.js"></script>
    <script src="../../../Import/stats.js"></script>
    <script src="../../../Import/Setting.js"></script>
    <script src="../../../Import/OrbitControls.js"></script>
    <script src="../../../Import/dat.gui.min.js"></script>
    <script src="../../../Import/SceneUtils.js"></script>
    <style type="text/css">
        div#canvas-frame {
            border: none;
            cursor: pointer;
            width: 100%;
            height: 850px;
            background-color: #333333;
        }
    </style>
</head>
<body onload="threeStart()">
<div id="canvas-frame"></div>
<script>
    let renderer, camera, scene;
    let controller;
    let controls;
    let vertices;
    let faces;
    let controlPoints = [];
    let geom;
    let mesh;

    //初始化渲染器
    function initThree() {
        renderer = new THREE.WebGLRenderer({
            antialias: true
        });//定義渲染器
        renderer.setSize(window.innerWidth, window.innerHeight);//設置渲染的寬度和高度
        document.getElementById("canvas-frame").appendChild(renderer.domElement);//將渲染器加在html中的div裡面
        renderer.setClearColor(0x333333, 1.0);//渲染的顏色設置
        renderer.shadowMapEnabled = true;//開啟陰影，預設是關閉的，太影響性能
        renderer.shadowMapType = THREE.PCFSoftShadowMap;//陰影的一個類型


        camera = new THREE.PerspectiveCamera(45,window.innerWidth/window.innerHeight, 1, 10000);//perspective是透視攝像機，這種攝像機看上去畫面有3D效果

        //攝像機的位置
        camera.position.x = 10;
        camera.position.y = 15;
        camera.position.z = 15;
        camera.up.x = 0;
        camera.up.y = 1;//攝像機的上方向是Y軸
        camera.up.z = 0;
        camera.lookAt(0, 0, 0);//攝像機對焦的位置
        //這三個參數共同作用才能決定畫面

        scene = new THREE.Scene();

        let light = new THREE.SpotLight(0xffffff, 1.0, 0);//點光源
        light.position.set(-40, 60, -10);
        light.castShadow = true;//開啟陰影
        light.shadowMapWidth = 8192;//陰影的解析度，可以不設置對比看效果
        light.shadowMapHeight = 8192;
        scene.add(light);
        light = new THREE.AmbientLight(0xcccccc, 0.2);//環境光，如果不加，點光源照不到的地方就完全是黑色的
        scene.add(light);

        cameraControl();

         vertices = [
            new THREE.Vector3(1, 3, 1),
            new THREE.Vector3(1, 3, -1),
            new THREE.Vector3(1, -1, 1),
            new THREE.Vector3(1, -1, -1),
            new THREE.Vector3(-1, 3, -1),
            new THREE.Vector3(-1, 3, 1),
            new THREE.Vector3(-1, -1, -1),
            new THREE.Vector3(-1, -1, 1)
        ];//頂點坐標，一共8個頂點

         faces = [
             new THREE.Face3(0, 2, 1),
             new THREE.Face3(2, 3, 1),
             new THREE.Face3(4, 6, 5),
             new THREE.Face3(6, 7, 5),
             new THREE.Face3(4, 5, 1),
             new THREE.Face3(5, 0, 1),
             new THREE.Face3(7, 6, 2),
             new THREE.Face3(6, 3, 2),
             new THREE.Face3(5, 7, 0),
             new THREE.Face3(7, 2, 0),
             new THREE.Face3(1, 3, 4),
             new THREE.Face3(3, 6, 4),
        ];//頂點索引，每一個面都會根據頂點索引的順序去繪製線條

        geom = new THREE.Geometry();
        geom.vertices = vertices;
        geom.faces = faces;
        geom.computeFaceNormals();//計演算法向量，會對光照產生影響

        //兩個材質放在一起使用
        let materials = [
            new THREE.MeshLambertMaterial({opacity: 0.6, color: 0x44ff44, transparent: true}),//透明度更改
            new THREE.MeshBasicMaterial({color: 0x000000, wireframe: true})//線條材質，讓觀察更直觀一點

        ];
        //創建多材質對象，要引入SceneUtils.js文件，如果只有一個材質就不需要這個函數
        mesh = THREE.SceneUtils.createMultiMaterialObject(geom, materials);
        mesh.children.forEach(function (e) {
            e.castShadow = true
        });
        scene.add(mesh);

        initDat();
    }
   //可視化面板
    function initDat() {
        function addControl(x, y, z) {
            controls = new function () {
                this.x = x;
                this.y = y;
                this.z = z;
            };
            return controls;
        }
        controlPoints.push(addControl(3, 5, 3));
        controlPoints.push(addControl(3, 5, 0));
        controlPoints.push(addControl(3, 0, 3));
        controlPoints.push(addControl(3, 0, 0));
        controlPoints.push(addControl(0, 5, 0));
        controlPoints.push(addControl(0, 5, 3));
        controlPoints.push(addControl(0, 0, 0));
        controlPoints.push(addControl(0, 0, 3));

        //克隆一個幾何體
        let addClone = new function () {
            this.clone = function () {

                let clonedGeometry = mesh.children[0].geometry.clone();
                let materials = [
                    new THREE.MeshLambertMaterial({opacity: 0.6, color: 0xff44ff, transparent: true}),
                    new THREE.MeshBasicMaterial({color: 0x000000, wireframe: true})

                ];

                let mesh2 = THREE.SceneUtils.createMultiMaterialObject(clonedGeometry, materials);
                mesh2.children.forEach(function (e) {
                    e.castShadow = true
                });

                mesh2.translateX(Math.random()*4+3);
                mesh2.translateZ(Math.random()*4+3);
                mesh2.name = "clone";
                //刪掉場景中已經存在的克隆體，再重新創建一個
                scene.remove(scene.getChildByName("clone"));
                scene.add(mesh2);


            }
        };

        let gui = new dat.GUI();

        gui.add(addClone, 'clone');

        for (let i = 0; i < 8; i++) {
            let f1 = gui.addFolder('Vertices ' + (i + 1));//把每個頂點的三個坐標都收攏在一個Folder裡面，更加美觀方便
            f1.add(controlPoints[i], 'x', -10, 10);
            f1.add(controlPoints[i], 'y', -10, 10);
            f1.add(controlPoints[i], 'z', -10, 10);

        }
    }

   // 攝像機的控制，可以採用滑鼠拖動來控制視野
    function cameraControl() {
        controller = new THREE.OrbitControls(camera, renderer.domElement);
        controller.target = new THREE.Vector3(0, 0, 0);
    }

    let plane;

    //初始化物體
    function initObject() {
        //定義了一個地面
        let planeGeometry = new THREE.PlaneGeometry(100, 100, 1, 1);
        let planeMaterial = new THREE.MeshLambertMaterial({
            color: 0xffffff,
        });
        plane = new THREE.Mesh(planeGeometry, planeMaterial);
        plane.rotation.x = -0.5 * Math.PI;
        plane.position.x = 15;
        plane.receiveShadow = true;//開啟地面的接收陰影
        scene.add(plane);//添加到場景中
        // initCustomObj();
    }

    //定義的一個功能文件
    function initSetting() {
        loadAutoScreen(camera, renderer);
        loadFullScreen();
        loadStats();
    }

    //動畫
    function render() {
        stats.update();
        //單材質幾何體要更新頂點的話使用這一段語句
        // for (let i = 0; i < 8; i++) {
        //     console.log(mesh);
        //     mesh.geometry.vertices[i].set(controlPoints[i].x, controlPoints[i].y, controlPoints[i].z);
        //     mesh.geometry.verticesNeedUpdate = true;
        //     mesh.geometry.computeFaceNormals();
        // }
        let vertices = [];
        for (let i = 0; i < 8; i++) {
            vertices.push(new THREE.Vector3(controlPoints[i].x, controlPoints[i].y, controlPoints[i].z));
        }
        mesh.children.forEach(function (e) {
            e.geometry.vertices = vertices;
            e.geometry.verticesNeedUpdate = true;//通知頂點更新
            e.geometry.elementsNeedUpdate = true;//特別重要，通知線條連接方式更新
            e.geometry.computeFaceNormals();
        });

        requestAnimationFrame(render);
        renderer.render(scene, camera);
    }
    //主函數
    function threeStart() {
        initThree();
        initObject();
        initSetting();
        render();
    }
</script>
</body>
</html>

特別要註意的是

在頂點發生變化時，如果是多材質對象的話，需要使用遍歷每一個子對象來進行更新頂點數據。並且不僅要更新頂點，還要更新線條的連接方式geometry.elementsNeedUpdate = true，否則是沒有效果的。（甚至嘗試了一下不更新頂點，只更新線條也是可以達到實時更新的效果）

let vertices = [];
        for (let i = 0; i < 8; i++) {
            vertices.push(new THREE.Vector3(controlPoints[i].x, controlPoints[i].y, controlPoints[i].z));
        }
        mesh.children.forEach(function (e) {
            e.geometry.vertices = vertices;
            e.geometry.verticesNeedUpdate = true;//通知頂點更新
            e.geometry.elementsNeedUpdate = true;//特別重要，通知線條連接方式更新
            e.geometry.computeFaceNormals();
        });

如果是單一的材質幾何體，就不需要去遍歷每一個子物體，直接把幾何體的每一個頂點值更改，然後在通知頂點更新，就可以了。

     //單材質幾何體要更新頂點的話使用這一段語句
         for (let i = 0; i < 8; i++) {
             console.log(mesh);
            mesh.geometry.vertices[i].set(controlPoints[i].x, controlPoints[i].y, controlPoints[i].z);
            mesh.geometry.verticesNeedUpdate = true;
            mesh.geometry.computeFaceNormals();
        }

註：

老版本的three.js，SceneUtils是沒有單獨拿出來作為一個js文件的，是直接寫在three.js里。
而且使用69版本的three.js時，不需要更新線條的連接方式也可以實現實時更新。但是103版本試了很多次，都不行。
另外，使用的OrbitControls.js和dat.gui.min.js最好都是和自己用的Three.js版本要一致，否則可能會報錯。有一些教程的示常式序版本可能就比較舊了，如果直接拿來用可能會出問題，註意分辨一下。


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

-Advertisement-
Play Games
更多相關文章
  • 解決Android編譯時出現aapt.exe finished with non-zero exit value 1（第二篇）
    之前出現該錯誤，我用的是這個方法： https://www.cnblogs.com/tangZH/p/10691383.html 然而遺憾的是，這次不管用了，無奈，只好另尋他法，其實會出現這個錯誤就是資源文件出現問題，導致無法被打包。 從具體的錯誤裡面也可以看出，確實是資源文件出了問題 點擊右上角g ...
  • svn統計代碼行數（增量）
    轉載請標明出處，維權必究：https://www.cnblogs.com/tangZH/p/10770296.html android代碼，兩個版本之間，代碼行數增加了多少，怎麼得出呢？ 1.安裝TortoiseSVN，在安裝時需要安裝svn命令行工具。 2、下載StatSVN包，官網：http:/ ...
  • Android6.0 源碼修改之 Contacts應用
    一、Contacts應用的主界面和聯繫人詳情界面增加頂部菜單添加退出按鈕 通過Hierarchy View 工具可以發現 主界面對應的類為 PeopleActivity 聯繫人詳情界面對應的類為 QuickContactActivity 左上角的退出按鈕其實很簡單，系統actionBar已經幫我們實 ...
  • 安卓開發常用icon/png圖樣
    平時開發當中會用到很多png圖樣，但是自己又不太會做，因此做好的辦法就是直接在網上下載下來用了，這裡給大家推薦一個比較好用的網站，免費的，有很多好的png可以直接下載下來使用。 在我們瀏覽器當中輸入以上代碼就可以得到巨量可用的png圖片了。 ...
  • 瑞芯微RKnanC晶元處理器介紹
    RKnanC是一種低成本、低功耗、高效率的數字多媒體晶元，它是基於ARM的低功耗處理器結構和硬體加速器。它是專為攜帶型音頻產品應用，如MP3播放器等。 RKnanC可以支持各種音頻標準的解碼，如MP3/WMA/OGG/標誌/AAC等。由於內置音頻硬體加速器，rknanc可以在非常低的系統中實現音頻解 ...
  • 安卓開發筆記（二十八）：仿寫IOS switch選擇器控制項實現，checkbox
    我們先來看看效果： 這裡我們主要使用了github上的一個開源項目，配置起來比較方便，下麵解釋一下該如何使用：首先是：Gradle文件當中進行配置： 當然如果是老版本的Android Studio則使用： 二.activity 其中的第一個監聽器是switch在選擇的時候，所觸發的事件。第二個監聽器 ...
  • Android ADB命令詳解
    adb的全稱為Android Debug Bridge.是android司機經常用到的工具 . 你能在本篇文章中學到什麼? adb基本指令 Shell AM&PM adb模擬用戶事件 logcat日誌 常用節點 遠程ADB 常用命令集 一. 基本指令 進入指定設備 adb -s serialNumb ...
  • 頁面性能優化-原生JS實現圖片懶載入
    在項目開發中，我們往往會遇到一個頁面需要載入很多圖片的情況。我們可以一次性載入全部的圖片，但是考慮到用戶有可能只瀏覽部分圖片。所以我們需要對圖片載入進行優化，只載入瀏覽器視窗內的圖片，當用戶滾動時，再載入更多的圖片。這種載入圖片的方式叫做圖片懶載入，又叫做按需載入或圖片的延時載入。這樣做的好處是：1 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 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 ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類