<li id="e40u0"></li>

<fieldset id="e40u0"></fieldset>

<ul id="e40u0"></ul>

<strike id="e40u0"></strike>

Threejs之 .obj 模型投影

xavier 發布于2019-08-26 10:15 / 2266人閱讀

摘要：今天做項目的時候發現中模型投影與的投影有一點不同，寫個文章記錄一下，防止忘記，也希望能夠幫到大家如果對你的問題產生了幫助，就請點個贊吧原理模型投影的方法是通過遍歷中的元素，并給他們設置和核心代碼創建模型的完整代碼生成汽車模型這種方式沒有

今天做項目的時候發現threejs中.obj模型投影與geometry的投影有一點不同，寫個文章記錄一下，防止忘記，也希望能夠幫到大家！
如果對你的問題產生了幫助，就請點個贊吧 ^_^ ~

原理：
   .obj 模型投影的方法是通過遍歷 obj.children 中的元素，并給他們設置：castShadow 和 receiveShadow;

核心代碼：

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

創建模型的完整代碼：

    // 生成汽車模型    
    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;      // 這種方式沒有效果，只適用于 geometry 模型
          // obj.castShadow = true;         // 這種方式沒有效果，只適用于 geometry 模型

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

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

    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;        // 對比.obj
      cube.castShadow = true;           // 對比.obj

      scene.add(cube)
    }

仔細分析一下：

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

看一下最終效果：

云服務器 GPU云服務器 ThreeJs threejs教程 objs obj

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/105866.html

學習threejs走過的坑

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

Salamander 2019-08-23 15:30 評論0 收藏0
vue-threeJS數據驅動的三維圖形可視化

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

SegmentFault 2019-08-23 11:37 評論0 收藏0
【Three.js】Three.js學習記錄

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

chanthuang 2019-08-23 14:46 評論0 收藏0
【Three.js】Three.js學習記錄

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

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

摘要：學習基礎具備基本和著色器語言知識，不一定要深入學習。著色器所謂的材質對象本質上就是著色器代碼和需要傳遞的數據光源顏色矩陣。比更方便些，著色器中的很多變量不用聲明，系統會自動幫你設置，比如頂點坐標變量投影矩陣視圖矩陣 Three.js著色器很多時候如果想寫一些特效，往往需要編寫著色器代碼GLSL，如果你不熟悉著色器語言，自然需要學習著色器語言語法，如果你有著色器語言基礎，直接使用Thr...

darkbaby123 2019-08-23 12:08 評論0 收藏0