如何改变CubeGeometry的宽度与three.js所？ [英] How to change width of CubeGeometry with Three.js?

问题描述

我有一个立方体的几何形状和一个网格，我不知道如何改变宽度（或高度......我可以改变的x，y和z虽然）。
这里是什么我现在一个片段：

 几何=新THREE.CubeGeometry（200，200，200）;
材料=新THREE.MeshBasicMaterial（{颜色：为0xFF0000，线框：真}）;
目=新THREE.Mesh（几何形状，材料）;
// WebGL的渲染在这里功能渲染（）{
    mesh.rotation.x + = 0.01;
    mesh.rotation.y + = 0.02;
    renderer.render（场景，摄像头）;
}功能changeStuff（）{
    mesh.geometry.width = 500; //不工作。
    mesh.width = 500; //不工作。
    geometry.width = 500; //不工作。
    mesh.position.x = 500 //作品！    渲染（）;
}
 

谢谢！

修改

找到了解决方法：

  mesh.scale.x = 500;
 

解决方案

刚完成意见和问题的解决（并有一个答案present与例如code）：

  //创建一个立方体，1个单位的宽度，高度，深度
VAR几何=新THREE.CubeGeometry（1,1,1）;//每个立方体方得到另一种颜色
VAR cubeMaterials = [
    新THREE.MeshBasicMaterial（{颜色：0x33AA55，透明：真实的，不透明度：0.8}）
    新THREE.MeshBasicMaterial（{颜色：0x55CC00，透明：真实的，不透明度：0.8}）
    新THREE.MeshBasicMaterial（{颜色：0x000000处，透明：真实的，不透明度：0.8}）
    新THREE.MeshBasicMaterial（{颜色：0x000000处，透明：真实的，不透明度：0.8}）
    新THREE.MeshBasicMaterial（{颜色：0x0000FF，透明：真实的，不透明度：0.8}）
    新THREE.MeshBasicMaterial（{颜色：0x5555AA，透明：真实的，不透明度：0.8}）
];
//创建一个MeshFaceMaterial，允许立方体对每一面不同的材料
VAR cubeMaterial =新THREE.MeshFaceMaterial（cubeMaterials）;
VAR立方=新THREE.Mesh（几何，cubeMaterial）;cube.position.set（0,0,0）;
scene.add（立方体）;
cube.scale.x = 2.5; // SCALE
cube.scale.y = 2.5; // SCALE
cube.scale.z = 2.5; // SCALE
 

在这里实现稍微高级的，动态的例子： http://www.echteinfach.tv/ formeln /几何学/ quader / （仍然是相同的缩​​放）

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 implemented here: http://www.echteinfach.tv/formeln/geometrie/quader/ (still the same scaling)

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