Backface culling inside of GLTF sphere?

Questions
1

When my camera moves inside my gltf object, I can see the interior and texture. Is there a way to avoid this?

The :red_circle: is my scenes clear color. The :green_circle: is the outside faces of my object. :large_blue_circle: is the visible inside of my object.

threediscourse
threediscourse1913×922 127 KB

Is there something I can do inside of either blender or three.js to make this work?

I tried:

mesh.singleSided = true;

and

mesh.doubleSided = false;

but i can still see the inside of my sphere.

The whole object looks like this:

function addMesh (){
    meshGroup = new THREE.Object3D();
    var texture = new THREE.Texture();
    var manager = new THREE.LoadingManager();
    manager.onProgress = function ( item, loaded, total ) {};
    var onProgress = function ( xhr ) {};
    var onError = function ( xhr ) {};

    
    var loader = new THREE.GLTFLoader();

    // Load a glTF resource
    loader.load(
        // resource URL
        'assets/tatp3.gltf',
        // called when the resource is loaded
        function ( gltf ) {

                mesh = gltf.scene;
                mesh.scale.set( 8, 8, 8 );
                mesh.singleSided = true;
                meshGroup.add(mesh);
                meshGroup.add(meshGroup2);
                meshGroup.position.x = 0
                meshGroup.position.y = 0
                meshGroup.position.z = 0
                scene.add( meshGroup );
                
                //scene.add( gltf.scene );

                //gltf.animations; // Array<THREE.AnimationClip>
                //gltf.scene; // THREE.Scene
                //gltf.scenes; // Array<THREE.Scene>
                //gltf.cameras; // Array<THREE.Camera>
                //gltf.asset; // Object

        },
        // called when loading is in progresses
        function ( xhr ) {

                console.log( ( xhr.loaded / xhr.total * 100 ) + '% loaded' );

        },
        // called when loading has errors
        function ( error ) {

                console.log( 'An error happened' );

        }
    );
}
2

Both are no valid three.js syntax. You have to configure the material instead. Try it with material.side = THREE.FrontSide;.

2 Likes
3

Ah thank you I will try it now. I think this is another instance where I would use traverse inside a gltf loader?

I took the incorrect answer from here - whoops.

4

Actually yes, it was you who shared the traverse code with me last time.

The working code is:

function addMesh (){
    meshGroup = new THREE.Object3D();
    var texture = new THREE.Texture();
    var manager = new THREE.LoadingManager();
    manager.onProgress = function ( item, loaded, total ) {};
    var onProgress = function ( xhr ) {};
    var onError = function ( xhr ) {};

    
    var loader = new THREE.GLTFLoader();

    // Load a glTF resource
    loader.load(
        // resource URL
        'assets/tatp3.gltf',
        // called when the resource is loaded
        function ( gltf ) {

                mesh = gltf.scene;
            
                gltf.scene.traverse( function ( child ) {

    if ( child.isMesh ) { 

        child.material.side = THREE.FrontSide;

     }

}  );
            
                mesh.scale.set( 8, 8, 8 );
                meshGroup.add(mesh);
                meshGroup.add(meshGroup2);
                meshGroup.position.x = 0
                meshGroup.position.y = 0
                meshGroup.position.z = 0
                scene.add( meshGroup );
                
                //scene.add( gltf.scene );

                //gltf.animations; // Array<THREE.AnimationClip>
                //gltf.scene; // THREE.Scene
                //gltf.scenes; // Array<THREE.Scene>
                //gltf.cameras; // Array<THREE.Camera>
                //gltf.asset; // Object

        },
        // called when loading is in progresses
        function ( xhr ) {

                console.log( ( xhr.loaded / xhr.total * 100 ) + '% loaded' );

        },
        // called when loading has errors
        function ( error ) {

                console.log( 'An error happened' );

        }
1 Like