I encountered this when making the gui, and the two parameters could not be executed, namely segments and radius

I encountered this when making the gui, and the two parameters could not be executed, namely segments and radius. Thanks!

my code:

let container;
let stats;
let camera;
let scene;
let renderer;
let mesh;

function init() {

    container = document.querySelector('#scene-container');

    //create a Scene 創造場景
    scene = new THREE.Scene();

    //background color 背景顏色
    scene.background = new THREE.Color(0xffffff);

    //camera 創造相機
    camera = new THREE.PerspectiveCamera(27, window.innerWidth / window.innerHeight, 1, 8000);
    camera.position.z = 2750;

    const segments = geometryData.segments;

    // create a geometry 創造幾何圖型
    const geometry = new THREE.BufferGeometry();
    const material = new THREE.LineBasicMaterial({ vertexColors: true });

    //OrbitControls 模型控制器
    function createControls() {
        controls = new THREE.OrbitControls(camera, container);
    }
    createControls();


    const positions = [];
    const colors = [];

    const r = geometryData.radius;

    for (var i = 0; i < segments; i++) {

        var x = Math.random() * r - r / 2;
        var y = Math.random() * r - r / 2;
        var z = Math.random() * r - r / 2;

        // positions

        positions.push(x, y, z);

        // colors

        colors.push((x / r) + 0.5);
        colors.push((y / r) + 0.5);
        colors.push((z / r) + 1);

    }

    geometry.setAttribute('position', new THREE.Float32BufferAttribute(positions, 3));
    geometry.setAttribute('color', new THREE.Float32BufferAttribute(colors, 3));

    geometry.computeBoundingSphere();

    mesh = new THREE.Line(geometry, material);
    scene.add(mesh);


    // creat the renderer
    renderer = new THREE.WebGLRenderer();
    renderer.setPixelRatio(window.devicePixelRatio);
    renderer.setSize(window.innerWidth, window.innerHeight);
    renderer.outputEncoding = THREE.sRGBEncoding;

    container.appendChild(renderer.domElement);

    stats = new Stats();
    container.appendChild(stats.dom);

}

//RWD
function onWindowResize() {
    // console.log( '你調整瀏覽器大小' );

    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();

    renderer.setSize(window.innerWidth, window.innerHeight);

}

window.addEventListener('resize', onWindowResize);


function animate() {

    requestAnimationFrame(animate);

    render();
    stats.update();

}


function render() {

    var time = Date.now() * 0.001;

    mesh.rotation.x = time * geometryData.rotationSpeed;
    // mesh.rotation.y = time * geometryData.rotationSpeed;
    mesh.rotation.z = time * geometryData.rotationSpeed;

    renderer.render(scene, camera);

}

// ====================================

//GUI Display

const gui = new dat.GUI();

//GUI 球體參數
const geometryData = {
    segments: 10000,
    radius: 600,
    rotationSpeed: 0.1,
};


//GUI參數加入
const geometryFolder = gui.addFolder("Geometry-Color")
geometryFolder.add(geometryData, 'segments', 1, 10000).onChange(regenerateBufferGeometry);
geometryFolder.add(geometryData, 'radius', 1, 800).onChange(regenerateBufferGeometry);
geometryFolder.add(geometryData, 'rotationSpeed', 0, 10).onChange(regenerateBufferGeometry);
geometryFolder.open();

//Sphere
function regenerateBufferGeometry() {

    //Geometry
    // let newGeometry = new THREE.BufferGeometry();

    mesh.geometry.dispose()
    // mesh.geometry = newGeometry

    
}

init();
animate();

You only need to recreate your geometry if your changes affect the actual geometry.
Also you don’t need to rebuild your geometry every time you change the rotationSpeed property since it doesn’t affect the geometry. It affects the rotation matrix of your mesh.

const geometryFolder = gui.addFolder("Geometry-Color")
geometryFolder.add(geometryData, 'segments', 1, 10000).onChange(regenerateBufferGeometry);
geometryFolder.add(geometryData, 'radius', 1, 800).onChange(regenerateBufferGeometry);
geometryFolder.add(geometryData, 'rotationSpeed', 0, 10);
geometryFolder.open();

function regenerateBufferGeometry() {
    let newGeometry = new THREE.BufferGeometry();
    const positions = [];
    const colors = [];
    const r = geometryData.radius;
    for (var i = 0; i < geometryData.segments; i++) {
        var x = Math.random() * r - r / 2;
        var y = Math.random() * r - r / 2;
        var z = Math.random() * r - r / 2;
        positions.push(x, y, z);
        colors.push((x / r) + 0.5);
        colors.push((y / r) + 0.5);
        colors.push((z / r) + 1);
    }        
    newGeometry.setAttribute('position', new THREE.Float32BufferAttribute(positions, 3));
    newGeometry.setAttribute('color', new THREE.Float32BufferAttribute(colors, 3));
    newGeometry.computeBoundingSphere();
    mesh.geometry.dispose()
    mesh.geometry = newGeometry    
}
2 Likes

thank u , I think I understand, the parameters are executed normally.

I’ve been having a similar issue. After redrawing the mesh in the regenerateBufferGeometry function, do you need to re-add the mesh to the scene, or re-render it?