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();