ThreeJSハイライト/プロジェクタ

Question

3Dオブジェクトの下に2次元スプライトを追加して飛行機の上に置いて、オブジェクトが強調表示されていることを示す方法を教えてください。

また、不均等な地形ではどうすればよいですか？

は、私はより良い私の質問を説明するために、サンプル画像を添付しています：

Answer 1

私はスプライトを使用すると良いアイデアであることはよく分かりません。

不均等な地形について言われたように、平らでないものを使用する方が良いです。例えば、.alphaMapの材質の球または円柱です。

選択の効果のために、リング状のものが必要です。

あなたが球を選んだ、のは仮定しよう、そしてあなたは、その材料のalphaMapキャンバスからファイルまたは動的に作成したテクスチャからを設定することができます。

// alpha texture 
var canvas = document.createElement("canvas"); 
canvas.width = 128; 
canvas.height = 128; 
var ctx = canvas.getContext("2d"); 
var gradient = ctx.createLinearGradient(0, 0, 0, 128); 
gradient.addColorStop(0.35, "black"); 
gradient.addColorStop(0.475, "white"); 
gradient.addColorStop(0.525, "white"); 
gradient.addColorStop(0.65, "black"); 
ctx.fillStyle = gradient; 
ctx.fillRect(0, 0, 128, 128); 
var alphaTexture = new THREE.Texture(canvas); 
alphaTexture.needsUpdate = true; 

について.alphaMap：

アルファマップは、サーフェス全体の不透明度を制御するグレースケールテクスチャです（黒：完全透明、白：完全不透明）。デフォルトはnullです。 テクスチャの色のみが使用され、アルファチャンネルが存在する場合は無視されます。 RGBおよびRGBAテクスチャの場合、WebGLレンダラは、DXTで圧縮された非圧縮のRGB 565形式の緑色の余分なビット精度により、このテクスチャをサンプリングするときに緑のチャネルを使用します。輝度のみと輝度/アルファテクスチャも期待どおりに機能します。

私たちはそこに白黒だけを持っています。

は、私たちのNPCが選択されていることを示す黄色のリングを持つ最も単純NPCのオブジェクトを作成してみましょう：

var npc = function() { 
    var geom = new THREE.SphereGeometry(4, 4, 2); 
    geom.translate(0, 4, 0); 
    var mesh = new THREE.Mesh(geom, new THREE.MeshLambertMaterial({ 
    color: Math.random() * 0xffffff 
    })); 

    // highlighter 
    geom.computeBoundingSphere(); 
    var sphereGeom = new THREE.SphereGeometry(geom.boundingSphere.radius, 32, 24); 
    var sphereMat = new THREE.MeshBasicMaterial({ 
    color: "yellow", // yellow ring 
    transparent: true, // to make our alphaMap work, we have to set this parameter to `true` 
    alphaMap: alphaTexture 
    }); 
    var sphere = new THREE.Mesh(sphereGeom, sphereMat); 
    sphere.visible = false; 
    mesh.add(sphere); 
    mesh.userData.direction = new THREE.Vector3(Math.random() - 0.5, 0, Math.random() - 0.5).normalize(); 
    mesh.userData.speed = Math.random() * 5 + 5; 
    mesh.position.set(
    Math.random() * (worldWidth - 10) - (worldWidth - 10) * 0.5, 
    10, 
    Math.random() * (worldDepth - 10) - (worldDepth - 10) * 0.5 
); 
    scene.add(mesh); 
    return mesh; 
} 

残りはそれほど難しいことではありません。 我々は交差点

var npcs = []; 
for (var i = 0; i < 10; i++) { 
    npcs.push(npc()); 
} 

をチェックしますと、その後mousedownイベントに我々はNPC（interactive cubes例から採取され、私たちのニーズに合わせて変更）を選択します私たちのNPCの配列が必要です。

を

window.addEventListener('mousedown', onMouseDown, false); 

function onMouseDown(event) { 
    if (event.button != 2) return; 
    mouse.x = (event.clientX/window.innerWidth) * 2 - 1; 
    mouse.y = -(event.clientY/window.innerHeight) * 2 + 1; 

    selector.setFromCamera(mouse, camera); 
    var intersects = selector.intersectObjects(npcs); 
    if (intersects.length > 0) { 
     if (INTERSECTED != intersects[ 0 ].object) { 
     if (INTERSECTED) INTERSECTED.children[0].visible = INTERSECTED.selected; 
     INTERSECTED = intersects[ 0 ].object; 
     INTERSECTED.selected = INTERSECTED.children[0].visible; 
     INTERSECTED.children[0].visible = true; 
     } 
    } else { 
     if (INTERSECTED) INTERSECTED.children[0].visible = INTERSECTED.selected; 
     INTERSECTED = null; 
    } 
} 

jsfiddle例。ここでは、マウスの右ボタンでオブジェクトを選択できます。