【问题标题】:Three JS - GLTF model is dark三 JS - GLTF 模型暗
【发布时间】:2018-10-15 14:57:22
【问题描述】:

我已经成功地使用 GLTFLoader 将我的模型加载到 ThreeJS 中,但是我的模型是黑暗的。我尝试将它上传到glTF ViewerBabylonJS,它在那里完美运行。这是我的javascript代码:

const scene = new THREE.Scene()
const camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 )
const controls = new THREE.OrbitControls( camera )
const light = new THREE.AmbientLight( 0x404040 ); // soft white light


const renderer = new THREE.WebGLRenderer()
renderer.setSize( window.innerWidth, window.innerHeight )
renderer.setClearColor( 0xffffff )
document.body.appendChild( renderer.domElement )

// Instantiate a loader
const loader = new THREE.GLTFLoader();

// Load a glTF resource
loader.load(
    // resource URL
    'untitled2.gltf',
    // called when the resource is loaded
    function ( gltf ) {

        scene.add( gltf.scene )

        gltf.animations // Array<THREE.AnimationClip>
        gltf.scene // THREE.Scene
        gltf.scenes // Array<THREE.Scene>
        gltf.cameras // Array<THREE.Camera>
        gltf.asset // Object

    }
    // loading and error function
)

camera.position.y = 1
camera.position.z = 2

// Vertical
controls.minPolarAngle = 1; // radians
controls.maxPolarAngle = 1; // radians

//Horizontal
controls.minAzimuthAngle = - Infinity; // radians
controls.maxAzimuthAngle = Infinity; // radians

scene.add( light );

const animate = function () {
    requestAnimationFrame( animate )
    renderer.render( scene, camera )
}

animate()

我尝试添加环境照明,因为根据文档,它应该充当全局照明并更改背景颜色。

当我将模型上传到 babylonJS 时:

当我将模型上传到 glTF 查看器时:

这是当我将它加载到 ThreeJS 时(它是黑暗的):

【问题讨论】:

    标签: three.js babylonjs


    【解决方案1】:

    终于解决了!解决方案是我需要增加环境光的强度。

    【讨论】:

    • 我也强烈建议设置renderer.gammaOutput = true,这将更好地匹配您展示的其他观众。
    猜你喜欢
    • 2020-06-10
    • 1970-01-01
    • 2019-10-11
    • 1970-01-01
    • 2022-01-19
    • 2018-10-24
    • 2016-06-08
    • 2020-06-27
    • 1970-01-01
    相关资源
    最近更新 更多