如何使用 Three.js 更改 CubeGeometry 的宽度?
Posted
技术标签:
【中文标题】如何使用 Three.js 更改 CubeGeometry 的宽度?【英文标题】:How to change width of CubeGeometry with Three.js? 【发布时间】: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 是您的解决方案 【参考方案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;
【讨论】:
以上是关于如何使用 Three.js 更改 CubeGeometry 的宽度?的主要内容,如果未能解决你的问题,请参考以下文章