如何使用 Three.js 更改 CubeGeometry 的宽度？答案

【问题标题】：How to change width of CubeGeometry with Three.js?如何使用 Three.js 更改 CubeGeometry 的宽度？
【发布时间】：2012-01-13 15:10:53
【问题描述】：

我有一个立方体几何图形和一个网格，但我不知道如何更改宽度（或高度......虽然我可以更改 x、y 和 z）。这是我现在拥有的sn-p：

geometry = new THREE.CubeGeometry( 200, 200, 200 );
material = new THREE.MeshBasicMaterial( { color: 0xff0000, wireframe: true } );
mesh = new THREE.Mesh( geometry, material );
// WebGL renderer here

function render(){
    mesh.rotation.x += 0.01;
    mesh.rotation.y += 0.02;
    renderer.render( scene, camera );
}

function changeStuff(){
    mesh.geometry.width = 500; //Doesn't work.
    mesh.width = 500; // Doesn't work.
    geometry.width = 500; //Doesn't work.
    mesh.position.x = 500// Works!!

    render();
}

谢谢！

编辑

找到解决办法：

mesh.scale.x = 500;

【问题讨论】：

CubeGeometry 扩展了 Geometry，但它仅使用宽度、高度、深度属性作为构造函数参数，而不是属性，所以正如您提到的，mesh.scale 是您的解决方案

标签： animation three.js mesh

【解决方案1】：

只是为了完成问题的评论和解决方案（并通过示例代码给出答案）：

// create a cube, 1 unit for width, height, depth
var geometry = new THREE.CubeGeometry(1,1,1);

// each cube side gets another color
var cubeMaterials = [ 
    new THREE.MeshBasicMaterial({color:0x33AA55, transparent:true, opacity:0.8}),
    new THREE.MeshBasicMaterial({color:0x55CC00, transparent:true, opacity:0.8}), 
    new THREE.MeshBasicMaterial({color:0x000000, transparent:true, opacity:0.8}),
    new THREE.MeshBasicMaterial({color:0x000000, transparent:true, opacity:0.8}), 
    new THREE.MeshBasicMaterial({color:0x0000FF, transparent:true, opacity:0.8}), 
    new THREE.MeshBasicMaterial({color:0x5555AA, transparent:true, opacity:0.8}), 
]; 
// create a MeshFaceMaterial, allows cube to have different materials on each face 
var cubeMaterial = new THREE.MeshFaceMaterial(cubeMaterials); 
var cube = new THREE.Mesh(geometry, cubeMaterial);

cube.position.set(0,0,0);
scene.add( cube );
cube.scale.x = 2.5; // SCALE
cube.scale.y = 2.5; // SCALE
cube.scale.z = 2.5; // SCALE

这里实现了一个稍微高级的动态example（仍然是相同的缩放比例）：

【讨论】：

【解决方案2】：

您可以像这样处理立方体的几何形状并影响新的几何形状：

let new_geometry = new THREE.CubeGeometry(500,200,200);
geometry.dispose();
cube.geometry = new_geometry;

【讨论】：

【解决方案3】：

Scale 属性可用于改变立方体的宽度、高度和深度。

    //creating a cube 
    var geometry = new THREE.BoxGeometry(1,1,1);
    var material = new THREE.MeshBasicMaterial({color:"white"});
    var cube = new THREE.Mesh(geometry, material);


    //changing size of cube which is created.
    cube.scale.x = 30;
    cube.scale.y = 30;
    cube.scale.z = 30;

【讨论】：