thirty-two（模型点击展示）react-three-fiber

模型点击蒙版展示

点击展示目的（用户需要看见模型中更加多的内容信息）

使用技术 ThreeJs、React-three-fiber、React-three-drei、React、css

整体思路：

  1、在展示模型中点击模型将模型数据和visible信息存储

  2、将模型数据和visible数据传入蒙版显示页面

  3、蒙版层点击关闭，模型层浮于蒙版层之上

 

 

 

 

注意点：

  1、基础模型的z-index层数过高

  2、模型数据需要处理（每个模型之间的位置信息：position,旋转角度信息：rotation信息不相同 ），不处理每次位置渲染不同

  3、需要的话调整为正交视图（orthographic）其中调整参数zoom来放大 

 <Canvas orthographic camera={{ zoom: 600 }}>

具体实现：

场景模型中点击

<mesh
    onClick={(eve) => {
        if (data.name.includes('layer') && !data.name.includes('interlayer01')) {
            eve.stopPropagation();
            showBox(data);
          }
        }} >

  const showBox = (data: any) => {
    setModul(data);
    setBoxModulVisible(true);
  };

需要蒙版显示

显示与隐藏

 import { Clone, useGLTF } from '@react-three/drei';
import { Canvas } from '@react-three/fiber';

import classNames from 'classnames/bind';
import { cloneDeep } from 'lodash-es';
import { useThreeContext } from '../../context/ThreeContext';
import styles from '../../styles/model.module.scss';

const cx = classNames.bind(styles);
const Ge = () => {
  const { setBoxModulVisible, boxModulVisible, modul } = useThreeContext();
  const copyData = cloneDeep(modul);
  delete copyData.position;
  delete copyData.rotation;

  const { nodes }: any = useGLTF('./box-20.gltf');
  const box = nodes[`box-20`];
  delete box.position;
  delete box.rotation;

  return (
    <>
      {JSON.stringify(copyData) !== '{}' && (
        <>
          <div
            className={cx('show')}
            onClick={() => setBoxModulVisible(false)}
            style={{ display: boxModulVisible ? '' : 'none' }}
          ></div>
          <div className={cx('content')} style={{ display: boxModulVisible ? '' : 'none' }}>
            <Canvas orthographic camera={{ zoom: 600 }}>
              <pointLight position={[0, 1, 4]} />
              <ambientLight />
              <mesh rotation={[0.05, -0.05, 0]}>
                <Clone object={copyData} />
              </mesh>
              <mesh rotation={[0.05, -0.05, 0]} position-y={-0.165} position-x={-0.435}>
                <Clone object={box} />
              </mesh>
            </Canvas>
          </div>
        </>
      )}
    </>
  );
};
export default Ge;

css样式

底层模板

.show {
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 999999998;
  top: 0;
  left: 0;
  right: 0;
  background-color: #000;
  opacity: 0.4;
  color: #f00;
}

模型层

.content {
  z-index: 999999999;
  height: 300px;
  width: 600px;
  position: absolute;
  top: 50%;
  bottom: 50%;

  left: 0;
  right: 0;
  margin: auto;
  background-color: #fff;
}

ps：想要实现的功能基本实现，之前使用antd的modul发现每次渲染出的canvas大小来回变（具体问题还未查明）