我将如何在平面顶部的 3d 对象下添加 2d 精灵以显示我的对象被突出显示/选择?
另外,我将如何在不平坦的地形上做到这一点?
我附上了一个示例图片以更好地解释我的问题:
我不确定使用精灵是个好主意。
正如您所说的不平坦地形,最好使用不平坦的东西。例如,球体或圆柱体的材质为.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
:
Alpha 贴图是一种灰度纹理,用于控制整个表面的不透明度(黑色:完全透明;白色:完全不透明)。默认为空。仅使用纹理的颜色,如果存在则忽略 Alpha 通道。对于 RGB 和 RGBA 纹理,WebGL 渲染器在对该纹理进行采样时将使用绿色通道,因为在 DXT 压缩和未压缩的 RGB 565 格式中为绿色提供了额外的精度。仅亮度和亮度/alpha 纹理也将按预期工作。
这就是为什么我们只有黑色和白色。
让我们创建一个带有黄色环的最简单 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;
}
其余的都不是那么难。我们需要一组 NPC,我们将检查它们的交叉点
var npcs = [];
for (var i = 0; i < 10; i++) {
npcs.push(npc());
}
然后在mousedown
事件中我们将选择一个 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示例。在这里,您可以使用鼠标右键选择对象。