Three.js

[xiaotiandada]

• https://threejs.org
• https://github.com/xiaotiandada/3d
• https://3d-xt.vercel.app

comic

模仿来源

• https://juejin.cn/post/7067344398912061454
• https://dragonir.github.io/3d/#/comic
• https://github.com/dragonir/3d/blob/master/src/containers/Comic/index.js

自己的 Demo 地址

• https://3d-xt.vercel.app/comic

mui + @react-three/fiber 一起使用报错

Compiled with problems:X

ERROR in src/components/MapDrawer/index.tsx

TS2590: Expression produces a union type that is too complex to represent.


ERROR in src/components/MapDrawer/index.tsx:77:7

TS2590: Expression produces a union type that is too complex to represent.
    75 |         ))}
    76 |       </Stack>
  > 77 |       <Box>
       |       ^^^^^
  > 78 |        
  > 79 |       </Box>
       | ^^^^^^^^^^^^^
    80 |     </Drawer>
    81 |   );
    82 | };

增加 component="div" 消除错误

 <Box component="div">
    // ...
 </Box>

How to limit panning distance in react three fiber MapControls

orthographic camera + MapControls 显示拖动距离

• https://stackoverflow.com/questions/69607783/how-to-limit-panning-distance-in-react-three-fiber-mapcontrols/72942252#72942252

  const { camera, size } = useThree();

  const limitPanningDistance = useCallback(
    (e?: THREE.Event) => {
      // 704.5 102
      // 1056.75 320

      // Returns the drag container width and height
      const [w, h] = [1920, 1080]

      const pan = (w * camera.zoom - size.width) / 2 / camera.zoom;
      const vertical = (h * camera.zoom - size.height) / 2 / camera.zoom;

      // console.log('pan vertical', pan, vertical);

      const maxX = pan;
      const minX = -pan;
      const maxY = vertical;
      const minY = -vertical;
      const x = e?.target.target.x;
      const y = e?.target.target.y;
      if (x < minX || x > maxX) {
        e?.target.target.setX(x < minX ? minX : maxX);
        camera.position.setX(x < minX ? minX : maxX);
      }
      if (y < minY || y > maxY) {
        e?.target.target.setY(y < minY ? minY : maxY);
        camera.position.setY(y < minY ? minY : maxY);
      }
    },
    [camera.zoom, size]
  );

      <MapControls
        enableRotate={false}
        minZoom={1}
        maxZoom={2}
        onChange={(e) => {
          // console.log(e?.target);
          limitPanningDistance(e);
        }}
        makeDefault
      />

@react-three/fiber color problem

使用 react-three/fiber，场景导入图片颜色不对。PerspectiveCamera, OrthographicCamera 有点灰白的感觉，png 白色部分会变灰，有些图片会很白。下次补充 demo 图。

canvas 加入 linear + flat，或者 flat。因为我有两个 demo 表现不一样 还不知道为什么。

 <Canvas
    // linear
     flat
 >
 </Canvas>

const state = useThree() 状态

flat: true
legacy: false
linear: false

手动调用相机和控制器移动

这里使用 tween.js

    // Setup the animation loop.
    function animate(time: number) {
      requestAnimationFrame(animate);
      TWEEN.update(time);
    }
    requestAnimationFrame(animate);

  const { camera, size } = useThree();
  // mapControlsRef is MapControls ref

  const campCenter = (x: number, y: number): void => {
    if (!mapControlsRef) {
      return;
    }

    new TWEEN.Tween({
      x: mapControlsRef.target.x,
      y: mapControlsRef.target.y,
      zoom: camera.zoom,
    })
      .to({ x: x, y: y, zoom: 2 }, 800)
      .easing(TWEEN.Easing.Quadratic.Out)
      .onUpdate((object) => {
        // console.log('object', object);

        mapControlsRef.target.setX(object.x);
        mapControlsRef.target.setY(object.y);

        camera.position.setX(object.x);
        camera.position.setY(object.y);

        camera.zoom = object.zoom;
        camera.updateProjectionMatrix();
      })
      .start()
      .onComplete(() => {
        console.log('complete');
      });
  };