在A帧场景中,我有两个对象,一个圆柱体和一个多边形,表示一个Three.js 3D对象。我只想让多边形在悬停时发生变化,就像圆柱体一样。
我在这里有一个有效的演示:Demo
当光标悬停在圆柱体上时,屏幕上将显示悬停的文本,并且圆柱体的颜色会使用Raycaster组件更改。如何对多边形执行相同的操作?
多边形是使用以下命令创建的:
AFRAME.registerComponent('foo', {
init: function() {
let points = [];
points.push(new THREE.Vector2(0, 0));
points.push(new THREE.Vector2(1.5, 0));
points.push(new THREE.Vector2(2.5, 1));
points.push(new THREE.Vector2(2.5, 2.5));
points.push(new THREE.Vector2(1, 3.5));
for (let i = 0; i < points.length; i++) {
points[i].multiplyScalar(0.25);
}
let shape = new THREE.Shape(points);
let extrudedGeometry = new THREE.ExtrudeGeometry(shape, {
amount: 1,
bevelEnabled: false
});
// Geometry doesn't do much on its own, we need to create a Mesh from it
let extrudedMesh = new THREE.Mesh(extrudedGeometry, new THREE.MeshPhongMaterial({
color: 0xff0000
}));
this.el.object3D.add(extrudedMesh);
let geometry = new THREE.ShapeGeometry(shape);
let material = new THREE.MeshBasicMaterial({
color: 0x00ff00
});
let mesh = new THREE.Mesh(geometry, material);
this.el.object3D.add(mesh);
}
});
谢谢。
发布于 2020-04-10 19:56:43
光线投射到实体的网格上。你可以用setObject3D来设置它。执行以下操作:
let mesh = new THREE.Mesh(geometry, material);
this.el.setObject3D('mesh', mesh);
https://stackoverflow.com/questions/61143589
复制相似问题