3

表示/非表示:

私は Three.js リリース 50 を使用しており、次の助けを借りてオブジェクトを表示/非表示にすることができます (私のアプリケーションではメッシュの子です)。

THREE.SceneUtils.traverseHierarchy(mesh,function(child){
    var z = document.getElementById("cameras").selectedIndex*5 -10;
    if (z === -10){
        child.visible = true;
    } else if (child.position.z !== z){
        child.visible = false;
    } else {

        child.visible = true;
    };
});

しかし、リリース 54 を使用している間、object.traverse を使用することは非常に困難であると言われています。リリース 54 を使用して上記のコードを置き換える方法は? リリース 54 の使用中に発生するエラーは次のとおりです。

ここに画像の説明を入力

ピッキング：

"Ray Picking" とそのリンクに基づく Three.js での Picking の非常に有名で複雑な例を見つけました: Three.js Picking Example。この例に基づいて、アプリケーションにピッキングを実装しようとしました。しかし、どういうわけかこの行でエラーが発生します。

var raycaster = new THREE.Raycaster( camera.position, vector.subSelf( camera.position                   
).normalize() );

カスタムJavaScript オブジェクト[データ構造] 内のコーン [私のジオメトリ] の親子関係を、(Layer1 {オブジェクト内の各レイヤーに使用される配列} には 100 個のコーンがあり、すべてが親であり、レイヤー 2には、レイヤー 1 のコーンの子である 100 個のコーンがあり [多重度 1:1]]、レイヤー 3 には、レイヤー 2 のコーンの子であるコーンがあり、それらの関係も 1:1 であるため、レイヤー 1 のコーンの孫でもあります)。

メッシュを使用して最初のレイヤーからグランド ペアレント コーンを追加し、この親を介してレイヤー 2 の子にアクセスし、それを同じメッシュに追加し、子を介して同じ孫にアクセスし、同じメッシュに追加しました。最後にメッシュ全体をシーンに追加しました。「z 深度」の変動 [レイヤー 1 の場合、z-座標:5、レイヤー 2 の場合: 0 およびレイヤー 3: -5] のため、レイヤー 1 とレイヤー 2 とレイヤー 3 は、下の画像のように文字通り 3 つのレイヤーで形成されます。

ここに画像の説明を入力

しかし、次のコードを使用している間、コーンにピッキングが見られませんでした。

var vector = new THREE.Vector3( mouse.x, mouse.y, 1 );
            projector.unprojectVector( vector, camera );

            var raycaster = new THREE.Raycaster( camera.position, vector.subSelf( camera.position ).normalize() );

            var intersects = raycaster.intersectObjects( scene.children ); // tried with mesh.children as well, but no change :(

            if ( intersects.length > 0 ) {

                if ( INTERSECTED != intersects[ 0 ].object ) {

                    if ( INTERSECTED ) INTERSECTED.material.emissive.setHex( INTERSECTED.currentHex );

                    INTERSECTED = intersects[ 0 ].object;
                    INTERSECTED.currentHex = INTERSECTED.material.emissive.getHex();
                    INTERSECTED.material.emissive.setHex( 0xff0000 );

                }

            } else {

                if ( INTERSECTED ) INTERSECTED.material.emissive.setHex( INTERSECTED.currentHex );

                INTERSECTED = null;

            }

光線が交差するときに特定の円錐を選択し、同時に特定の円錐が祖父母/親/子であるかどうかに基づいて、特定のファミリの残りの円錐も選択することを望みました。祖父母 (Grandparent <- Parent) を入力して親を返し、親を入力して子を返すカスタム データ構造のヘルパー関数を用意しました。

Three.js リリース 54 と CombinedCamera.js を追加のリソースとして使用する JSfiddle リンクがあります。私は真剣に HELP を必要としています。

ここに私の Jsfiddle リンクがあります: http://jsfiddle.net/sagh0900/SQyLL/

Picking を実装して Three.js リリース 54 を使用する前に、Jsfiddle を使用していた以前のバージョン。このバージョンでは、three.js のリリース 50 を使用しました。ネット/sagh0900/PrVbg/3/

ヘルプとサポートをよろしくお願いします:)

4

1 に答える 1

4

WestLangley が述べたように、投稿ごとに 1 つの明確な質問をしていただければ、より適切な回答を得ることができます。

Raycaster を使用して Three.js を選択するやや単純な例として、次の場所に例を投稿しました。

http://stemkoski.github.com/Three.js/Mouse-Tooltip.html

マウスの位置から放射される光線に基づいて、シーン内のオブジェクトのプロパティ (色) を変更します。おそらく、このコードは、あなたの問題の一部に対処するために適応させることができます.

于 2013-03-18T00:46:23.657 に答える