【R3F】0.5使用OrbitControls

seelingzheng

已于 2023-07-20 11:16:03 修改

阅读量86

点赞数

分类专栏： Threejs 文章标签： javascript 前端 react.js

于 2023-07-20 11:13:01 首次发布

本文链接：https://blog.csdn.net/seelingzheng/article/details/131826055

版权

Threejs 专栏收录该内容

24 篇文章 1 订阅 ¥129.90 ¥299.90

订阅专栏

本文介绍如何在React项目中利用R3F扩展OrbitControls，通过jsm文件将OrbitControls转化为React的虚拟DOM。内容涵盖了在three.js中设置OrbitControls所需的参数，以及如何通过useFrame Hook确保只初始化一次OrbitControls。

摘要由CSDN通过智能技术生成

扩展`OrbitControls`

因为OrbitControls 是在 jsm文件下的扩展文件，所有可以使用 extend的方式将其扩展成 react的虚拟dom

import { useFrame,  extend } from "@react-three/fiber"
import { useRef } from "react" 
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'

//extend({ OrbitControls })
//or 
extend({ OrbitControls: OrbitControls})

使用

import { useFrame,  extend } from "@react-three/fiber"
import { useRef } from "react" 
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'

//extend({ OrbitControls })
//or 
extend({ OrbitControls: OrbitControls})

export

了解本专栏