Three.js 缩放对象时非常奇怪的行为

我试图通过GUI框中的参数来缩放对象

代码如下：

window.onload=init（）；
制作动画（）；
var场景、摄影机、渲染器；
var立方；
var raycaster，小鼠；
var相交；
var isClicked=false；
参数={
亚克斯：“0.00001”
}
var gui=new dat.gui（）；
gui.add（params，“yAxis”）.onFinishChange（val=>{
cube.scale.y=parseFloat（val）；
}); 
让vis=gui.domElement.style.visibility；
gui.domElement.style.visibility=vis==“”？“隐藏”：“；
函数init（）{
场景=新的三个。场景（）；
摄像头=新的三个透视摄像头（75，窗口。内宽/窗口。内高，0.11000）
摄像机位置z=5；
renderer=new THREE.WebGLRenderer（{antialas:true}）；
renderer.setClearColor（“#e5”）；//背景色
renderer.setSize（window.innerWidth，window.innerHeight）；//渲染器的大小
document.getElementById（“WebGL输出”）.appendChild（renderer.doElement）；
raycaster=new-THREE.raycaster（）；
鼠标=新的三个向量2（1,1）；
var立方计量法=新的三箱几何结构（20,0.00001,20）；
var cubeMaterial=new THREE.MeshLambertMaterial（{color:0xffff00}）；//0xF7F7F7=gray
立方体=新的三网格（立方计量法、立方材料）；
cube.userData.originalColor=0xffff00；
立方体位置x=0；
立方体位置y=3；
立方体位置z=0；
场景.添加（立方体）；
var环境光=新的三个环境光（0x0c）；
场景。添加（环境光）；
var spotLight=新的三个聚光灯（0xffffff）；
聚光灯位置设置（-40,60，-10）；
spotLight.castShadow=true；
场景。添加（聚光灯）；
camera.position.x=-30；
摄像机位置y=40；
摄像机位置z=30；
摄像机。注视（场景。位置）；
document.addEventListener（'mousemove'，onDocumentMouseMove，false）；
document.addEventListener（'click'，onDocumentMouseClick，false）；
}
onDocumentMouseMove函数（事件）
{
event.preventDefault（）；
mouse.x=（event.clientX/window.innerWidth）*2-1；
mouse.y=-（event.clientY/window.innerHeight）*2+1；
var intersects=raycaster.intersectObjects（scene.children）；
if（intersects.length>0&&intersects[0]。对象===cube&&isClicked==false）
{
立方体.材质.颜色.集合（0xff0000）；
} 
else if（isClicked==false）
{
cube.material.color.set（cube.userData.originalColor）；
}
}
函数onDocumentMouseClick（事件）
{
event.preventDefault（）；
mouse.x=（event.clientX/window.innerWidth）*2-1；
mouse.y=-（event.clientY/window.innerHeight）*2+1；
var intersects=raycaster.intersectObjects（scene.children）；
if（intersects.length>0&&intersects[0]。对象===cube&&isClicked==false）
{
isClicked=true；
立方体.材质.颜色.集合（0xF7F7）；
vis=gui.domElement.style.visibility；
gui.domElement.style.visibility=vis==“”？“隐藏”：“”；
} 
else if（intersects.length>0&&intersects[0]。对象===cube&&isClicked==true）
{
isClicked=false；
cube.material.color.set（cube.userData.originalColor）；
vis=gui.domElement.style.visibility；
gui.domElement.style.visibility=vis==“”？“隐藏”：“”；
}
}
函数render（）
{
raycaster.setFromCamera（鼠标、相机）；
渲染器。渲染（场景、摄影机）；
}
函数animate（）
{
请求动画帧（动画）；
render（）；
}

示例01.02-第一个场景
身体{
保证金：0；
溢出：隐藏；
}
这是因为
cube.scale
与几何体相乘，但相乘的数字非常小

这样想，您就有了
几何体
和
网格
，而Mesh.scale将几何体的值乘以。让我们看看Y值：

Geometry.y = 0.00001
Mesh.scale.y = 1
Visible height = 0.00001 * 1 = 0.00001;

// Now if you change the scale of y to 20
Geometry.y = 0.00001
Mesh.scale.y = 20
Visible height = 0.00001 * 20 = 0.0002;

问题是，你的几何体开始变得非常小。您应该更改几何体，从较大的值开始，并将缩放应用于网格：

var cubeGeometry = new THREE.BoxGeometry(20, 20, 20);
cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
cube.scale.y = 0.00001;


window.onload=init（）；
制作动画（）；
var场景、摄影机、渲染器；
var立方；
var raycaster，小鼠；
var相交；
var isClicked=false；
参数={
亚克斯：“0.00001”
}
var gui=new dat.gui（）；
gui.add（params，“yAxis”）.onFinishChange（val=>{
cube.scale.y=parseFloat（val）；
}); 
让vis=gui.domElement.style.visibility；
gui.domElement.style.visibility=vis==“”？“隐藏”：“；
函数init（）{
场景=新的三个。场景（）；
摄像头=新的三个透视摄像头（75，窗口。内宽/窗口。内高，0.11000）
摄像机位置z=5；
renderer=new THREE.WebGLRenderer（{antialas:true}）；
renderer.setClearColor（“#e5”）；//背景色
renderer.setSize（window.innerWidth，window.innerHeight）；//渲染器的大小
document.getElementById（“WebGL输出”）.appendChild（renderer.doElement）；
raycaster=new-THREE.raycaster（）；
鼠标=新的三个向量2（1,1）；
var cubeGeometry=新的三箱几何体（20,20,20）；
var cubeMaterial=new THREE.MeshLambertMaterial（{color:0xffff00}）；//0xF7F7F7=gray
立方体=新的三网格（立方计量法、立方材料）；
立方比例尺y=0.00001；
cube.userData.originalColor=0xffff00；
立方体位置x=0；
立方体位置y=3；
立方体位置z=0；
场景.添加（立方体）；
var环境光=新的三个环境光（0x0c）；
场景。添加（环境光）；
var spotLight=新的三个聚光灯（0xffffff）；
聚光灯位置设置（-40,60，-10）；