three.js 添加滑块放大缩小

要为three.js场景添加滑块放大缩小功能，可以使用HTML中的range类型input元素和JavaScript。下面是一个简单的示例代码：

HTML部分：

<input type="range" min="0.1" max="2" step="0.1" value="1" id="scaleRange">

这里使用了一个range类型的input元素，它设置了最小值为0.1，最大值为2，每次步进为0.1，初始值为1，并且给它一个id为"scaleRange"，以便在JavaScript中引用。

JavaScript部分：

// 获取range元素和渲染器
const scaleRange = document.getElementById("scaleRange");
const renderer = new THREE.WebGLRenderer();

// 监听range元素的change事件
scaleRange.addEventListener("change", function() {
    // 获取range元素的值
    const scaleValue = parseFloat(this.value);
    
    // 缩放场景
    scene.scale.set(scaleValue, scaleValue, scaleValue);
    
    // 渲染场景
    renderer.render(scene, camera);
});

这里使用addEventListener函数监听了range元素的change事件。当元素的值发生变化时，获取它的值，并使用THREE.js中的scale属性将场景缩放到指定的大小。最后，重新渲染场景以显示缩放效果。