我正在做一个项目，在我的反应三根纤维场景的左上角有一个小地图。小地图是进入另一个场景的入口，固定在我的相机框架上。这意味着我可以在场景中四处移动，而小地图则停留在左上角。
这非常有效，但我也希望在小地图上方有文字来描述小地图的当前状态。我希望这个文本也保持固定在我的相机的框架，而不是移动，当我在场景中移动。下面是我的目标的一个例子。m是我的小地图，t是我想在小地图上方显示的文本。
_____________
|t |
|m |
| my scene |
| |
|_____________|
然而，当我尝试添加一个drei Html组件到与小地图相同的虚拟场景时，我的场景只是冻结和崩溃。
import React from 'react'
import * as THREE from 'three'
import { useFrame, useThree, createPortal } from '@react-three/fiber'
import { Plane, useFBO, OrthographicCamera, Text } from '@react-three/drei'
function Panel(props) {
const viewTarget = useFBO()
// A camera that is mounted above and looking down on my scene
const viewCamera = props.camera;
const virtualScene = new THREE.Scene()
const virtualCamera = React.useRef()
useFrame(({ gl, camera, scene }) => {
gl.autoClear = false
// Render the scene from the camera above into my WebGLRenderTarget
gl.setRenderTarget(viewTarget)
gl.render(scene, viewCamera.current)
// Render my original main scene
gl.setRenderTarget(null)
gl.render(scene, camera)
// render GUI panels on top of main scene
gl.render(virtualScene, virtualCamera.current)
gl.autoClear = true
}, 1)
return createPortal(
<>
<OrthographicCamera ref={virtualCamera} near={0.0001} far={1} />
<group position-z={-0.1} position-x={0}>
<Html>
I want text here
</Html>
<Plane args={[200, 100, 1]} position-y={0}/>
</group>
</>,
virtualScene
)
}
当我导入这个组件到我的场景时，场景卡住了。如果我从这个组件中移除Html组件，场景将不再冻结。
我是第一次接触三纤维反应，所以我感觉我误解了什么是传送门。
需要导入Html组件。将drei导入更改为:
import { Plane, useFBO, OrthographicCamera, Text, Html } from '@react-three/drei'