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
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.
Thank you, I can change the sphere size parameter according to the above operation.
However, one problem is that the wireframe is not scaled. 
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);
}Thank you are answer, i already recreate working now, ready to run.