web-ifc-three
web-ifc-three copied to clipboard
No basis found for brep!
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; `