forge viewer 点击构件在构件中心点种点,点击点弹出信息框
时间: 2024-03-21 08:38:57 浏览: 15
您可以通过以下步骤实现在 Forge Viewer 中点击构件,在构件中心点处弹出信息框:
1. 首先,您需要使用 Forge Viewer API 中的 `viewer.select()` 方法来选择您想要点击的构件。这将返回一个包含所选构件信息的对象。
2. 接着,您可以使用 `viewer.model.getBoundingBox()` 方法来获取所选构件的包围盒。
3. 然后,您可以计算出包围盒的中心点坐标,并将其作为信息框的位置。
4. 最后,您可以使用任何您喜欢的 JavaScript 库来创建信息框,并将其定位到所选择的构件的中心点。
这是一个简单的代码示例,演示如何在 Forge Viewer 中实现此功能:
```
viewer.select(dbId).then(function(selection) {
var bbox = selection.bbox;
var center = new THREE.Vector3();
bbox.getCenter(center);
// create and position your info box here
});
```
请注意,这只是一个基本示例,您可以根据自己的具体需求进行更改和扩展。
相关问题
forge viewer 设置点,并闪烁,点击点弹出信息框
要在 Forge Viewer 中设置点并使其闪烁,并在点击点时弹出信息框,你可以使用以下代码:
```javascript
// 创建点的材质
const markerMaterial = new THREE.SpriteMaterial({
map: new THREE.TextureLoader().load('https://forgeviewer-2022.oss-cn-beijing.aliyuncs.com/forge-marker.png'),
color: 0xffffff
});
// 创建点的函数
function createMarker(dbId, position) {
const sprite = new THREE.Sprite(markerMaterial);
sprite.position.copy(position);
sprite.scale.set(20, 20, 1);
sprite.name = dbId.toString();
viewer.impl.addOverlay('marker', sprite);
return sprite;
}
// 闪烁点的函数
function blinkMarker(marker, duration) {
const interval = setInterval(() => {
marker.visible = !marker.visible;
}, 500);
setTimeout(() => {
clearInterval(interval);
marker.visible = true;
}, duration);
}
// 添加点的点击事件
viewer.addEventListener(Autodesk.Viewing.MOUSE_CLICK, function (event) {
const raycaster = viewer.impl.raycaster;
const intersects = raycaster.intersectObjects(viewer.impl.overlayScenes.marker.children);
if (intersects.length > 0) {
const marker = intersects[0].object;
// 获取点的属性
const dbId = parseInt(marker.name);
viewer.getProperties(dbId, function (props) {
// 创建信息框
const container = document.createElement('div');
container.innerHTML = `
<div>点 ID: ${dbId}</div>
<div>点名称: ${props.name}</div>
<div>点坐标: (${marker.position.x.toFixed(2)}, ${marker.position.y.toFixed(2)}, ${marker.position.z.toFixed(2)})</div>
`;
// 显示信息框
viewer.container.appendChild(container);
// 设置信息框位置
const screenPoint = viewer.worldToClient(marker.position);
container.style.left = `${screenPoint.x}px`;
container.style.top = `${screenPoint.y}px`;
});
}
});
// 添加两个点
const marker1 = createMarker(1, new THREE.Vector3(-100, -100, 0));
const marker2 = createMarker(2, new THREE.Vector3(100, 100, 0));
// 闪烁点
blinkMarker(marker1, 5000);
blinkMarker(marker2, 8000);
```
在上面的代码中,我们首先创建了一个点的材质 `markerMaterial`,然后定义了一个 `createMarker` 函数,该函数会创建一个包含指定位置的点,并将其添加到 Viewer 中。我们还定义了一个 `blinkMarker` 函数,该函数会使指定的点闪烁。
接下来,我们添加了一个 `Autodesk.Viewing.MOUSE_CLICK` 事件监听器,当用户单击点时,我们会获取该点的属性,并在页面上创建一个信息框,显示该点的属性。我们还使用 `worldToClient` 方法将点的位置转换为屏幕坐标,并将信息框的位置设置为该点的屏幕位置。
最后,我们添加了两个点,并使用 `blinkMarker` 函数使它们闪烁。你可以根据需要修改点的位置、闪烁时间和信息框的内容。
vue 中 forge viewer 设置模型高亮,点击模型弹出信息框
要在 Forge Viewer 中设置模型高亮和在点击模型时弹出信息框,你可以使用以下代码:
```javascript
// 定义模型高亮材质
const highlightMaterial = new THREE.MeshPhongMaterial({
color: 0xff0000,
shininess: 0.8
});
// 添加模型高亮效果
function highlightModel(dbId) {
const fragIdsArray = viewer.model.getFragmentList().getFragIds(dbId);
for (let i = 0; i < fragIdsArray.length; i++) {
const fragId = fragIdsArray[i];
const fragProxy = viewer.impl.getFragmentProxy(viewer.model, fragId);
fragProxy.getMaterial(true, highlightMaterial);
fragProxy.updateAnimTransform();
}
}
// 取消模型高亮效果
function unhighlightModel(dbId) {
const fragIdsArray = viewer.model.getFragmentList().getFragIds(dbId);
for (let i = 0; i < fragIdsArray.length; i++) {
const fragId = fragIdsArray[i];
const fragProxy = viewer.impl.getFragmentProxy(viewer.model, fragId);
fragProxy.getMaterial(true);
fragProxy.updateAnimTransform();
}
}
// 添加模型点击事件
viewer.addEventListener(Autodesk.Viewing.SELECTION_CHANGED_EVENT, function (event) {
const dbId = event.dbIdArray[0];
if (dbId) {
// 获取模型的属性
viewer.getProperties(dbId, function (props) {
// 创建信息框
const container = document.createElement('div');
container.innerHTML = `
<div>构件 ID: ${dbId}</div>
<div>构件名称: ${props.name}</div>
<div>构件类型: ${props.type}</div>
`;
// 显示信息框
viewer.container.appendChild(container);
// 设置信息框位置
const screenPoint = viewer.worldToClient(viewer.impl.getFragmentProxy(viewer.model, dbId).fragProxy.position);
container.style.left = `${screenPoint.x}px`;
container.style.top = `${screenPoint.y}px`;
// 高亮模型
highlightModel(dbId);
});
}
});
// 添加单击事件,隐藏信息框和取消模型高亮效果
viewer.addEventListener(Autodesk.Viewing.CAMERA_CHANGE_EVENT, function () {
const container = viewer.container.querySelector('.info-container');
if (container) {
container.remove();
}
viewer.clearSelection();
});
```
在上面的代码中,我们首先定义了一个模型高亮材质 `highlightMaterial`,然后在 `highlightModel` 函数中将指定的构件设为高亮状态。在 `unhighlightModel` 函数中,我们将指定的构件的材质设为默认值,从而取消高亮效果。
接下来,我们添加了一个 `Autodesk.Viewing.SELECTION_CHANGED_EVENT` 事件监听器,当用户单击模型时,我们会获取该构件的属性,并在页面上创建一个信息框,显示该构件的属性。我们还在 `highlightModel` 函数中调用了 `unhighlightModel` 函数,以取消其他构件的高亮效果。
最后,我们添加了一个 `Autodesk.Viewing.CAMERA_CHANGE_EVENT` 事件监听器,当用户单击页面时,我们会隐藏信息框和取消模型的高亮效果。