在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 (
<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>
);
}