葛兰岱尔rapid3D Loader for Three.js使用方式及7个基础API说明

如何快速开始使用葛兰岱尔rapid3D Loader for Three.js，示例代码如下：

复制代码

 注意：three.js版本需要满足 0.170 及以上版本。three.js
import {
    Scene, WebGLRenderer, https://zhida.zhihu.com/search?content_id=274415423&content_type=Article&match_order=1&q=PerspectiveCamera&zhida_source=entity

, AmbientLight, https://zhida.zhihu.com/search?content_id=274415423&content_type=Article&match_order=1&q=DirectionalLight&zhida_source=entity

, Color,
    Vector2, https://zhida.zhihu.com/search?content_id=274415423&content_type=Article&match_order=1&q=Vector3&zhida_source=entity


} from 'three';

import https://zhida.zhihu.com/search?content_id=274415423&content_type=Article&match_order=1&q=OptRapid3dLoader&zhida_source=entity

 from 'OptRapid3dLoader.js';

// 1. 初始化场景
const scene = new Scene();
scene.background = new Color(0x87CEFA);

// 2. 初始化渲染器
const renderer = new WebGLRenderer({
    antialias: true,
    logarithmicDepthBuffer: true
});
renderer.setSize(window.innerWidth, window.innerHeight);
document.getElementById("container").appendChild(renderer.domElement);

// 3. 初始化相机
const camera = new PerspectiveCamera(60, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.set(0, 100, 150);
camera.lookAt(0, 0, 0);

// 4. 添加灯光
const ambientLight = new AmbientLight(0xffffff, 2.0);
scene.add(ambientLight);
const mainLight = new DirectionalLight(0xffffff, 1.0);
mainLight.position.set(5, 10, 7);
scene.add(mainLight);

// 5. 加载模型
const loader = new OptRapid3dLoader({
    renderer: renderer,
    camera: camera,
    parent: scene,
    libs: './libs', // 对应您使用的 three 版本的 libs 目录，插件依赖 libs 目录中的 draco 和 basis 解析器
    url: "http://192.168.1.200/bim/house_opt/root.opt",
    callback: () => {
        console.log("加载完成!");
    }
});

// 6. 动画循环
function animate() {
    requestAnimationFrame(animate);
    loader.interface.update(); // 每一个 loader 实例都需要在这里触发更新函数
    renderer.render(scene, camera);
}
animate();

基础7个API 说明

构造函数

new OptRapid3dLoader(options)

创建一个 OptRapid3dLoader 实例。

参数	类型	说明
renderer	WebGLRenderer	Three.js 的渲染器实例
camera	Camera	Three.js 的相机
parent	Scene / Group	Three.js 的容器
libs	String	解码器文件的目录路径。如果不传，将默认使用公共 CDN：https://unpkg.com/three@0.170.0/examples/jsm/libs
url	String	使用专用导出插件导出的 opt 数据格式路径
callback	Function	模型加载完成回调函数

交互接口 (Interface)

OptRapid3dLoader 提供了强大的 interface 对象，用于对模型中的特定构件进行交互和控制。所有的操作都是异步的，请配合 await 使用。

构件拾取 (Pick)

通过屏幕坐标拾取场景中的构件信息。

复制代码

const json = await loader.interface.pick({ position: new Vector2(x, y) });

position (Vector2): 屏幕像素坐标，通常对应鼠标点击事件的 clientX 和 clientY。
返回 : Promise<Object | null>，包含构件 ID 等信息。

设置颜色 (SetColor)

修改指定构件的颜色。

复制代码

await loader.interface.setColor({
    featureIds: json.id,
    type: 0,
    color: "rgb(255, 255, 0)"
});

featureIds (String): 目标构件 ID，支持批量操作（如 1111#2222）。
type (Number): 着色类型，0 是混合，1 是替换。
color (String): CSS 格式颜色值。

设置显隐 (SetVisible)

控制构件的显示或隐藏状态。

复制代码

await loader.interface.setVisible({
    featureIds: json.id,
    visible: false
});

visible (Boolean): true 为显示，false 为隐藏。

设置透明度 (SetAlpha)

调整构件的透明度和颜色。

复制代码

await loader.interface.setAlpha({
    featureIds: json.id,
    color: "rgb(255, 0, 0)",
    alpha: 0.3
});

alpha (Number): 透明度数值，范围 0.0 到 1.0。

构件偏移 (Offset)

对构件进行位置平移。

复制代码

await loader.interface.offset({
    featureIds: json.id,
    x: 10,
    y: 10,
    z: 0
});

清除偏移 (ClearOffset)

重置构件的位置偏移，恢复原始位置。

复制代码

await loader.interface.clearOffset({
    featureIds: json.id
});

构件旋转 (Rotate)

对构件进行旋转变换。

复制代码

await loader.interface.rotate({
    featureIds: json.id,
    angle: 30
});

angle (Number): 旋转角度。

清除旋转 (ClearRotate)

重置构件的旋转状态，恢复原始角度。

复制代码

await loader.interface.clearRotate({
    featureIds: json.id
});

构件定位 (ZoomTo)

自动调整相机视角以聚焦于指定构件。

复制代码

await loader.interface.zoomTo({
    featureIds: json.id
});

生命周期管理

复制代码

loader.interface.update();   // loader 更新
loader.interface.dispose();  // loader 销毁

立即体验

快来访问 葛兰岱尔官网 免费下载：高性能Loader for Three.js 理解体验吧。https://www.glendale.top

同时，我公司还提供了：

1.七个基础接口调用和3D/BIM模型数据应用示例demo程序及源码；

2.基于Loader的three.js mesh对象的功能扩展开发示例demo程序及源码；