1
\$\begingroup\$

When I rotate the camera some of my blender models become transparent from different angles. They are gltf modelsenter image description here

enter image description here

enter image description here enter image description here

Here is the Python to save the gltfs

def export_selected_objects():
basedir = "C:\\Users\\Zack\\PycharmProjects\\CourseWork\\static\\assets\\gltf"

if not basedir:
    raise Exception("Blend file is not saved")

view_layer = bpy.context.view_layer

obj_active = view_layer.objects.active
selection = bpy.context.selected_objects

bpy.ops.object.select_all(action='DESELECT')

for obj in selection:
    obj.select_set(True)

    # some exporters only use the active object
    view_layer.objects.active = obj

    name = bpy.path.clean_name(obj.name)
    fn = os.path.join(basedir, name)

    bpy.ops.export_scene.gltf(filepath=fn, use_selection=True)

    # Can be used for multiple formats
    # bpy.ops.export_scene.x3d(filepath=fn + ".x3d", use_selection=True)

    obj.select_set(False)

    print("written:", fn)

view_layer.objects.active = obj_active

for obj in selection:
    obj.select_set(True)

Here is the JS to load the gltf

const loader = new THREE.GLTFLoader();
    loader.load( baseFilePath + baseID + ".glb", function (gltf) {
            gltf.scene.position.set(x - offset[0], 2, z - offset[2]);
            scene.add(gltf.scene);
        },
        (error) => {
            console.log(error);
        }
    )

The gltf files I am using: https://drive.google.com/drive/folders/1iEfGVyZ9nklFlTusTMoh5cjdhdUpRI2w?usp=sharing

To recreate:

  1. Create a plane in blender and select it
  2. Use the first Python function to export it as glb (change the basedir)
  3. Use the second JS function to import it to a THREEJS scene

The plane should be visible from one side but not from the other

\$\endgroup\$
4
  • 2
    \$\begingroup\$ "Visible from one side but not the other" is the default behaviour in most 3D renderers - rendering double-sided has approximately double the cost. Is the plane visible on the "wrong" side, and you want to know how to flip it? Or do you want guidance in how to configure your Three.js renderer to draw the mesh double-sided? \$\endgroup\$
    – DMGregory
    Commented Oct 23, 2022 at 16:07
  • \$\begingroup\$ Ah interesting. If possible I'd like to render both sides of each face in the mesh. \$\endgroup\$ Commented Oct 23, 2022 at 17:37
  • \$\begingroup\$ Did you check out existing guides/Q&A about double-sided rendering in Three.js? \$\endgroup\$
    – DMGregory
    Commented Oct 23, 2022 at 18:00
  • 1
    \$\begingroup\$ Usually you set the normals of the mesh so it is visible form the side you want it to be visible. However, yes, you can also configure that. As per how to do it on three.js... A search lead me to this: Is there a backface-visibility equivalent for three.js? (I searched for "three-js cull face"). I cannot tell you how to use that, if anything, know that this is called "face culling" ("back-face culling" or "front-face culling" depending the case). Those terms might help you find more answers. \$\endgroup\$
    – Theraot
    Commented Oct 23, 2022 at 21:37

1 Answer 1

1
\$\begingroup\$

Check the mesh normals and set double-sided rendering to true

  1. Mesh normals: You'd usually check them in a 3d editing program. In Blender: At the top-right of the viewport window, click on the little arrow beside the Overlays icon, and activate the tickbox beside Face Orientation. Then switch to Edit Mode, and you'l see all faces colored depending on their orientation - blue colored faces show outwards, which is the standard, and red colored faces show inwards. If double-sided rendering is off, then these won't be drawn when looking at them from the outwards direction. To change a face's orientation, select it, go to Mesh>Normals>Flip(Alt+N,F)

  2. Double-sided rendering: In order to save resources, faces are usually only drawn when looking at them from the outwards direction of a mesh. If you want to enable the user to look inside of a model and get the mesh shown from the inside, you have to activate double-sided rendering (also known as backface culling). This is a material setting and can be done like so:

var material = new THREE.MeshBasicMaterial({ 
  color: 0xff0000,
  side: THREE.DoubleSide
});

This code sets the side property of the material to THREE.DoubleSide, which makes it render both sides of the mesh.

EDIT: Since these meshes seem to be non-manifold anyway (for an explanation of non-manifold meshes see here: https://sinestesia.co/blog/tutorials/non-manifold-meshes-and-how-to-fix-them/), you can omit step one and simply set THREE.DoubleSide

Another EDIT: I just realized that Op was asking about Blender anyway, and not about Three.js, which I somehow falsely assumed. Just leaving part 2 here in case anyone has this problem when coding Three.js apps.

Last EDIT: Backface culling can be found in the Render Properties>Workbench Render Engine>Options in Blender.

\$\endgroup\$
0

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .