如何使用 Three.js 更改 CubeGeometry 的宽度? [英] How to change width of CubeGeometry with Three.js?

问题描述

我有一个立方体几何图形和一个网格，但我不知道如何更改宽度(或高度……不过我可以更改 x、y 和 z).这是我现在拥有的片段:

geometry = new THREE.CubeGeometry( 200, 200, 200 );material = new THREE.MeshBasicMaterial( { 颜色: 0xff0000, 线框: true } );网格 = 新三.网格(几何，材料)；//此处为 WebGL 渲染器函数渲染(){网格.旋转.x += 0.01;网格.旋转.y += 0.02;renderer.render(场景，相机)；}功能改变东西(){网格.几何.宽度 = 500;//不起作用.网格宽度 = 500；//不起作用.几何宽度 = 500;//不起作用.mesh.position.x = 500//有效！！使成为();}

谢谢！

编辑

找到解决办法:

mesh.scale.x = 500;

解决方案

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

//创建一个立方体，宽度、高度、深度为1个单位var geometry = new THREE.CubeGeometry(1,1,1);//每个立方体的边都有另一种颜色var 立方体材料 = [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}),];//创建一个MeshFaceMaterial，允许立方体在每个面上有不同的材质var cubeMaterial = new THREE.MeshFaceMaterial(cubeMaterials);var cube = new THREE.Mesh(geometry, cubeMaterial);立方体位置集(0,0,0)；场景添加(立方体)；立方体.scale.x = 2.5;//规模立方体.scale.y = 2.5;//规模立方体.scale.z = 2.5;//规模

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

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

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

Thanks!

EDIT

Found a solution:

mesh.scale.x = 500;

解决方案

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:

这篇关于如何使用 Three.js 更改 CubeGeometry 的宽度?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！