Threejs之 .obj 模型投影

xavier 发布于2019-08-26 10:15 / 1994人阅读

摘要：今天做项目的时候发现中模型投影与的投影有一点不同，写个文章记录一下，防止忘记，也希望能够帮到大家如果对你的问题产生了帮助，就请点个赞吧原理模型投影的方法是通过遍历中的元素，并给他们设置和核心代码创建模型的完整代码生成汽车模型这种方式没有

今天做项目的时候发现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来添加阴影效果。

看一下最终效果：

云服务器海外云主机 ThreeJs threejs教程 objs obj

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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