javascript
js 点击button切换颜色_ThingJS 和three.js开发示例对比,让开发早点下班回家!3D 可视化...
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)題。
- 上一篇: arduino i2c 如何写16位寄存
- 下一篇: Spring.io本地服务器解决超时问题