Models are displayed incorrectly in some views

Questions
,
1

I have a human skeleton model in fbx format, and when rendering it with 90% transparency, I use trackballControls to rotate it. When the model is rotated to certain orientations, it is displayed incorrectly.

The light:

                threeInitData.light = new THREE.DirectionalLight(0xffffff, 0.8)
                threeInitData.light.position.set(0, 0, 30)
                threeInitData.scene.add(threeInitData.light)

The camera:

                threeInitData.camera = new THREE.OrthographicCamera(
                    this.deviceWidth / -2,
                    this.deviceWidth / 2,
                    this.deviceHeight / 2,
                    this.deviceHeight / -2,
                    0.1,
                    5000,
                )
                threeInitData.camera.position.z = 3
                threeInitData.camera.position.set(0, 0, 400)

The material:

const material = new THREE.MeshStandardMaterial({
                        color: '#fafad2',
                        roughness: 0,
                        metalness: 0.1,
                        side: THREE.DoubleSide,
                        opacity: 0.9,
                        transparent: true,
                        depthWrite: false,
                    })

At the beginning, everything was fine:

1
11058×772 281 KB

And when I rotate the model slightly with the controller:

2
21013×828 326 KB

I’ve tried everything and can’t solve the problem.

2

Could you share what you’ve tried?

If this is all one big mesh, then rendering it with transparency is not going to work well. You’ll probably see the same thing opening it in Blender and using “Alpha Blend” transparency. If bones are split into separate meshes it may be more feasible. Realtime renderers generally need to sort objects to draw transparent surfaces back-to-front, and that’s not possible with a single self-occluding mesh – we can’t easily sort individual triangles.

Something like GitHub - stevinz/three-wboit: Weighted, blended order independent transparency pass for use with three.js. might solve the issue more generally, but it isn’t something I’ve worked with before.

3

I have tried to use a variety of different materials, change depthWrite, change depthFunc, change the camera and light, change the material’s side properties, etc.

4

Try camera.far or renderer option logarithmicDepthBuffer:true
or material.siside:THREE.DoubleSide

6

I tried but didnt work sir.