簡體   English   中英

Three.js 中的幾何、材料和網格問題

[英]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.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM