【R3F】06.自定义Geometry

seelingzheng

于 2023-07-21 15:49:52 发布

阅读量110

点赞数

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

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

版权

Threejs 专栏收录该内容

27 篇文章 ¥129.90 ¥299.90

订阅专栏

本文介绍了如何在React.js项目中自定义Geometry，通过创建顶点并生成随机点位信息来构建10个三角面。利用Three.js库进行操作，并强调了计算法线需在初始化后进行。

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

自定义Geometry

创建vertex，同在threejs中方式一样，这里是随机生成一些点位信息,创建10个三角面

使用useMemo,因为创位置信息只需要有一次就可以了

 const varticesCount = 10 * 3;
    const positions = useMemo(() => {
        const positions = new Float32Array(varticesCount * 3)
        for (let i = 0; i < varticesCount * 3; i++) {
            positions[i] = (Math.random() - 0.5) * 3
        }
        return positions
    }, [])

设置attribute

<bufferGeometry>
   <bufferAttribute
                attach='attributes-position'
                count={varticesCount}
                item

了解本专栏