chuGuoYuJian/code/src/pages/A0model/index.tsx

import React, { Suspense, useCallback, useRef } from 'react'
import styles from './index.module.scss'
import { useSelector } from 'react-redux'
import { RootState } from '@/store'
import classNames from 'classnames'
// import * as THREE from 'three'
import { Canvas } from '@react-three/fiber'
import Model from './Model'
import A0btn from './A0btn'

function A0model() {
  const { isShow } = useSelector((state: RootState) => state.A0model)

  const modelRef = useRef<any>(null)

  const cutModelFu = useCallback((val: string) => {
    if (val) {
      modelRef.current.focusOnPart(val)
    } else modelRef.current.showAllModels()
  }, [])

  return (
    <div
      style={{ backgroundImage: `url(${serverUrl}model/bac.jpg)` }}
      className={classNames(styles.A0model, isShow ? styles.A0modelShow : '')}
    >
      <div className='A0main'>
        <Canvas
          shadows
          camera={{ position: [0, 1000, 5], fov: 50 }}
          gl={{
            antialias: true, // 开启抗锯齿，使边缘更平滑
            alpha: true // 允许 Canvas 背景透明
          }}
          // onCreated={({ gl }) => {
          //   gl.setClearColor(new THREE.Color(0x000000))
          // }}
        >
          <Suspense>
            {/* 场景与控制器 */}
            <Model ref={modelRef} />
          </Suspense>
        </Canvas>
      </div>

      <A0btn cutModelFu={val => cutModelFu(val)} />
    </div>
  )
}
const MemoA0model = React.memo(A0model)

export default MemoA0model