1

各レイヤーの「Z軸」に違い​​を持たせたロレックスの立方体のような形状を作ってみました。ここで、カメラの位置を変更して、ジオメトリが期待どおりであることを確認できるようにします。私の質問は、ウィンドウをドラッグしながらカメラの位置を変更する方法であり、マウス イベントに基づいて個々のコーンの回転を操作できるはずです。

これが私のjsfiddleリンクです：http://jsfiddle.net/sagh0900/gfraQ/8/

サンプルコードですが、jsfiddle にアクセスして、私の質問の詳細を確認してください:

for ( var i = 0; i <nSize; i++)
{
    var k = i%10,
        j = (i-k)/10;

    j = j*2 - 10;
    k = k*2 - 10;

    var cone1 = lc_relationship.sensor1[i].Geometry; 
    scene.add(cone1);
    var cone2 = lc_relationship.sensor2[i].Geometry;
    scene.add(cone2);
    var cone3 = lc_relationship.sensor3[i].Geometry;
    scene.add(cone3);
    cone1.position.set(j, k, lc_relationship.sensor1[i].z_cordinate);
    cone2.position.set(j, k, lc_relationship.sensor2[i].z_cordinate);
    cone3.position.set(j, k, lc_relationship.sensor3[i].z_cordinate);
}

誰かが私のjsfiddleを更新したり、私に助けを提供したりできれば十分です。

前もって感謝します。

4

1 に答える 1

4

空の (null) メッシュを使用して、シーンの代わりにオブジェクトを追加します: メッシュ

mesh = new THREE.Mesh(new THREE.Geometry());
scene.add(mesh);
/*[...]*/
mesh.add(cone1);
/*[...]*/
mesh.add(cone2);
/*[...]*/
mesh.add(cone3);
/*[...]*/

そして、これを追加してこのメ​​ッシュを回転させます:

var screenW = window.innerWidth;
var screenH = window.innerHeight; /*SCREEN*/
var spdx = 0, spdy = 0; mouseX = 0, mouseY = 0, mouseDown = false; /*MOUSE*/
document.addEventListener('mousemove', function(event) {
    mouseX = event.clientX;
    mouseY = event.clientY;
}, false);
document.body.addEventListener("mousedown", function(event) {
    mouseDown = true
}, false);
document.body.addEventListener("mouseup", function(event) {
    mouseDown = false
}, false);
function animate() {    
    spdy =  (screenH / 2 - mouseY) / 40;
    spdx =  (screenW / 2 - mouseX) / 40;
    if (mouseDown){
        mesh.rotation.x = spdy;
        mesh.rotation.y = spdx;
    }
}

テスト: http://jsfiddle.net/gfraQ/11/

于 2012-12-27T16:22:09.143 に答える