Search code examples
htmlthree.jsgltf

The .gltf model is darker than the original obj model

The model loaded is darker than the model I uploaded to the gltf-viewer, and its color is a little different. And it is also darker than the original obj. The light environment is similar, so I do not know why it is darker. It can be assumed that the gltf model is correct, since the result in gltf-viewer is fine.

Here is my code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script type="text/javascript" src="js/jquery.js" ></script>
    <script type="text/javascript" src="js/three.js" ></script>
    <script type="text/javascript" src="js/TrackballControls.js"></script>
    <script type="text/javascript" src="js/OBJLoader.js"></script>
    <script type="text/javascript" src="js/MTLLoader.js"></script>
    <script type="text/javascript" src="js/GLTFLoader.js"></script>
    <!--<script type="text/javascript" src="js/VRMLLoader.js"></script>-->
    <script type="text/javascript" src="js/STLLoader.js"></script>
    <title></title>
</head>
<style>
    body{
        margin: 0;
        overflow: hidden;
        /*touch-action: none;*/
    }
    #percent {
        position: absolute;
        width: 200px;
        height: 20px;
        color: red;
        text-align: center;
        border: 1px;
    }
</style>
<body>
<div id="percent"></div>
<div id="WebGL-output">

</div>
<script type="module">
    import { DRACOLoader } from './js/DRACOLoader.js';
    $(function(){
        var scene = new THREE.Scene();//场景构建
        var camera = new 
        THREE.PerspectiveCamera(45,window.innerWidth/window.innerHeight,0.1,1000);//相机构建
        var renderer = new THREE.WebGLRenderer();//渲染器构建
        renderer.setClearColor(0xEEEEEE);
        renderer.setSize(window.innerWidth,window.innerHeight);
        renderer.shadowMap.enable;
        renderer.outputEncoding = THREE.sRGBEncoding;
        var axes = new THREE.AxesHelper(20);
        scene.add(axes);
        var planeGeometry = new THREE.PlaneGeometry(40,20);
        var planeMaterial = new THREE.MeshLambertMaterial({color:0xffffff});
        var plane = new THREE.Mesh(planeGeometry,planeMaterial);
        plane.rotation.x = -0.5*Math.PI;
        plane.position.x = 15;
        plane.position.y = 0;
        plane.position.x = 0;
        scene.add(plane);
        plane.receiveShadow  = true;
        //添加灯光
        //var spotLight = new THREE.SpotLight(0xffffff);
        // var Light = new THREE.AmbientLight(0xD2FFFF);
        var Light = new THREE.AmbientLight(0xFFFFFF);
        Light.position.set(10,20,10);
        Light.intensity = 1;
        Light.castShadow = true;
        scene.add(Light);
        //渲染视图视角
        camera.position.x = -30;
        camera.position.y = 20;
        camera.position.z = 30;
        camera.lookAt(scene.position);
        $("#WebGL-output").append(renderer.domElement);

        var trackballControls;
        initTrackballControls();
        function initTrackballControls() {
            trackballControls = new THREE.TrackballControls(camera);
            trackballControls.rotateSpeed = 1.0;
            trackballControls.zoomSpeed = 1.0;
            trackballControls.panSpeed = 1.0;
            trackballControls.noZoom = false;
            trackballControls.noPan = false;
            trackballControls.staticMoving = true;
            trackballControls.dynamicDampingFactor = 0.3;
        }

        renderScene();
        function renderScene() {
            var clock = new THREE.Clock();
            var delta = clock.getDelta();
            trackballControls.update(delta);

            requestAnimationFrame(renderScene);
            renderer.render(scene, camera);
        }

        var onProgress = function(xhr) {
            if (xhr.lengthComputable) {
                var percentComplete = xhr.loaded / xhr.total * 100;
                var percent = document.getElementById("percent");
                percent.innerText = Math.round(percentComplete, 2) + '% 已经加载';
            }
        };
        var onError = function(xhr) {};

         var manager = new THREE.LoadingManager();     

        function loadGltf() {
            var a = new Date().getTime() / 1000;
            var gltfloader = new THREE.GLTFLoader(manager);
            gltfloader.setCrossOrigin('anonymous');
            var dracoLoader = new DRACOLoader();
            dracoLoader.setDecoderPath('./js/draco/');
            gltfloader.setDRACOLoader(dracoLoader);

            gltfloader.load('./lv1/lv1.gltf', function(gltf) {
                var object = gltf.scene;
                object.position.y = 10;
                object.rotation.set(Math.PI/2, Math.PI/2, 0);
                object.scale.set(8, 8, 8);
                scene.add(object);
                // self.postMessage(JSON.stringify(scene.toJSON()))
                console.log((new Date().getTime() / 1000) - a + " s")
            }, onProgress);
        }
        loadGltf();

    })
</script>

</body>
</html>
Solution

  • GLTFLoader correctly sets the encoding for textures which is not done by OBJ/MTLLoader. Hence, you see a different result when comparing the same models with both loaders in the same scene. Hence, I suggest you optimize the lighting for your glTF asset since this workflows allows you to use a proper color management workflow.

    three.js R112