Threejs编辑器中的对象更亮

sha*_*een 4 javascript three.js

所以我在编辑器中导入了一个 FBX 对象,它看起来如下:

在此处输入图片说明

完美,这正是我所期待的!

但是当我制作场景并导入相同的对象时,它看起来像这样:

在此处输入图片说明

Waymore 更暗,但为什么呢!

即使我使用与两者强度相同的直射光!

这些是我的编辑器对象:

在此处输入图片说明

这是我额外的简单代码:

var scene = new THREE.Scene();
scene.background = new THREE.Color( 0x9A9A9A );
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );

var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );

camera.position.z = 5;


var controls = new THREE.OrbitControls( camera, renderer.domElement );

//controls.update() must be called after any manual changes to the camera's transform
camera.position.set( 0, 20, 100 );
controls.update();

var directionalLight = new THREE.DirectionalLight( 0xffffff, 1 );
scene.add( directionalLight );
directionalLight.position.set(5,10,8);
var helper = new THREE.DirectionalLightHelper( directionalLight, 5 );
scene.add( helper );

var loader = new THREE.FBXLoader();

loader.load( '/assets/village/village_update.fbx', function ( object ) {
    object.traverse( function ( child ) {
        console.info( 'loaded' );
        if (child.isMesh) {
            child.receiveShadow = true;
            child.material.color.set( 0xffffff );
        }
    } );
    object.name = "village";
    console.log( 'adding it to scene' );
    scene.add( object );
});

var animate = function () {

    requestAnimationFrame( animate );
    renderer.render( scene, camera );
};
Run Code Online (Sandbox Code Playgroud)

我在这里错过了什么?

编辑:

对于任何想要检查对象的人,您可以从这里下载: 对象 纹理

Don*_*rdy 8

如果两个场景中的灯光相同,则看起来像是伽玛不正确的问题。尝试设置renderer.outputEncoding = THREE.sRGBEncoding;,假设是 Three.js 的最新版本。在旧版本中,这将是renderer.gammaOutput = true;.

有关更多详细信息,请参阅three.js 中的颜色管理

三.js r.112

  • 好的,我有一个想要在平面上实现的地面纹理,这是否意味着每当我在材质上实现纹理时,我总是需要添加`material.map.encoding = THREE.sRGBEncoding;`? (2认同)