THREE--demo15（拖放控制器）

最新推荐文章于 2023-11-27 11:17:15 发布

VIP文章梅花三

最新推荐文章于 2023-11-27 11:17:15 发布

阅读量128

点赞数

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

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

版权

效果

在这里插入图片描述

源码

import {
    useEffect, useRef } from 'react'
import * as T from 'three'
import {
    OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
import {
    DragControls } from 'three/examples/jsm/controls/DragControls'
import Stats from 'stats.js'
import {
    GUI } from 'dat.gui'

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

    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方法监听属性变化，更新到面板
        gui.add(controls, 'numberOfObjects').listen()
        gui.add(controls, 'rotationSpeed', 0, 0.1)
    }

    // 检测动画运行的帧频
    const initStats = () => {
   
        stats = new Stats()
        stats.