Skip to content

No basis found for brep! #182

@nachovoss

Description

@nachovoss

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.

image

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;
`

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions