在IFC标准模型如何实现室内灯光管控？

室内灯光管控

示例描述与操作指南

室内光照管控示例，是利用 Threejs 开源接口模拟室内光影与智能家居控制。用户可以将完整代码直接下载下来后，将模型 id 和用户个人账户 devcode 替换上去，即可展示自有模型。

示例效果展示

实现步骤

第一步 创建 SpotLight

// 创建 spotLightconst createSpotLight = (spotLight,corlor) =>{spotLight.forEach(item => {/*** @description:* @params:* @params:* @return:* @example:*/if(ponents[item]) {const spotLight = new THREE.SpotLight(corlor, 1); // 淡黄色// 创建一个Object3D， 将位置设置在次筒灯的下面4000的位置，作为此spotlight的targetconst spotTarget = new THREE.Object3D(); //spotTarget.position.copy(ponents[item].position); //spotTarget.position.z -= 4000;vizbim.scene.add(spotTarget);spotLight.angle = Math.PI / 10; // 设置spotlight的角度// spotLight.intensity = 4; // 设置spotlight的强度spotLight.intensity = 3; // 设置spotlight的强度spotLight.penumbra = 0.05; // 设置spotlight由于半影而衰减的聚光锥的百分比,值在0与1之间spotLight.decay = 2; // 设置光线沿光线距离变暗的量，设置成2有很好的屋里效果spotLight.distance = 5000; // 光线的最大范围spotLight.target = spotTarget; // 设置spotlight的聚光灯的焦点spotLight.visible = false;ponents[item].add(spotLight); // 将此聚光灯添加到该筒灯的场景下}});}

第二步 创建 RectAreaLight

这是 AreaLight 中的一种，使得整个灯具平面都在发光。在本示例中被应用于盏灯中的灯光模拟。

// 创建RectAreaLightconst createRectLight = (reactLightArray) =>{reactLightArray.forEach(item => {/*** @description: 创建RectAreaLight的构造函数* @params: color { Integer } 光源的16进制颜色，默认是白色* @params: intensity { Float } 光源的强度或者亮度，默认是1* @params: width { Float } 光源的宽度，默认是10* @params: height { Float } 光源的高度，默认是10*/if(ponents[item]){const rectLight = new THREE.RectAreaLight(0xffffff, 10, 1100, 540);rectLight.position.set(0, 0, -58);rectLight.intensity = 20;rectLight.visible = false;// 创建一个长方形mesh，添加到光源里，这样就可以看到光源const rectLightMesh = new THREE.Mesh(new THREE.PlaneBufferGeometry(1, 1, 1, 1),new THREE.MeshBasicMaterial({side: THREE.BackSide}));// 将此mesh的宽高设置成与光源的宽高一样rectLightMesh.scale.x = rectLight.width;rectLightMesh.scale.y = rectLight.height;rectLight.add(rectLightMesh);// 将光源添加到此构件下，这样在世界坐标系下，此构件的的位置就和此光源的位置一样ponents[item].add(rectLight);}});}

第三步 创建左侧操作台

// 创建左侧按钮操控区，调整样式const addButtons = () => {const $outDiv = $("<div id='container' ></div>");$("body").append($outDiv);let $divContainer;$("#container").append("<p class='title'>控制面板</p>");Object.keys(state).forEach((item, index) => {const id = state[item].id;const iconId = "icon" + id;const name = state[item].name;const $div = $("<div >" +"<div class='iconContainer'>" +"<i id=" + iconId +" class='icon lightoff'></i>" +"</div>" +"<button id=" + id + " class='layui-btn layui-btn-primary'>" + name + "</button>" +"</div>");if ((index + 1) % 2 === 0) {$divContainer.append($div);$("#container").append($divContainer);} else {$divContainer = $("<div class='itemContainer'></div>");$divContainer.append($div);}});// 监听按钮点击事件Object.keys(state).forEach((item, index) => {const id = state[item].id;$("#" + id).click(() => {vizbim.restoreObjtColor(vizbim.alloids);if(lastSwitch && lastSwitch !== id){turnOnAndOffTheLight(lastSwitch,false);turnOnAndOffTheLight(id,true);}else {state[id].switchFlag = !state[id].switchFlag;turnOnAndOffTheLight(id,state[id].switchFlag);}lastSwitch = id;});});}……// 开启/关闭走廊灯const turnOnAndOffTheLight = (light,onOff) => {const lightArray = state[light].components;const id = state[light].id;const iconId = "icon" + id;if (lightArray && lightArray.length > 0) {if (onOff) {$("#" + light).removeClass("layui-btn-primary");$("#" + iconId).removeClass("lightoff");$("#" + iconId).addClass("lighton");vizbim.setObjtColor(lightArray,[0,1,0]);// vizbim.adaptiveSize(lightArray);} else {$("#" + iconId).removeClass("lighton");$("#" + iconId).addClass("lightoff");$("#" + light).addClass("layui-btn-primary");}lightArray.forEach(item => {const lightIdArray = ponents[item].children;if (lightIdArray && lightIdArray.length > 0) {lightIdArray.forEach(item=>{item.visible = onOff;});}});state[light].switchFlag = onOff;}}

下载完整代码

如果觉得《在IFC标准模型如何实现室内灯光管控？》对你有帮助，请点赞、收藏，并留下你的观点哦！