[英]Geometry, Materials and Mesh in Three.js Question
目前正在使用 Three.js。
我擁有的:
如下圖和代碼所示,我有一個 for 循環,它在場景中的隨機位置創建一個特定的對象。
//Create Objects
var geometry = new THREE.CylinderBufferGeometry( 0, 10, 30, 4, 1 );
var material = new THREE.MeshPhongMaterial( { color: 0xffffff, flatShading: true } );
for(var i=0; i<100; i++) {
var mesh = new THREE.Mesh( geometry, material );
mesh.position.x = getRandomInt(-500,500);
mesh.position.y = getRandomInt(10, 100);
mesh.position.z = getRandomInt(-500,500);
mesh.updateMatrix();
mesh.matrixAutoUpdate = false;
scene_Main.add( mesh );
}
我的問題:
如何在for循環中創建不同材料和幾何形狀的隨機對象?
我可以使用創建一個包含特定幾何體/材料的數組的想法,如果可以,如何將其存儲在數組中以及如何使用它?
陣列思路:
var geometryList = [cube, pyramid, sphere, donut, ...];
var materialList = [ .. what posibilities I have here? .. ];
for(var i=0; i<100; i++) {
var mesh = new THREE.Mesh( geometryList[random[n]], materialList[random[n]] );
....
}
你真的可以做任何你想做的事。 你只需要填充你的materialList[]
一種方式
for(var i=0; i<100; i++) {
color = new THREE.Color( 0xffffff );
color.setHex( Math.random() * 0xffffff );
materialList.push(new THREE.MeshBasicMaterial({ color: color }));
}
當然你的random[n]
函數必須返回 [0-99] 之間的東西
var materialList = [];
for(var i=0; i<150; i++) {
//Prepare different material for each object
var color = new THREE.Color( 0xffffff );
color.setHex( Math.random() * 0xffffff );
materialList.push(new THREE.MeshBasicMaterial({ color: color }));
//Prepare diferent sizes for the objects
var geometrySize_2 = getRandomInt(5,30);
//Create 50 Pyramids
if(i <= 50){
var geometry1 = new THREE.CylinderBufferGeometry( 0, 10, 30, 4, 1 );
var mesh = new THREE.Mesh( geometry1, materialList[i] );
mesh.position.x = getRandomInt(-500,500);
mesh.position.y = getRandomInt(10, 150);
mesh.position.z = getRandomInt(-500,500);
mesh.updateMatrix();
mesh.matrixAutoUpdate = false;
scene_Main.add( mesh );
}
//Create 50 Cubes
else if(i <= 100 && i>= 50){
var geometry2 = new THREE.BoxGeometry(geometrySize_2,geometrySize_2,geometrySize_2);
var mesh = new THREE.Mesh( geometry2, materialList[i] );
mesh.position.x = getRandomInt(-500,500);
mesh.position.y = getRandomInt(10, 150);
mesh.position.z = getRandomInt(-500,500);
mesh.updateMatrix();
mesh.matrixAutoUpdate = false;
scene_Main.add( mesh );
}
//Create 100 Spheres
else if(i <= 150 && i>= 50){
var geometry3 = new THREE.SphereGeometry( 5, 32, 32 );
var mesh = new THREE.Mesh( geometry3, materialList[i] );
mesh.position.x = getRandomInt(-500,500);
mesh.position.y = getRandomInt(10, 150);
mesh.position.z = getRandomInt(-500,500);
mesh.updateMatrix();
mesh.matrixAutoUpdate = false;
scene_Main.add( mesh );
}
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.