About dat.gui use

Hello,

I want to try to develop three with GUI, during the parameter adjustment process, widthSegments and heightSegments cannot execute GUI parameters, But the speed parameter works.

http://workshop.chromeexperiments.com/examples/gui/#1--Basic-Usage

follow this example

1 Like

Still not working after trying…
This is my code

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

function init() {

    // Get a reference to the container element that will hold our scene
    container = document.querySelector('#scene-container');

    // create a Scene
    scene = new THREE.Scene();

    scene.background = new THREE.Color(0x222222);

    // set up the options for a perspective camera
    const fov = 35; 
    const aspect = container.clientWidth / container.clientHeight;
    const near = 0.1;
    const far = 100;

    camera = new THREE.PerspectiveCamera(fov, aspect, near, far);

    // camera view the scene
    camera.position.set(0, 0, 10);

    // create a geometry

    // const width = 2;
    // const height = 2;
    // const depth = 2;
    // const widthSegments = 5;
    // const heightSegments = 5;
    // const depthSegments = 5;


    const radius = 1;
    const widthSegments = 10;
    const heightSegments = 10;


    //方形 Box
    // const geometry = new THREE.BoxBufferGeometry(width, height, depth, widthSegments, heightSegments, depthSegments);

    //球體 Sphere
    const geometry = new THREE.SphereBufferGeometry(radius, widthSegments, heightSegments);


    //網格線條顯示 Wireframe
    const wireframe = new THREE.WireframeGeometry(geometry);
    //線條控制 line 
    const line = new THREE.LineSegments(wireframe);
    line.material.depthTest = true;
    line.material.opacity = 1;
    line.material.transparent = true;


    // 建立材質顏色 Material
    const material = new THREE.MeshStandardMaterial({
        color: 0x156289,
        // wireframe: true,
        // roughness: 0,
        metalness: 0.1,
        flatShading: true,
    });

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

    // create a Mesh containing the geometry and material
    mesh = new THREE.Mesh(geometry, material);

    // add the mesh to the scene object
    mesh.add(line);
    scene.add(mesh);


    // Create a directional light 光源
    const light = new THREE.DirectionalLight(0xffffff, 2.0);
    const ambientLight = new THREE.HemisphereLight(
        0xffffff, //bright sky color
        0xffffff, //dim ground color
        5, // intensity
    );

    // move the light back and up a bit
    light.position.set(10, 10, 10);

    // remember to add the light to the scene
    scene.add(light);



    // create a WebGLRenderer and set its width and height
    renderer = new THREE.WebGLRenderer({ antialias: true });
    renderer.setSize(container.clientWidth, container.clientHeight);

    renderer.setPixelRatio(window.devicePixelRatio);

    // add the created <canvas> element to the page
    container.appendChild(renderer.domElement);

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

}


function animate() {
    // call animate recursively
    requestAnimationFrame(animate);

    // increase the mesh's rotation each frame
    mesh.rotation.z += NewGui.rotationSpeed;
    mesh.rotation.x += NewGui.rotationSpeed;
    mesh.rotation.y += NewGui.rotationSpeed;

    // render, or 'create a still image', of the scene
    stats.update();
    renderer.render(scene, camera);

}



//GUI Display

const NewGui = new function () {
    this.radius = 1;
    this.widthSegments = 10;
    this.heightSegments = 10;
    this.rotationSpeed = 0.02;
}

const gui = new dat.GUI();

const guiname = gui.addFolder('Sphere');

guiname.add(NewGui, 'radius', 1, 10);
guiname.add(NewGui, "widthSegments", 1, 100);
guiname.add(NewGui, "heightSegments", 1, 100);
guiname.add(NewGui, 'rotationSpeed', 0, 1);
guiname.open();



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

    camera.aspect = container.clientWidth / container.clientHeight;

    // update the camera's frustum
    camera.updateProjectionMatrix();

    // update the size of the renderer AND the canvas
    renderer.setSize(container.clientWidth, container.clientHeight);

}
window.addEventListener('resize', onWindowResize);







// call the init up
init();

// then call animate
animate();

I think you are trying to add/remove height/width segments dynamically using the gui.
if so,
See this example, specifically lines 103 and 104 in the example code.
https://sbcode.net/threejs/geometries/#srcclientclientts

After you change the width and height segments, you will need to regenerate your SphereGeometry. See lines in the code 110-116

The linked page also has an interactive demo at the top of the screen you can try.

1 Like

Thank you, I can change the sphere size parameter according to the above operation.

However, one problem is that the wireframe is not scaled. :sweat_smile:

This is my code:

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

