THREE--demo3（自定义几何体）

梅花三

已于 2022-09-03 15:47:16 修改

阅读量140

点赞数

分类专栏： react three 文章标签： three

于 2022-09-01 10:47:38 首次发布

本文链接：https://blog.csdn.net/weixin_43794073/article/details/126638671

版权

这篇博客展示了如何利用THREE.js库创建自定义几何体，并呈现了最终的3D效果。通过查看源码，读者可以学习到THREE.js中自定义几何形状的方法。

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

效果

在这里插入图片描述

源码

import * as T from 'three'
import { useEffect, useRef } from 'react'
import Stats from 'stats.js'
import { GUI } from 'dat.gui'

const Demo3 = () => {
    let stats, scene, camera, renderer, plane, planeGeometry, gui, controls

    useEffect(() => {
        init()
    }, [])

    const ThreeContainer = useRef()

    // 创建界面组件，修改代码中的变量
    const initGui = () => {
        // scene.add，scene.remove，scene.children
        controls = {
            addBox,
            removeBox,
            numberOfObjects: scene.children.length,
            rotationSpeed: 0.01,
        }
        gui = new GUI()
        gui.add(controls, 'addBox')
        gui.add(controls, 'removeBox')
        // listen方法监听属性变化&