How to achieve an effect like what you see in Blender or 3D viewer

Questions
1

my code and the effect, It looks like it has no edges and is blurry. I try to change the material to MeshStandardMaterial、 MeshPhongMaterial of the interior of the cabinet what i want it react to light source , and move direction light, but did not get the expect result. :

const gltfLoader = new GLTFLoader()
        // gltfLoader.load('/models/Fox/glTF-Binary/Fox.glb', (gltf) => {
        gltfLoader.load(
            '/models/warehouse//beverages_refrigerator/scene.gltf',
            // '/models/warehouse//beverages_refrigerator/untitled.glb',
            (gltf) => {
                console.log('loadCabinetS1Model gltf', gltf)
                // gltfLoader.load('/models/test1.glb', (gltf) => {
                gltf.scene.rotateY(-Math.PI / 2)

                gltf.scene.traverse((child) => {
                    console.log('child', child.name)
                    // if (child.name === 'Object_9') {
                    //     // set double side
                    //     child.material = new THREE.MeshStandardMaterial()
                    //     child.material.side = THREE.DoubleSide
                    //     child.material.color = new THREE.Color(0xffaa66)
                    //     child.material.emissive = new THREE.Color(0x050000)
                    //     // set metallic to 0.3
                    //     child.material.metalness = 0.5
                    //     child.material.roughness = 0.5
                    // }
                    // if (child instanceof THREE.Mesh) {
                    //     child.material = new THREE.MeshPhongMaterial()
                    //     child.material.color = new THREE.Color(0xffcc66)
                    //     child.material.transparent = true
                    //     child.material.opacity = 0.6
                    // }
                })
                gltf.scene.scale.set(2, 2, 2)
                gltf.scene.position.set(2, 0, 0)
                scene.add(gltf.scene)
                updateAllMaterials()
            }
        )

image

3D viewer:

image
image462×661 49.5 KB

Blender:

image
image1920×1048 185 KB

2

The screenshot you’ve shared suggests you (1) are using MeshBasicMaterial, or (2) you’re using AmbientLight.

Make sure you’re using MeshPhongMaterial, MeshLambertMaterial, MeshStandardMaterial, or MeshPhysicalMaterial - and do not use AmbientLight. Use PointLight, DirectionalLight, or an HDRI environment to light up the scene - otherwise you’ll get no shading.

1 Like