function init() {

    // Get a reference to the container element that will hold our scene
    container = document.querySelector('#scene-container');

    // create a Scene
    scene = new THREE.Scene();

    scene.background = new THREE.Color(0x222222);

    // set up the options for a perspective camera
    const fov = 35; 
    const aspect = container.clientWidth / container.clientHeight;
    const near = 0.1;
    const far = 100;

    camera = new THREE.PerspectiveCamera(fov, aspect, near, far);

    // camera view the scene
    camera.position.set(0, 0, 10);

    // create a geometry

    // const width = 2;
    // const height = 2;
    // const depth = 2;
    // const widthSegments = 5;
    // const heightSegments = 5;
    // const depthSegments = 5;


    // const radius = 1;
    // const widthSegments = 10;
    // const heightSegments = 10;


    //方形 Box
    // const geometry = new THREE.BoxBufferGeometry(width, height, depth, widthSegments, heightSegments, depthSegments);

    //球體 Sphere
        const sphere = new THREE.SphereBufferGeometry(
            sphereData.radius, sphereData.widthSegments, sphereData.heightSegments
        );


    //網格線條顯示 Wireframe
    const wireframe = new THREE.WireframeGeometry(sphere);
    //線條控制 line 
    const line = new THREE.LineSegments(wireframe);
    line.material.depthTest = true;
    line.material.opacity = 1;
    line.material.transparent = true;


    // 建立材質顏色 Material
    const material = new THREE.MeshStandardMaterial({
        color: 0x156289,
        // wireframe: true,
        // roughness: 0,
        metalness: 0.1,
        flatShading: true,
    });

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

    // create a Mesh containing the geometry and material
    mesh = new THREE.Mesh(sphere, material);

    // add the mesh to the scene object
    mesh.add(line);
    scene.add(mesh);


    // Create a directional light 光源
    const light = new THREE.DirectionalLight(0xffffff, 2.0);
    const ambientLight = new THREE.HemisphereLight(
        0xffffff, //bright sky color
        0xffffff, //dim ground color
        5, // intensity
    );

    // move the light back and up a bit
    light.position.set(10, 10, 10);

    // remember to add the light to the scene
    scene.add(light);



    // create a WebGLRenderer and set its width and height
    renderer = new THREE.WebGLRenderer({ antialias: true });
    renderer.setSize(container.clientWidth, container.clientHeight);

    renderer.setPixelRatio(window.devicePixelRatio);

    // add the created <canvas> element to the page
    container.appendChild(renderer.domElement);

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

}


function animate() {
    // call animate recursively
    requestAnimationFrame(animate);

    // increase the mesh's rotation each frame
    mesh.rotation.z += sphereData.rotationSpeed;
    mesh.rotation.x += sphereData.rotationSpeed;
    mesh.rotation.y += sphereData.rotationSpeed;

    // render, or 'create a still image', of the scene
    stats.update();
    renderer.render(scene, camera);

}



//GUI Display

const gui = new dat.GUI();

const sphereData = {
    radius: 2,
    widthSegments: 10,
    heightSegments: 6,
    phiStart: 0,
    phiLength: Math.PI * 2,
    thetaStart: 0,
    thetaLength: Math.PI,
    rotationSpeed: 0.02
};

const sphereFolder = gui.addFolder("Sphere")
sphereFolder.add(sphereData, 'radius', .1, 30).onChange(regenerateSphereGeometry);
sphereFolder.add(sphereData, 'widthSegments', 1, 32).onChange(regenerateSphereGeometry);
sphereFolder.add(sphereData, 'heightSegments', 1, 16).onChange(regenerateSphereGeometry);
sphereFolder.add(sphereData, 'phiStart', 0, Math.PI * 2).onChange(regenerateSphereGeometry);
sphereFolder.add(sphereData, 'phiLength', 0, Math.PI * 2).onChange(regenerateSphereGeometry);
sphereFolder.add(sphereData, 'thetaStart', 0, Math.PI).onChange(regenerateSphereGeometry);
sphereFolder.add(sphereData, 'thetaLength', 0, Math.PI).onChange(regenerateSphereGeometry);
sphereFolder.add(sphereData, 'thetaLength', 0, Math.PI).onChange(regenerateSphereGeometry);
sphereFolder.add(sphereData, 'rotationSpeed', 0, 1);
sphereFolder.open();

function regenerateSphereGeometry() {
    let newGeometry = new THREE.SphereGeometry(
        sphereData.radius, sphereData.widthSegments, sphereData.heightSegments, sphereData.phiStart, sphereData.phiLength, sphereData.thetaStart, sphereData.thetaLength
    )
    mesh.geometry.dispose()
    mesh.geometry = newGeometry
}



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

    camera.aspect = container.clientWidth / container.clientHeight;

    // update the camera's frustum
    camera.updateProjectionMatrix();

    // update the size of the renderer AND the canvas
    renderer.setSize(container.clientWidth, container.clientHeight);

}
window.addEventListener('resize', onWindowResize);


// call the init up
init();

// then call animate
animate();

your WireframeGeometry is a child of your mesh. You will need to recreate it, since it still reflects the original mesh before you called regenerateSphereGeometry()

I’ve updated your regenerateSphereGeometry() function with

function regenerateSphereGeometry() {
    let newGeometry = new THREE.SphereGeometry(
        sphereData.radius, sphereData.widthSegments, sphereData.heightSegments, sphereData.phiStart, sphereData.phiLength, sphereData.thetaStart, sphereData.thetaLength
    )
    mesh.geometry.dispose()
    mesh.geometry = newGeometry

    mesh.children[0].geometry.dispose();
    mesh.children[0].geometry = new THREE.WireframeGeometry(newGeometry);
}
1 Like

Thank you are answer, i already recreate working now, ready to run.