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

最新推荐文章于 2024-08-15 10:16:03 发布

置顶

程序员徐金

最新推荐文章于 2024-08-15 10:16:03 发布

阅读量3.2k

点赞数 3

分类专栏： krpano 文章标签： javascript 前端 html5

本文链接：https://blog.csdn.net/qq_42821539/article/details/112779013

版权

解决使用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元素上
      $