在react 中还有另外一种three.js 渲染方式
npm install @react-three/drei
利用标签去渲染模型
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 (<meshposition={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>);
}