L7
L7 copied to clipboard
Three渲染的物体,使用webpack或umi打包后,光照跟旋转角度等都出现了问题
上图是本地开发环境,四棱锥是朝下的
这是打包后上线环境,可以看出光照,旋转角度都发生了改变,地图旋转时,三棱锥会跟随旋转,目测是坐标系没有转换。
// 测试代码
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();
});
}
})
你把材质的 side 设置为 double 看看