-
Notifications
You must be signed in to change notification settings - Fork 137
Description
Im getting this error when trying to upload an ifc to the documentation example:
https://ifcjs.github.io/info/docs/Guide/web-ifc-three/Tutorials/Memory
and also to my React implementation.
my ifc link: https://drive.google.com/file/d/1TLsJ6ikol2rPnUG1yq279_WBlNeg7Mku/view?usp=sharing
My code:
`
import React, { useEffect, useRef, useState } from 'react';
import {
AmbientLight,
AxesHelper,
DirectionalLight,
GridHelper,
PerspectiveCamera,
Scene,
WebGLRenderer,
} from 'three';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';
import { IFCLoader } from 'web-ifc-three/IFCLoader';
import {
acceleratedRaycast,
computeBoundsTree,
disposeBoundsTree,
} from 'three-mesh-bvh';
import {
IFCWALLSTANDARDCASE,
IFCSLAB,
IFCDOOR,
IFCWINDOW,
IFCFURNISHINGELEMENT,
IFCMEMBER,
IFCPLATE,
} from 'web-ifc';
const ThreeScene = () => {
const threeCanvas = useRef(null);
const scene = useRef(new Scene());
const [ifcModels, setIfcModels] = useState([]);
const [categories, setCategories] = useState({
IFCWALLSTANDARDCASE: IFCWALLSTANDARDCASE,
IFCSLAB: IFCSLAB,
IFCFURNISHINGELEMENT: IFCFURNISHINGELEMENT,
IFCDOOR: IFCDOOR,
IFCWINDOW: IFCWINDOW,
IFCPLATE: IFCPLATE,
IFCMEMBER: IFCMEMBER,
});
const [subsets, setSubsets] = useState({});
const [checkedCategories, setCheckedCategories] = useState({
IFCWALLSTANDARDCASE: true,
IFCSLAB: true,
IFCFURNISHINGELEMENT: true,
IFCDOOR: true,
IFCWINDOW: true,
IFCPLATE: true,
IFCMEMBER: true,
});
useEffect(() => {
const size = {
width: window.innerWidth,
height: window.innerHeight,
};
const camera = new PerspectiveCamera(75, size.width / size.height);
camera.position.z = 15;
camera.position.y = 13;
camera.position.x = 8;
const lightColor = 0xffffff;
const ambientLight = new AmbientLight(lightColor, 0.5);
scene.current.add(ambientLight);
const directionalLight = new DirectionalLight(lightColor, 1);
directionalLight.position.set(0, 10, 0);
directionalLight.target.position.set(-5, 0, 0);
scene.current.add(directionalLight);
scene.current.add(directionalLight.target);
const renderer = new WebGLRenderer({
canvas: threeCanvas.current,
alpha: true,
});
renderer.setSize(size.width, size.height);
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
const grid = new GridHelper(50, 30);
scene.current.add(grid);
const axes = new AxesHelper();
axes.material.depthTest = false;
axes.renderOrder = 1;
scene.current.add(axes);
const controls = new OrbitControls(camera, threeCanvas.current);
controls.enableDamping = true;
controls.target.set(-2, 0, 0);
const animate = () => {
controls.update();
renderer.render(scene.current, camera);
requestAnimationFrame(animate);
};
animate();
const handleResize = () => {
size.width = window.innerWidth;
size.height = window.innerHeight;
camera.aspect = size.width / size.height;
camera.updateProjectionMatrix();
renderer.setSize(size.width, size.height);
};
window.addEventListener('resize', handleResize);
const ifcLoader = new IFCLoader();
ifcLoader.ifcManager.setWasmPath("../../common/3dViewer/wasm/");
ifcLoader.ifcManager.setupThreeMeshBVH(
computeBoundsTree,
disposeBoundsTree,
acceleratedRaycast
);
const handleFileUpload = (event) => {
const file = event.target.files[0];
if (file) {
const reader = new FileReader();
reader.onload = async (event) => {
ifcLoader.load(event.target.result, async (ifcModel) => {
setIfcModels((prevModels) => [...prevModels, ifcModel]);
await setupAllCategories();
});
};
reader.readAsDataURL(file);
}
};
document
.getElementById('file-input')
.addEventListener('change', handleFileUpload);
const getName = (category) => {
const names = Object.keys(categories);
return names.find((name) => categories[name] === category);
};
const getAll = async (category) => {
return ifcLoader.ifcManager.getAllItemsOfType(0, category, false);
};
const newSubsetOfType = async (category) => {
const ids = await getAll(category);
return ifcLoader.ifcManager.createSubset({
modelID: 0,
scene: scene.current,
ids,
removePrevious: true,
customID: category.toString(),
});
};
const setupAllCategories = async () => {
const allCategories = Object.values(categories);
for (let i = 0; i < allCategories.length; i++) {
const category = allCategories[i];
await setupCategory(category);
}
};
const setupCategory = async (category) => {
const newSubset = await newSubsetOfType(category);
setSubsets((prevSubsets) => ({
...prevSubsets,
[category]: newSubset,
}));
if (checkedCategories[category]) {
scene.current.add(newSubset);
}
};
return () => {
window.removeEventListener('resize', handleResize);
document
.getElementById('file-input')
.removeEventListener('change', handleFileUpload);
};
}, [checkedCategories, categories]);
const handleCheckboxChange = (category) => {
return (event) => {
const checked = event.target.checked;
debugger
setCheckedCategories((prevCheckedCategories) => ({
...prevCheckedCategories,
[category]: checked,
}));
const subset = subsets[category];
if (checked) scene.current.add(subset);
else subset.removeFromParent();
};
};
return (
<div>
<input type="file" id="file-input" />
{Object.keys(categories).map((categoryName) => {
const category = categories[categoryName];
return (
<div key={categoryName}>
<input
type="checkbox"
id={categoryName}
checked={checkedCategories[categoryName]}
onChange={handleCheckboxChange(category)}
/>
<label htmlFor={categoryName}>{categoryName}</label>
</div>
);
})}
<canvas ref={threeCanvas} />
</div>
);
};
export default ThreeScene;
`
