Reactjs 单击按钮时如何添加或删除 3d 对象

看起来您没有正确处理Reaction组件中的状态.未在onClick1和onClick2方法中正确更新处于状态的托盘array.

在场景中添加新托盘和从场景中移除托盘后，需要调用setPallets函数来更新状态中的托盘array.您在onClick1中执行此操作，但在onClick2中直接改变托盘数组，而不调用setPallets.

try 按如下方式更新onClick2函数:

const onClick2 = () => {
    if (pallets.length > 0) {
        // Remove the last cube from the scene
        const removedPallet = pallets[pallets.length - 1];
        sceneRef.current.remove(removedPallet);
        // Update the cubes state
        setPallets(prevPallets => prevPallets.filter(pallet => pallet !== removedPallet));
    }
};

此函数将从场景和状态中删除最后一个托盘.

此外，您似乎要在画布元素上附加一个onClick事件侦听器.通常，我们会在DOM中的按钮或其他交互元素上附加单击事件.确保您的addButton和DeleteButton(如果存在)正在处理这些onClick1和onClick2函数.

以下是一种简单的方法:

useEffect(() => {
    const addButton = document.getElementById('addButton');
    const deleteButton = document.getElementById('deleteButton'); // Ensure this button exists in your DOM

    addButton.addEventListener("click", onClick1);
    deleteButton.addEventListener("click", onClick2);

    // Remember to cleanup event listeners when component unmounts
    return () => {
        addButton.removeEventListener("click", onClick1);
        deleteButton.removeEventListener("click", onClick2);
    }
}, []);

这将在组件挂载时向按钮添加Click事件侦听器，并在组件卸载时删除它们.

创建多维数据集的示例，您可以根据需要对其进行调整:

import React, { useRef, useEffect, useState } from 'react';
import * as THREE from 'three';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';

function ThreeScene() {
    const mountRef = useRef(null);
    const [scene, setScene] = useState(null);
    const [renderer, setRenderer] = useState(null);
    const [camera, setCamera] = useState(null);
    const [controls, setControls] = useState(null);
    const [pallets, setPallets] = useState([]);

    useEffect(() => {
        const scene = new THREE.Scene();
        setScene(scene);

        const renderer = new THREE.WebGLRenderer();
        setRenderer(renderer);

        const camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 0.1, 1000);
        camera.position.z = 5;
        setCamera(camera);

        const controls = new OrbitControls(camera, renderer.domElement);
        setControls(controls);

        const mount = mountRef.current;
        mount.appendChild(renderer.domElement);
        renderer.setSize(mount.clientWidth, mount.clientHeight);

        const animate = function () {
            requestAnimationFrame(animate);
            controls.update();
            renderer.render(scene, camera);
        };

        animate();

        // Handle window resize
        const handleResize = () => {
            const width = mount.clientWidth;
            const height = mount.clientHeight;

            renderer.setSize(width, height);
            camera.aspect = width / height;
            camera.updateProjectionMatrix();
        };

        window.addEventListener('resize', handleResize);

        return () => {
            window.removeEventListener('resize', handleResize);
            mount.removeChild(renderer.domElement);
        };
    }, []);

    const createCube = () => {
        const geometry = new THREE.BoxGeometry();
        const material = new THREE.MeshBasicMaterial({ color: Math.random() * 0xffffff });
        const cube = new THREE.Mesh(geometry, material);
        cube.position.set(Math.random() * 5 - 2.5, Math.random() * 5 - 2.5, Math.random() * 5 - 2.5);
        scene.add(cube);
        setPallets(pallets => [...pallets, cube]);
    };

    const removeCube = () => {
        if (pallets.length > 0) {
            const lastCube = pallets[pallets.length - 1];
            scene.remove(lastCube);
            setPallets(pallets => pallets.filter(cube => cube !== lastCube));
        }
    };

    return (
        <div>
            <div ref={mountRef} style={{ width: '800px', height: '600px' }} />
            <button onClick={createCube}>Add Cube</button>
            <button onClick={removeCube}>Remove Cube</button>
        </div>
    );
}

export default ThreeScene;