[英]Geometry, Materials and Mesh in Three.js Question
Currently working with Three.js.目前正在使用 Three.js。
What I have:我拥有的:
As shown in the figure and code below i have a for loop that create a specific object on random position in the scene.如下图和代码所示,我有一个 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 );
}
My Question:我的问题:
How to create random objects of different material and geometry in a for loop?如何在for循环中创建不同材料和几何形状的随机对象?
Can i use the idea of creating an array that holds the specific geometry/material and if so how to store this in an array and how to use it?我可以使用创建一个包含特定几何体/材料的数组的想法,如果可以,如何将其存储在数组中以及如何使用它?
array idea:阵列思路:
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]] );
....
}
You can do anything you want really.你真的可以做任何你想做的事。 You just have to populate your materialList[]
One way你只需要填充你的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 }));
}
of cource your random[n]
function must return something between [0-99]当然你的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.