tutorial three examples español animation three.js mesh

animation - examples - three.js tutorial



¿Cómo cambiar el ancho de CubeGeometry con Three.js? (2)

Las propiedades de escala se pueden usar para cambiar el ancho, la altura y la profundidad del cubo.

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

Tengo una geometría de cubo y una malla, y no sé cómo cambiar el ancho (o la altura ... puedo cambiar x, y, z) Aquí hay un fragmento de lo que tengo ahora:

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

¡Gracias!

EDITAR

Encontré una solución:

mesh.scale.x = 500;


Solo para completar el comentario y la solución de la pregunta (y presente una respuesta con el código de ejemplo):

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

Un ejemplo dinámico, ligeramente avanzado, implementado aquí: https://www.matheretter.de/formeln/geometrie/quader/ (sigue siendo la misma escala)