ThingJS 3D框架簡(jiǎn)化了開發(fā)工作，面向?qū)ο蠛湍K化的特點(diǎn)使得網(wǎng)頁(yè)代碼更加易于管理和維護(hù)，并且提供近200個(gè)官方示例，直接獲取API能力，不需要基于3D概念進(jìn)行開發(fā)，適合3D商業(yè)項(xiàng)目快速生成！距離您的業(yè)務(wù)僅一層之隔，是非開發(fā)者也容易理解的一種應(yīng)用方法。

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

今天一并總結(jié)常見的3D開發(fā)概念及其使用方法，包括：（1）第一人稱漫游；（2）圖片紋理；（3）子類與層級(jí)關(guān)系；（4）線段處理；（5）粒子系統(tǒng)。對(duì)于這些內(nèi)容的解釋和說(shuō)明，我們?cè)谀_本文件中穿插進(jìn)行，看看three.js和ThingJS實(shí)現(xiàn)過(guò)程中有何區(qū)別？

第一人稱漫游

它允許用戶通過(guò)鍵盤或鼠標(biāo)對(duì)場(chǎng)景進(jìn)行巡游控制，ThingJS平臺(tái)通過(guò)第一人稱行走控件實(shí)現(xiàn)。和three.js的代碼量相比，顯然更加輕量化。

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

圖片紋理

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

ThingJS中提供直接貼圖的方式來(lái)實(shí)現(xiàn)模型紋理，建模師只要導(dǎo)入類似于照片效果的圖形，簡(jiǎn)單實(shí)現(xiàn)模型的紋理，雖然無(wú)法實(shí)現(xiàn)three.js那樣的細(xì)節(jié)定制化，仍舊可以改變參數(shù)來(lái)接近實(shí)景效果。

// 設(shè)置攝像機(jī)位置和目標(biāo)點(diǎn)app.camera.position = [24.642510549459775, 4.302692201327658, 16.259715252398298];app.camera.target = [16.850313962013193, 0.15861977649910672, 4.364786416484356];new THING.widget.Button('創(chuàng)建 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', // 中心點(diǎn)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;}})

子類與層級(jí)關(guān)系

在此示例中，月亮屬于地球的子類，將跟隨地球一起繞太陽(yáng)公轉(zhuǎn)，通過(guò)創(chuàng)建子類，不管地球如何運(yùn)動(dòng)，月亮將自動(dòng)跟隨地球，程序不需要再單獨(dú)處理這部分內(nèi)容。層級(jí)關(guān)系是計(jì)算機(jī)動(dòng)畫的重要概念之一。比如骨骼動(dòng)畫，對(duì)于人體動(dòng)畫，小腿骨骼將跟隨大腿骨骼一起運(yùn)動(dòng)。

在 ThingJS 場(chǎng)景中，每個(gè)對(duì)象，都可以通過(guò) children 訪問(wèn)到下層子對(duì)象物體，通過(guò) parent 訪問(wèn)到對(duì)應(yīng)的父物體。創(chuàng)建一個(gè)物體對(duì)象時(shí)，可指定該對(duì)象的父物體；一個(gè)物體對(duì)象也可以通過(guò) add ，添加子物體。

線段處理

在真實(shí)的太陽(yáng)系中并沒(méi)有軌道線，但在程序中加入軌道線將使場(chǎng)景更加美觀。我們使用圓形軌道來(lái)模擬真實(shí)軌道（真實(shí)軌道是橢圓的），THREE.LineBasicMaterial材質(zhì)可將geometry中的頂點(diǎn)逐個(gè)相連，只要分段足夠多，最終的效果將趨于平滑的圓形，本例中，軌道線被分成了120段。

ThingJS提供軌跡線應(yīng)用，直接封裝了three.js有關(guān)于線條、材質(zhì)的3D概念，直接取用軌跡線的對(duì)象規(guī)則來(lái)創(chuàng)建軌跡線，實(shí)現(xiàn)便捷開發(fā)。

/*** 說(shuō)明：軌跡線應(yīng)用*/ 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]);}// 創(chuàng)建軌跡線line = app.create({type: 'Line',color: 0x00FF00, // 軌跡線顏色dotSize: 2, // 軌跡點(diǎn)的大小dotColor: 0xFF0000, // 軌跡點(diǎn)的顏色points: points,})// 小車開始沿軌跡線運(yùn)動(dòng)play();// 創(chuàng)建按鈕new THING.widget.Button('開始移動(dòng)', play);new THING.widget.Button('軌跡線', showLines);new THING.widget.Button('軌跡點(diǎn)', showPoints); });// 物體跟隨軌跡線運(yùn)動(dòng) function play() {var car = app.query('car01')[0];car.movePath({'path': line.points, // 軌跡路線'time': 12000, // 移動(dòng)時(shí)間'orientToPath': true, // 物體移動(dòng)時(shí)沿向路徑方向}); }// 顯示/隱藏軌跡線 var lineVisible = true; function showLines() {lineVisible = !lineVisible;line.showLines(lineVisible); }// 顯示/隱藏軌跡點(diǎn) var pointVisible = true; function showPoints() {pointVisible = !pointVisible;line.showPoints(pointVisible); }

粒子系統(tǒng)

為使整個(gè)地月系看起來(lái)更加生動(dòng)，我們?yōu)槠涮砑恿吮尘靶强?#xff0c;隨機(jī)地添加了1000顆星星，它們的大小和亮度不等，類似的情形包括煙霧效果、火焰效果、波紋效果等，在Three.js中，這類效果可以使用粒子系統(tǒng)來(lái)實(shí)現(xiàn)，即THREE.ParticleSystem。

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

// 創(chuàng)建火焰粒子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, // 設(shè)置粒子的父物體localPosition: [0, 0, 0] // 設(shè)置粒子相對(duì)于父物體的位置});}})

如果將場(chǎng)景擴(kuò)展到了整個(gè)太陽(yáng)系，包含水星、金星、地球、火星、木星、土星六大近地行星，所有星球均按真實(shí)大小比例和距太陽(yáng)的距離構(gòu)造，通過(guò)第一人稱視角漫游，用戶可以自由選擇在任意位置、任意角度來(lái)觀察太陽(yáng)系，一樣可以通過(guò)ThingJS的第一人稱行走簡(jiǎn)單實(shí)現(xiàn)！

只要對(duì)技術(shù)實(shí)現(xiàn)邏輯清晰，就可以在不同的場(chǎng)景上輕松應(yīng)用規(guī)則，實(shí)現(xiàn)快速的規(guī)模化3D開發(fā)！

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。