如何使用 Three.js 更改 CubeGeometry 的宽度?

发布于 2024-12-19 19:11:50 字数 818 浏览 5 评论 0原文

我有一个 CubeGeometry 和一个网格,我不知道如何更改宽度(或高度,但我可以更改 x、y 和 z)。 这是我现在所拥有的一个片段:

const geometry = new THREE.CubeGeometry( 200, 200, 200 );
const material = new THREE.MeshBasicMaterial( { color: 0xff0000, wireframe: true } );
const 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;

I have a CubeGeometry and a mesh, and I don't know how to change the width (or height but I can change x, y and z though).
Here is a snippet of what I have right now:

const geometry = new THREE.CubeGeometry( 200, 200, 200 );
const material = new THREE.MeshBasicMaterial( { color: 0xff0000, wireframe: true } );
const 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();
}

Thanks!

EDIT

Found a solution:

mesh.scale.x = 500;

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(3

时光无声 2024-12-26 19:11:50

只是为了完成问题的评论和解决方案(并通过示例代码提供答案):

// 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

稍微高级的动态 此处实现的示例(仍然相同的缩放):

Just to complete comment and solution from question (and have an answer present with example code):

// 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

A slightly advanced, dynamic example (still the same scaling) implemented here:

情深已缘浅 2024-12-26 19:11:50

您可以处理立方体几何体并影响新的几何体,如下所示:

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

You can dispose of the cube geometry and affect the new one like this:

const new_geometry = new THREE.CubeGeometry(500, 200, 200);
geometry.dispose();
cube.geometry = new_geometry;
亢潮 2024-12-26 19:11:50

缩放属性可用于更改立方体的宽度、高度和深度。

    //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;

Scale properties can be used to for changing width, height and and depth of cube.

    //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;
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文