three.jsでメッシュの面のサイズをランダム化する方法は？

Question

私は最近three.jsで実験を始めました。既存のジオメトリの1つから作成されたメッシュの面のサイズをランダム化する方法があるかどうか疑問に思っていました。

Three-jsは低ポリ作業には優れていますが、生成されたメッシュの対称性が幾分影響を壊しています。私は各面に若干異なるサイズ、おそらくはジッタ/回転を与える方法を探していますそれをより「手作りの」見た目にするために、そう言います。

私はmath.randomでそれを行う方法があると思っていましたが、私はJavaScriptの初心者であり、使い方については分かりません。

これは私が少ない均一な外観を与えたいオブジェクトのコードです：コードは、ローカルで動作しますが、

function createObject() { 
    var geometry = new THREE.SphereGeometry(70, 31, 17); 
    var material = new THREE.MeshPhongMaterial({ 
     color:Colors.blue, 
     shading:THREE.FlatShading 
    }); 
    var sphere = new THREE.Mesh(geometry, material); 
    sphere.position.set(45,100,0); 
    sphere.castShadow = true; 
    sphere.receiveShadow = true; 
    scene.add(sphere); 
} 

ここで私は、可能なコードの残りの部分とフィドルだが、何らかの理由でそれをブラウザで実行するようにしないでください。それでも、あなたがそれを見たいのなら、それがあります。 https://jsfiddle.net/redheadedmandy/f8fy4Lg8/1/

誰かがthree.jsメッシュの均一性を粗くする方法について提案があれば、私はそれを高く評価します！

Answer 1

あなたの意見に基づいて、exampleがあります。まあ、主にあなたの例ですが、わずかに変更されていて、Three.jsの最新バージョンが使用されています。あなたがそのようにそれを行うことができ、「荒削り」のオプションとして

、：

var geometry = new THREE.SphereGeometry(70, 31, 17); 

    geometry.vertices.forEach(v => { 
    v.x += THREE.Math.randFloatSpread(2); 
    v.y += THREE.Math.randFloatSpread(2); 
    v.z += THREE.Math.randFloatSpread(2); 
    }); 

    geometry.computeFaceNormals(); // don't forget to do it, when you change vertices 

は実際には、幾何学的に頂点の座標を変更する方法の多くの方法があります。創造性はあなた次第です。