解决three.js渲染gltf 模型与gltfViewer网站效果不一致问题 krpano发黑问题 three.js gltf模型渲染发黑问题

偏执的太偏执、 2023-01-08 02:08 347阅读 0赞

## 解决使用three.js渲染gltf模型与gltfViewer网站上预览不一致的问题： ##

### 原因 灯光和环境贴图 直接上代码 ###

function init(e) {   //声明初始化函数
          $("#preview3D").html("");   //获取容器dom对象
          let camera, renderer, controls, guiControls, domW, domH, animateId;   //声明变量
          domW = $("#preview3D").css("width").replace("px", "") * 1; 	//拿宽高
          domH = $("#preview3D").css("height").replace("px", "") * 1;
          // 实例化renderer
          renderer = new THREE.WebGLRenderer({ 
            antialias: true,
            alpha: true,
          });
          // 背景色
          renderer.setClearColor(0x666666, 0);
          // 屏幕物理像素和px比率
          renderer.setPixelRatio(window.devicePixelRatio);
          // three.js 的色彩空间渲染方式 【重要】
          renderer.outputEncoding = THREE.sRGBEncoding;
          // 这个不知道干嘛用的 反正我加上了
          renderer.textureEncoding = THREE.sRGBEncoding;
          // 设置canvas宽高
          renderer.setSize(domW, domH);
          // 开启渲染阴影
          renderer.shadowMap.enabled = true;
          renderer.hadowMapEnabled = true;
          // 将renderer 加到dom元素上
          $("#preview3D")[0].appendChild(renderer.domElement);
          // 实例化场景
          scene = new THREE.Scene();
          // 添加灯光 【重要】
          function addLights(level) { 
            scene.add(new THREE.AmbientLight(0xffffff, 0.3));
            var light = new THREE.DirectionalLight(0xffffff, 0.8 * Math.PI);
            light.position.set(0, 50, 0);
            scene.add(light);
          }
          addLights();
          // 灯光参数我是按照gltfViewer中的参数输入的，为了保持一直可以根据需求动态添加
          /*添加背景 */
          createObjDetailScene();
          // 添加背景声明函数
          function createObjDetailScene() { 
          	// 实例化透视投影镜头
            camera = new THREE.PerspectiveCamera(45, domW / domH, 1, 1000);
            camera.position.set(0, 0, -1);
            camera.lookAt(scene.position);
            // 注意参数
            initContent();
            /* 场景中的内容 */
            function initContent() { 
              let object;
              // 加载 glTF 格式的模型，实例化gltfLoader加载器
              let loader = new THREE.GLTFLoader(); /*实例化加载器*/
              var pmremGenerator = new THREE.PMREMGenerator(renderer);
              pmremGenerator.compileEquirectangularShader();
              let flag = false;
             	// 这里应该是根据需要走判断 本身发暗的模型就用sunset 
             	// 发亮急用court
             	// 不需要环境的使用null
              let str = "img/venice_sunset_1k.hdr";
               // str = "img/footprint_court_2k.hdr";
              console.log(str);
              try { 
              // 单张环境贴图加载器实例化
                new THREE.RGBELoader()
                  .setDataType(THREE.UnsignedByteType)
                  .load(str, function (texture) { 
                    var envMap = pmremGenerator.fromEquirectangular(texture)
                      .texture;
                    scene.environment = envMap;
                    texture.dispose();
                    pmremGenerator.dispose();
                  });
              } catch (e) { 
                console.log(e);
              }
              // 加载gltf模型
              loader.load(url, function (gltf) { 
                console.log(gltf)
                gltf.scene.traverse(function (child) { 
                  if (child instanceof THREE.Mesh) { 
                    //设置模型生成阴影并接收阴影
                    child.castShadow = true;
                    child.receiveShadow = true;
                  }
                });
                object = gltf.scene
                 object.scale.set(100, 100, 100);
                let center = getCenterPosition(object);
                object.position.set(-center.x, -center.y, -center.z);
                scene.add(gltf.scene);
              },xhr=>{ 
                console.log(xhr)
              },err=>{ 
                console.log(err)
              });
            }
            // 控制器 放大倍数 缩小倍数 是否自动旋转及速度
            controls = new THREE.OrbitControls(camera, renderer.domElement);
            controls.minDistance = 200;
            controls.maxDistance = 800;
            controls.autoRotate = true;
            controls.autoRotateSpeed = 1.7;
            animate();
            // 根据屏幕大小变化自动放大缩小canvas
            window.addEventListener("resize", onWindowResize, false);
            function onWindowResize(event) { 
              SCREEN_WIDTH = $("#preview3D").css("width").replace("px", "") * 1;
              SCREEN_HEIGHT = $("#preview3D").css("height").replace("px", "") * 1;
              renderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT);
              if (camera) { 
                camera.aspect = SCREEN_WIDTH / SCREEN_HEIGHT;
                camera.updateProjectionMatrix();
              }
            }
    		
            function animate() { 
              animateId = requestAnimationFrame(animate);
              controls.update();
              renderer.render(scene, camera);
            }
          }
          const getCenterPosition = (object) => { 
            let p;
            if (object.isMesh) { 
              object.geometry.computeBoundingBox();
              p = object.geometry.boundingBox.getCenter(new THREE.Vector3()); //.multiplyScalar(1) //加上这个表示放大了几倍 1为放大倍数
            } else { 
              p = new THREE.Box3()
                .setFromObject(object)
                .getCenter(new THREE.Vector3());
            }
            return p;
          };
        };

发表评论取消回复

表情：

评论列表（有 0 条评论，347人围观）

还没有评论，来说两句吧...

相关阅读

相关 Three.js加载glb / gltf模型，Vue加载glb / gltf模型（如何在vue中使用three.js，vue使用threejs加载glb模型）

Three.js可以用来展示产品模型、建立交互式场景、游戏开发、数据可视化、教育和培训等等

矫情吗；*/ 2024年04月24日 15:03/ 0 赞/ 97 阅读

相关 cesium操作gltf模型的场景对象

好的。如果你想要在 Cesium 中操作 glTF 模型的场景对象，你可以使用 Cesium 的 `Model` 类。你可以在 Cesium 的场景中创建一个 `Model

亦凉/ 2024年03月25日 19:15/ 0 赞/ 99 阅读

相关解决three.js渲染gltf 模型与gltfViewer网站效果不一致问题 krpano发黑问题 three.js gltf模型渲染发黑问题

解决使用three.js渲染gltf模型与gltfViewer网站上预览不一致的问题：原因灯光和环境贴图直接上代码 function init(e)

偏执的太偏执、/ 2023年01月08日 02:08/ 0 赞/ 348 阅读

相关 threejs合并模型的几何体提高渲染速度

对 `dae` 格式的三维模型进行合并，第一个函数对模型类型分类后合并，第二个函数对同一类的模型合并，第三个函数对模型的几何体合并；使用了 `threejs` 类库和 `jQu

素颜马尾好姑娘i/ 2022年10月11日 12:16/ 0 赞/ 267 阅读

相关 [cesium] | 基于threejs的后处理渲染

![20210626171728100.gif][] [20210626171728100.gif]: /images/20221005/9dd774e98c9a4d3f8

喜欢ヅ旅行/ 2022年10月10日 04:58/ 0 赞/ 239 阅读

相关 3ds转gltf 如何从3ds max中导出gltf模型

转换前 ![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAR0lT6Zi

电玩女神/ 2022年09月11日 14:22/ 0 赞/ 157 阅读

相关 ThreeJs学习笔记——渲染(render)分析

一、前言 ThreeJs 封装了 WebGL 进行渲染时所涉及到的相关概念，如光照，材质，纹理以及相机等。除此之外，其还抽象了场景(Scene)以及用于渲染的渲染器(We

爱被打了一巴掌/ 2022年04月27日 22:16/ 0 赞/ 1527 阅读

相关 threejs：模型轻量化

参考链接：[https://blog.csdn.net/ALLENJIAO/article/details/80830700][https_blog.csdn.net_ALLE

ゝ一纸荒年。/ 2022年02月21日 04:23/ 0 赞/ 355 阅读

相关 threejs：实现模型爆炸效果

参考文献：[https://blog.csdn.net/qq\_30621091/article/details/84585790][https_blog.csdn.net_q

水深无声/ 2022年02月21日 03:59/ 0 赞/ 1034 阅读

相关 threejs： buffergeometry/gltf的模型导入及格式解析（json后缀）

Three.js JSON格式，它与obj功能类似，用于加载网格，全部数据记录在json形式的文档中，其中vertices处，是大量的数组。顶点数据，法向量。构成的面片信息。

墨蓝/ 2022年01月14日 14:07/ 0 赞/ 1413 阅读