蜜桃av色欲a片精品一区,麻豆aⅴ精品无码一区二区,亚洲人成网站在线播放影院在线,亚洲 素人 字幕 在线 最新

  ThingJS 和Threejs在3D開發(fā)框架對(duì)比

發(fā)布日期：2022/1/16 16:27:46      瀏覽量：

我們下面就基于WebGL技術(shù)探討一下現(xiàn)在的兩款3D框架。

Threejs (http://threejs.org/)
目前最流行的開源3D框架，2009年4月誕生，2005年adobe收購了macromedia的flash產(chǎn)品，2008，2009年正是flash如日中天之時(shí),threejs也識(shí)時(shí)務(wù)的選擇了flash的ActionScript平臺(tái)，后來flash沒落之后選擇了WebGL。

ThingJS (http://thingjs.com/)
新興的3D框架，2018年誕生，是針對(duì)物聯(lián)網(wǎng)領(lǐng)域的JavaScript 3D Library。它是由在3D領(lǐng)域經(jīng)營多年的優(yōu)锘科技公司研發(fā)，旨在簡化3D應(yīng)用開發(fā)。

設(shè)計(jì)角度
WebGL可以處理3D圖像，聽起來是非常高興的一件事，但是WebGL實(shí)在是太底層了，WebGl解決是如何再畫布上畫圖的問題，怎么畫點(diǎn)，線，面，怎么上色，怎么貼圖，怎么處理光線，視角轉(zhuǎn)動(dòng)之后怎么換算繪制等等。這些對(duì)于一個(gè)做3D應(yīng)用的開發(fā)者來說要學(xué)的東西太多了。

Threejs庫的出現(xiàn)解決了底層的渲染細(xì)節(jié)和復(fù)雜的數(shù)據(jù)結(jié)構(gòu)，終于將復(fù)雜的底層細(xì)節(jié)抽象出來，使得大家開發(fā)3D應(yīng)用更容易了一些。和很多開發(fā)者交流threejs都是他們首次接觸的WebGL 3D庫，并能很容易的就能開始做一些實(shí)驗(yàn)。但是使用Threejs開發(fā)應(yīng)用還是門檻很高，但就一個(gè)加載模型，調(diào)光，選擇模型彈框的功能，就能寫出Threejs上百行代碼。同時(shí)還有很多復(fù)雜的3D概念需要理解。這時(shí)就需要ThingJS了。

ThingJS是更為上層的抽象，不用關(guān)心渲染，mesh，光線等復(fù)雜概念。它抽象是一個(gè)個(gè)具體的模型，ThingJS封裝了對(duì)模型交互事件的各種API，比如單擊，左鍵，鼠標(biāo)滑過等，ThingJS封裝了對(duì)模型的操作，例如移動(dòng)，放大縮小，上色，勾邊，甚至開門，ThingJS還封裝了模型的層次關(guān)系，例如物體是放在某個(gè)房間里的，房間又在某個(gè)樓層，樓層又是某個(gè)大樓的。大樓在園區(qū)里。

編碼對(duì)比
這里僅僅從3D模型加載這個(gè)小點(diǎn)進(jìn)行對(duì)比說明。更多內(nèi)容大家可參考各自的網(wǎng)站www.three.org 和 www.thingjs.com進(jìn)行詳細(xì)對(duì)比。
three的模型加載

function load3DModel(){
   /
     1、collada是一種基于XML的3D模型交互方案，簡單來說，就是一種3D模型可以通過collada轉(zhuǎn)換成另一種3D模型，
     從而，各種3D模型都可以通過collada轉(zhuǎn)換成web支持的3D模型。
     2、。dae是一個(gè)鐘3D模型的格式
     3、加載時(shí)注意瀏覽器同源策略的限制
    /
   var loader = new THREE.ColladaLoader();
   loader.load( "./model/avatar.dae", function ( collada ) {
      //找到模型中需要的對(duì)象。將相機(jī)看向這個(gè)對(duì)象是為了讓這個(gè)對(duì)象顯示在屏幕中心
      collada.scene.traverse( function ( child ) {
         if ( child instanceof THREE.SkinnedMesh ) {
            modelObj = child;
            camera.lookAt( child.position );
         }
      } );
      //將模型的場(chǎng)景加入到整體的場(chǎng)景
       modelObj.material.opacity = 0.8;
      scene.add( collada.scene ); //每個(gè)模型都要添加到場(chǎng)景
  
      //顯示出模型的骨骼的代碼,不需要可刪去
      var helper = new THREE.SkeletonHelper( modelObj );
      helper.material.linewidth = 3;
      scene.add( helper );
   } );
}

threejs 加載模型到場(chǎng)景每個(gè)細(xì)節(jié)都得自己處理。

我們?cè)賮砜聪耇hingJS的模型加載。

var app = new THING.App({
    container: ’div3d’,
    url: ’https://speech.uinnova.com/static/models/building’
});

只關(guān)注場(chǎng)景在頁面的div的id和場(chǎng)景存放的地址，所有的細(xì)節(jié)ThingJS都處理好了。

場(chǎng)景加載完之后便可從場(chǎng)景獲得加載內(nèi)容，并進(jìn)行交互應(yīng)用開發(fā)。

// 獲取建筑對(duì)象
var building = app.buildings[0];   
// 打印建筑中所有的樓層
building.floors.forEach(function(floor) {
    console.log(’Floor: ’ + floor.id);
});   
// 獲取室外對(duì)象
var outdoors = app.outdoors;       
// 打印室外所有物體
outdoors.things.forEach(function(thing) {
    console.log(’Thing: ’ + thing.id);
});
多么完美的封裝方式。更多細(xì)節(jié)可以到www.thingjs.com 查看。

three.js(www.three.org)和ThingJS(www.thingjs.com)都是JavaScript 3D Library，都對(duì)webGL的3D處理能力進(jìn)行了封裝，但是three.js 更偏三維技術(shù)底層，適用于3D愛好者學(xué)習(xí)3D技術(shù)；ThingJS更偏物聯(lián)網(wǎng)應(yīng)用功能開發(fā)，重在開發(fā)效率，降低開發(fā)成本，適合于使用3D技術(shù)做項(xiàng)目的開發(fā)者，只要學(xué)會(huì)JavaScript代碼即可上手。

原文鏈接：https://blog.csdn.net/ThingJS/article/details/107521762