【R3F】0.3新建组件

最新推荐文章于 2024-08-26 16:38:21 发布

seelingzheng

最新推荐文章于 2024-08-26 16:38:21 发布

阅读量56

点赞数

分类专栏： Threejs 文章标签：前端 javascript html

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

版权

Threejs 专栏收录该内容

24 篇文章 1 订阅 ¥129.90 ¥299.90

订阅专栏

本文介绍了在R3F库中如何快速新建组件，无需通过常规方式引入mesh，可以直接使用。同时讲解了创建Group组对象的方法，用于组合mesh，并通过示例展示如何对plane进行旋转和缩放操作，以及设置其材质颜色。

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

新建`Experience.jsx`

不需要通过import 的方式引入 mesh等，可以直接使用，直接将helloword中的mesh部分移动过来即可

export default function Experience() { 

    return <> 
           <mesh position={[1, 2, 0]}>
            <torusGeometry></torusGeometry>
            <meshBasicMaterial></meshBasicMaterial>
          </mesh>
    </>
}

创建Group组对象

需要对mesh进行组合，就需要使用到 group，在r3f中使用group 直接创建group节点即可
创建一个plane作为底板可以通过rotation-x对plane进行旋转，其中scale={10}表示xyz同时进行10倍缩放，如果要对xyz分别缩放则可以使用scale={[2,4,6]}