Threejs之 .obj 模型投影

xavier 發(fā)布于2019-08-26 10:15 / 2262人閱讀

摘要：今天做項(xiàng)目的時(shí)候發(fā)現(xiàn)中模型投影與的投影有一點(diǎn)不同，寫個(gè)文章記錄一下，防止忘記，也希望能夠幫到大家如果對(duì)你的問題產(chǎn)生了幫助，就請(qǐng)點(diǎn)個(gè)贊吧原理模型投影的方法是通過遍歷中的元素，并給他們?cè)O(shè)置和核心代碼創(chuàng)建模型的完整代碼生成汽車模型這種方式?jīng)]有

今天做項(xiàng)目的時(shí)候發(fā)現(xiàn)threejs中.obj模型投影與geometry的投影有一點(diǎn)不同，寫個(gè)文章記錄一下，防止忘記，也希望能夠幫到大家！
如果對(duì)你的問題產(chǎn)生了幫助，就請(qǐng)點(diǎn)個(gè)贊吧 ^_^ ~

原理：
   .obj 模型投影的方法是通過遍歷 obj.children 中的元素，并給他們?cè)O(shè)置：castShadow 和 receiveShadow;

核心代碼：

     for(k in obj.children){
        obj.children[k].castShadow = true;
        obj.children[k].receiveShadow = true;
     }

創(chuàng)建模型的完整代碼：

    // 生成汽車模型    
    function initCar(){
      var geometry, material;
      var loader = new THREE.MTLLoader();
      loader.setPath("../3d-models/");
      loader.load("car.mtl", function(material){
        material.preload();

        let objLoader = new THREE.OBJLoader();
        objLoader.setMaterials(material);
        objLoader.load("../3d-models/car.obj", function(obj){

          for(k in obj.children){
            obj.children[k].castShadow = true;
            obj.children[k].receiveShadow = true;
          }
          // obj.receiveShadow = true;      // 這種方式?jīng)]有效果，只適用于 geometry 模型
          // obj.castShadow = true;         // 這種方式?jīng)]有效果，只適用于 geometry 模型

          scene.add(obj);
        })
      })
    }

geometry投影模型投影的代碼：（大家自行與.obj代碼對(duì)比一下）

    function initCube(){
      var geometry = new THREE.BoxGeometry(20, 20, 20);
      var material = new THREE.MeshPhongMaterial({ color: 0xff3300 });
      cube = new THREE.Mesh(geometry, material);

      cube.receiveShadow = true;        // 對(duì)比.obj
      cube.castShadow = true;           // 對(duì)比.obj

      scene.add(cube)
    }

仔細(xì)分析一下：

其實(shí)說白了，當(dāng)給模型添加陰影的時(shí)候，是在Mesh對(duì)象上設(shè)置castShadow 和 receiveShadow，而.obj對(duì)象是由許多個(gè)Mesh組成,都在obj.children中，因此需要遍歷obj.children來添加陰影效果。

看一下最終效果：

云服務(wù)器 GPU云服務(wù)器 ThreeJs threejs教程 objs obj

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/105866.html

相關(guān)文章

學(xué)習(xí)threejs走過的坑

摘要：在下幀數(shù)很低在學(xué)習(xí)的時(shí)候繪制了一個(gè)三角形，發(fā)現(xiàn)在中幀數(shù)只有幀，卡的像個(gè)，但是在和瀏覽器下幀數(shù)保持在左右，真的是日了了，于是上網(wǎng)搜索了解決方案。在瀏覽器中打開將黃字的啟用就可以了之模型的投影快戳我 1.在Chrome下幀數(shù)很低在學(xué)習(xí)的時(shí)候繪制了一個(gè)三角形，發(fā)現(xiàn)在chrome中幀數(shù)只有24幀，卡的像個(gè)PPT，但是在FF和QQ瀏覽器下幀數(shù)保持在60左右，真的是日了*了，于是上網(wǎng)搜索了解決方...

