web-ifc-three icon indicating copy to clipboard operation
web-ifc-three copied to clipboard

No basis found for brep!

Open nachovoss opened this issue 10 months ago • 0 comments

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

nachovoss avatar Sep 05 '23 08:09 nachovoss