在react 中还有另外一种three.js 渲染方式

Mr_wuying2024-09-09 3:03
npm install @react-three/drei
利用标签去渲染模型
javascript 复制代码
import React, { useRef,useEffect, useState } from 'react';
import { Canvas, useFrame, useThree,useLoader } from '@react-three/fiber';
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';
import { OrbitControls } from '@react-three/drei';
import * as THREE from 'three';
function BuildingModel({  }) {
  const [position, setPosition] = useState([130,120,10]);
  
    // 使用useLoader钩子加载GLTF模型
  const gltf = useLoader(GLTFLoader, './绿植单元模型.glb');
  useFrame(() => {
    // 更新模型状态，如动画等
   
  });


  return (
        <mesh
            position={position}
            rotation={[0.9, 0.09,0.02]}  
             >
            <primitive object={gltf.scene} />
        </mesh>
  );
}



export default function App() {


  

    return (
        <Canvas 
            camera={{   type: 'perspective',position: [0, 188, 60] ,fov:120}} style={{width:'100%',height:'100vh'}}>
            <ambientLight  intensity={1}/>
            <directionalLight position={[0, 10, 0]} intensity={1} color="#ffffff" /> 添加定向光源
            <BuildingModel position={[0, 0, 60]}  />
            <OrbitControls 
                    // ref={controlsRef }
                    enableZoom={false}
                    target={[0,180, 60]} // 设置围绕的目标点
                    enablePan={false} // 禁止平移
                    minDistance={5} // 最小距离
                    maxDistance={22} // 最大距离
                    minPolarAngle={Math.PI/16} // 最小俯仰角（从上方）
                    maxPolarAngle={Math.PI/16} // 最大俯仰角（到水平 />
                />
        </Canvas>
  );
}