【R3F】02.Helloword

seelingzheng

于 2023-07-20 11:10:42 发布

阅读量75

点赞数

分类专栏： Threejs 文章标签： javascript 着色器

本文链接：https://blog.youkuaiyun.com/seelingzheng/article/details/131825929

版权

Threejs 专栏收录该内容

27 篇文章 ¥129.90 ¥299.90

订阅专栏

本文档介绍了如何使用R3F库初始化一个3D场景，并展示了如何控制场景中对象的属性，包括位置调整。通过修改组件样式和移除特定样式，可以实现预期的运行效果。此外，还探讨了对mesh位置的独立控制，允许对物体在不同方向上的位移进行精确调整。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

初始化场景

直接对App.jsx组件进行修改

import { Canvas } from '@react-three/fiber'

...
function App() { 
  return (
    <>
      <Canvas>
        <mesh>
          <torusGeometry></torusGeometry>
          <meshBasicMaterial></meshBasicMaterial>
        </mesh>
      </Canvas>
    </>
  )
}
...

修改样式移除App.css中的样式，修改index.css

...

*,
*::after,
*::before{
     
  padding: 0

了解本专栏