Salamander 2019-08-23 15:30 評(píng)論0 收藏0
vue-threeJS數(shù)據(jù)驅(qū)動(dòng)的三維圖形可視化

摘要：數(shù)據(jù)驅(qū)動(dòng)的三維圖形可視化在信息暴漲的年間，冷暴力的扁平化確實(shí)有效降低用戶的信息焦慮感，使有限的精力更高效處理過多的信息流。數(shù)據(jù)驅(qū)動(dòng)的三維圖形可視化在信息暴漲的2010-2016年間，冷暴力的扁平化確實(shí)有效降低用戶的信息焦慮感，使有限的精力更高效處理過多的信息流。二維平面化扁平化在蘋果等大頭引領(lǐng)下，成為大眾用戶機(jī)器交流默認(rèn)的語言。然后，隨著PC、平板、手機(jī)、智能家居等用戶持有終端的性...

SegmentFault 2019-08-23 11:37 評(píng)論0 收藏0
【Three.js】Three.js學(xué)習(xí)記錄

摘要：上帝覺得缺少了些生氣，便用泥巴捏了一個(gè)小人兒，不叫亞當(dāng)，她叫小芳。接下來預(yù)先恭喜你，你可以成為這網(wǎng)頁世界的一個(gè)小上帝。使用可以向場(chǎng)景中發(fā)射光線。在下述案例中，從攝像機(jī)的位置向場(chǎng)景中鼠標(biāo)的點(diǎn)擊位置發(fā)射光線。先得擺出幾個(gè)關(guān)鍵詞：場(chǎng)景、燈光、模型、材質(zhì)、貼圖與紋理、相機(jī)、渲染器。然后我開始裝模作樣地解釋：上帝說，要有場(chǎng)景！于是就有了場(chǎng)景，場(chǎng)景去納這萬事萬物。上帝說，要有光！于是就有了光...

chanthuang 2019-08-23 14:46 評(píng)論0 收藏0
【Three.js】Three.js學(xué)習(xí)記錄

摘要：上帝覺得缺少了些生氣，便用泥巴捏了一個(gè)小人兒，不叫亞當(dāng)，她叫小芳。接下來預(yù)先恭喜你，你可以成為這網(wǎng)頁世界的一個(gè)小上帝。使用可以向場(chǎng)景中發(fā)射光線。在下述案例中，從攝像機(jī)的位置向場(chǎng)景中鼠標(biāo)的點(diǎn)擊位置發(fā)射光線。先得擺出幾個(gè)關(guān)鍵詞：場(chǎng)景、燈光、模型、材質(zhì)、貼圖與紋理、相機(jī)、渲染器。然后我開始裝模作樣地解釋：上帝說，要有場(chǎng)景！于是就有了場(chǎng)景，場(chǎng)景去納這萬事萬物。上帝說，要有光！于是就有了光...

李濤 2019-08-02 14:06 評(píng)論0 收藏0
Threejs教程之著色器

摘要：學(xué)習(xí)基礎(chǔ)具備基本和著色器語言知識(shí)，不一定要深入學(xué)習(xí)。著色器所謂的材質(zhì)對(duì)象本質(zhì)上就是著色器代碼和需要傳遞的數(shù)據(jù)光源顏色矩陣。比更方便些，著色器中的很多變量不用聲明，系統(tǒng)會(huì)自動(dòng)幫你設(shè)置，比如頂點(diǎn)坐標(biāo)變量投影矩陣視圖矩陣 Three.js著色器很多時(shí)候如果想寫一些特效，往往需要編寫著色器代碼GLSL，如果你不熟悉著色器語言，自然需要學(xué)習(xí)著色器語言語法，如果你有著色器語言基礎(chǔ)，直接使用Thr...

darkbaby123 2019-08-23 12:08 評(píng)論0 收藏0