ThingJS 3D框架簡化了開發工作，面向對象和模塊化的特點使得網頁代碼更加易于管理和維護，并且提供近200個官方示例，直接獲取API能力，不需要基于3D概念進行開發，適合3D商業項目快速生成！距離您的業務僅一層之隔，是非開發者也容易理解的一種應用方法。

Three.js是更為底層的3D渲染器，提供各式各樣的3D開發概念，例如材質、網格、shader、燈光，逐一進行定制化開發，要求程序員要有清晰的設計思路，尤其是在3D對象類的定義上。

今天一并總結常見的3D開發概念及其使用方法，包括：（1）第一人稱漫游；（2）圖片紋理；（3）子類與層級關系；（4）線段處理；（5）粒子系統。對于這些內容的解釋和說明，我們在腳本文件中穿插進行，看看three.js和ThingJS實現過程中有何區別？

第一人稱漫游

它允許用戶通過鍵盤或鼠標對場景進行巡游控制，ThingJS平臺通過第一人稱行走控件實現。和three.js的代碼量相比，顯然更加輕量化。

// 添加控件 var ctrl = null; var gui = null; function add_control() {if (ctrl) {return;}app.camera.position = [0, 10, 0];// 起始位置 就是攝像機位置, 不設置就會在攝像機位置直接開始ctrl = app.addControl(new THING.WalkControl({ // 參數可以動態修改walkSpeed: 0.02, // 行走速度turnSpeed: 0.25, // 右鍵旋轉速度gravity: 29.8, // 物體重量eyeHeight: 1.6, // 人高度jumpSpeed: 10, // 按空格鍵 跳躍的速度enableKeyRotate: false, // 默認不開啟鍵盤控制旋轉useCollision: false, // 默認不開啟碰撞檢測useGravity: true // 默認開啟重力}));

圖片紋理

在真實的3D場景中，模型是有紋理的，而不僅僅是只有顏色值，Three.js通過ImageUtils.loadTexture方法使用圖片紋理對3D模型進行貼圖，使得模型更接近真實。例如，MeshLambertMaterial（朗勃面）是一種很常用的材質，它將使用漫反射的方式引用前面的紋理圖片，最終效果還與光線有關；另外一種常用的材質是MeshPhongMaterial，它可以產生鏡面效果。

ThingJS中提供直接貼圖的方式來實現模型紋理，建模師只要導入類似于照片效果的圖形，簡單實現模型的紋理，雖然無法實現three.js那樣的細節定制化，仍舊可以改變參數來接近實景效果。

// 設置攝像機位置和目標點app.camera.position = [24.642510549459775, 4.302692201327658, 16.259715252398298];app.camera.target = [16.850313962013193, 0.15861977649910672, 4.364786416484356];new THING.widget.Button('創建 Box', function () {var box = app.query('#myBox01')[0];if (box) return;box = app.create({type: 'Box',id: 'myBox01',width: 2.0, // 寬度height: 2.0, // 高度depth: 2.0, // 深度center: 'Bottom', // 中心點position: [18, 0, 8],style: {image: 'images/uv.jpg',color: '#ffffff',}});})new THING.widget.Button('換 Box 貼圖', function () {var imgUrl = 'https://www.thingjs.com/static/images/avatar.png';var box = app.query('#myBox01')[0];if (box) {box.style.image = imgUrl;}})

子類與層級關系

在此示例中，月亮屬于地球的子類，將跟隨地球一起繞太陽公轉，通過創建子類，不管地球如何運動，月亮將自動跟隨地球，程序不需要再單獨處理這部分內容。層級關系是計算機動畫的重要概念之一。比如骨骼動畫，對于人體動畫，小腿骨骼將跟隨大腿骨骼一起運動。

在 ThingJS 場景中，每個對象，都可以通過 children 訪問到下層子對象物體，通過 parent 訪問到對應的父物體。創建一個物體對象時，可指定該對象的父物體；一個物體對象也可以通過 add ，添加子物體。

線段處理

在真實的太陽系中并沒有軌道線，但在程序中加入軌道線將使場景更加美觀。我們使用圓形軌道來模擬真實軌道（真實軌道是橢圓的），THREE.LineBasicMaterial材質可將geometry中的頂點逐個相連，只要分段足夠多，最終的效果將趨于平滑的圓形，本例中，軌道線被分成了120段。

ThingJS提供軌跡線應用，直接封裝了three.js有關于線條、材質的3D概念，直接取用軌跡線的對象規則來創建軌跡線，實現便捷開發。

/*** 說明：軌跡線應用*/ app = new THING.App({url: 'https://www.thingjs.com/static/models/simplebuilding' });//軌跡線 var line; app.on('load', function () {var points = [];var radius = 20;for (var degree = 0, y = 0.5; degree <= 520; degree += 2) {var x = Math.cos(degree * 2 * Math.PI / 360) * radius;var z = Math.sin(degree * 2 * Math.PI / 360) * radius;points.push([x, y, z]);}// 創建軌跡線line = app.create({type: 'Line',color: 0x00FF00, // 軌跡線顏色dotSize: 2, // 軌跡點的大小dotColor: 0xFF0000, // 軌跡點的顏色points: points,})// 小車開始沿軌跡線運動play();// 創建按鈕new THING.widget.Button('開始移動', play);new THING.widget.Button('軌跡線', showLines);new THING.widget.Button('軌跡點', showPoints); });// 物體跟隨軌跡線運動 function play() {var car = app.query('car01')[0];car.movePath({'path': line.points, // 軌跡路線'time': 12000, // 移動時間'orientToPath': true, // 物體移動時沿向路徑方向}); }// 顯示/隱藏軌跡線 var lineVisible = true; function showLines() {lineVisible = !lineVisible;line.showLines(lineVisible); }// 顯示/隱藏軌跡點 var pointVisible = true; function showPoints() {pointVisible = !pointVisible;line.showPoints(pointVisible); }

粒子系統

為使整個地月系看起來更加生動，我們為其添加了背景星空，隨機地添加了1000顆星星，它們的大小和亮度不等，類似的情形包括煙霧效果、火焰效果、波紋效果等，在Three.js中，這類效果可以使用粒子系統來實現，即THREE.ParticleSystem。

ThingJS封裝了粒子效果的實現方法，是更為頂層的抽象，所以減少了代碼量和開發投入，更受3D開發初學者的歡迎，如直接用query查詢API接口，在場景中加入火焰效果。

// 創建火焰粒子new THING.widget.Button('create', function () {var fire = app.query('#fire01')[0];if (!fire) {app.create({id: 'fire01',type: 'ParticleSystem',url: 'https://model.3dmomoda.com/models/19061018snbajhvuzrheq9sbgwdoefuk/0/particles',parent: car, // 設置粒子的父物體localPosition: [0, 0, 0] // 設置粒子相對于父物體的位置});}})

如果將場景擴展到了整個太陽系，包含水星、金星、地球、火星、木星、土星六大近地行星，所有星球均按真實大小比例和距太陽的距離構造，通過第一人稱視角漫游，用戶可以自由選擇在任意位置、任意角度來觀察太陽系，一樣可以通過ThingJS的第一人稱行走簡單實現！

只要對技術實現邏輯清晰，就可以在不同的場景上輕松應用規則，實現快速的規模化3D開發！

總結

以上是生活随笔為你收集整理的js 点击button切换颜色_ThingJS 和three.js开发示例对比，让开发早点下班回家！3D 可视化...的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。