模拟 Five 行为的 canvas，与 Five 唯一区别是 scene 是空的
当需 five 的 canvas 上层有一些额外的 Dom 元素比如平面图时，希望在这些 Dom 元素上层再绘制一些三维物体，可以 使用 FivePuppet，将要渲染的物体加入到 FivePuppet 的 scene 中即可。甚至可以是原本在 five 中的物体，可以使 用 .clone() 将物体克隆一份然后加入到 FivePuppet 的 scene 中。
.clone()
import { Util } from '@realsee/dnalogel' function App() { const fivePuppet = React.useRef<Util.FivePuppet>() const five = unsafe__useFiveInstance() React.useEffect(() => { fivePuppet.current = new Util.FivePuppet(five, { zIndex: 20 }) const object = new THREE.Mesh(new THREE.BoxGeometry(), new THREE.MeshBasicMaterial({ color: 0xff0000 })) fivePuppet.current.scene.add(object) return () => { fivePuppet.current?.destory() } }, [five]) } Copy
import { Util } from '@realsee/dnalogel' function App() { const fivePuppet = React.useRef<Util.FivePuppet>() const five = unsafe__useFiveInstance() React.useEffect(() => { fivePuppet.current = new Util.FivePuppet(five, { zIndex: 20 }) const object = new THREE.Mesh(new THREE.BoxGeometry(), new THREE.MeshBasicMaterial({ color: 0xff0000 })) fivePuppet.current.scene.add(object) return () => { fivePuppet.current?.destory() } }, [five]) }
import { Util } from '@realsee/dnalogel' const five = new Five({ plugins: [ [(five) => new Util.FivePuppet(five), 'fivePuppet'] ], }) const object = new THREE.Mesh(new THREE.BoxGeometry(), new THREE.MeshBasicMaterial({ color: 0xff0000 })) five.plugins.fivePuppet.scene.add(object) Copy
import { Util } from '@realsee/dnalogel' const five = new Five({ plugins: [ [(five) => new Util.FivePuppet(five), 'fivePuppet'] ], }) const object = new THREE.Mesh(new THREE.BoxGeometry(), new THREE.MeshBasicMaterial({ color: 0xff0000 })) five.plugins.fivePuppet.scene.add(object)
Optional
canvas 的 zIndex
1 Copy
1
Description
模拟 Five 行为的 canvas，与 Five 唯一区别是 scene 是空的
Usecase
当需 five 的 canvas 上层有一些额外的 Dom 元素比如平面图时，希望在这些 Dom 元素上层再绘制一些三维物体，可以 使用 FivePuppet，将要渲染的物体加入到 FivePuppet 的 scene 中即可。甚至可以是原本在 five 中的物体，可以使 用
.clone()将物体克隆一份然后加入到 FivePuppet 的 scene 中。Example: react
Example: javascript