L7 icon indicating copy to clipboard operation
L7 copied to clipboard

Three渲染的物体,使用webpack或umi打包后,光照跟旋转角度等都出现了问题

Open jiaicon opened this issue 2 years ago • 1 comments

image

上图是本地开发环境,四棱锥是朝下的

image

这是打包后上线环境,可以看出光照,旋转角度都发生了改变,地图旋转时,三棱锥会跟随旋转,目测是坐标系没有转换。

// 测试代码
const addThreeLayer = (lnglat: any) => {
    const threeJSLayer = new ThreeLayer({
      enableMultiPassRenderer: false,
      // @ts-ignore
      onAddMeshes: (threeScene, layer) => {
        threeScene.add(new THREE.AmbientLight(0xffffff, 1));
        const sunlight = new THREE.DirectionalLight(0xffffff, 1);
        sunlight.position.set(0, -100000000, 100000000);
        sunlight.matrixWorldNeedsUpdate = true;
        threeScene.add(sunlight);
        // 三棱锥
        const fbxLoader = new FBXLoader();
        fbxLoader.load('/cone_red.fbx', (loader) => {
          layer.setMeshScale(loader, 1200, 800, 1200);
          layer.setObjectLngLat(loader, [lnglat.lng, lnglat.lat], 0);
          // loader.castShadow = true;
          // loader.receiveShadow = true;

          loader.rotation.y = 20 * (Math.PI / 180);
          loader.rotation.x = -90 * (Math.PI / 180);
          // 向场景中添加模型
          threeScene.add(loader);
          layer.render();
        });
      }
    })

jiaicon avatar May 18 '22 03:05 jiaicon

你把材质的 side 设置为 double 看看

yiiiiiiqianyao avatar May 23 '22 10:05 yiiiiiiqianyao