Three.JS 中的纹理是黑色的答案

【问题标题】：Textures are Black in Three.JSThree.JS 中的纹理是黑色的
【发布时间】：2016-03-30 05:59:38
【问题描述】：

我有一个模型，我要从 blender 2.76b 导出到 json，然后用 three.js 71 加载。Blender 模型看起来不错。在 webGL 中，模型是完全黑色的。我认为这与纹理有关，但我不确定。该模型是一个相当复杂的模型，由 Maya 制成并导出为 fbx。我用更简单的模型和不同的纹理进行了测试，没有遇到任何问题，但是这个有问题。

任何建议将不胜感激。

json 链接：http://we.tl/GnQiOfAhOD

这是代码。

<!DOCTYPE html>
<html lang="en">
<head>
        <title>MultiLoader</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
        <style>
            body {
                font-family: Monospace;
                background-color: #000;
                color: #000;
                margin: 0px;
                overflow: hidden;
            }

            #info {
                text-align: center;
                padding: 10px;
                z-index: 10;
                width: 100%;
                position: absolute;
            }

            a {
                text-decoration: underline;
                cursor: pointer;
            }

            #stats { position: absolute; top:0; left: 0 }
            #stats #fps { background: transparent !important }
            #stats #fps #fpsText { color: #aaa !important }
            #stats #fps #fpsGraph { display: none }
        </style>
    </head>

    <body>
        <div id="info">MultiLoader Testing</div>




  <script src="build/three.js"></script>
  <script src="js/OrbitControls.js"></script>
  <script src="js/Detector.js"></script>
  <script src="js/libs/stats.min.js"></script>
  <script src="js/ColladaLoader.js"></script>
  <script src="js/OBJLoader.js"></script>

  <script>
    WIDTH = window.innerWidth,
    HEIGHT = window.innerHeight;

    VIEW_ANGLE = 45,
    ASPECT = WIDTH / HEIGHT,
    NEAR = 1,
    FAR = 10000;

    var container, stats;
    var camera, scene, renderer;

    init();
    animate();

    function init() {

        container = document.createElement( 'div' );
        document.body.appendChild( container );

        // SCENE
        scene = new THREE.Scene();
        scene.fog = new THREE.Fog( 0xffffff, 500, 10000 );

        //  CAMERA
        camera = new THREE.PerspectiveCamera(VIEW_ANGLE, ASPECT, NEAR, FAR);
        camera.position.set(60, 40, 120);
        camera.lookAt(scene.position);
        scene.add(camera);


        //LIGHTS

        var front = new THREE.DirectionalLight( 0xffffff, 5.4 );
        front.position.set( 0, 140, 1500 );
        front.position.multiplyScalar( 1.1 );
        //front.color.setHSL( 0.6, 0.075, 1 );
        scene.add( front );

        var ambient = new THREE.AmbientLight(0xffffff);     
        scene.add( ambient );

        var back = new THREE.DirectionalLight( 0xffffff, 0.5 );
        back.position.set( 0, -140, -1500); 
        scene.add( back );


        //Avatar Tests



        var loader = new THREE.JSONLoader();
        loader.load('models/Maya/modelExport.json', function ( geometry, materials ) {
            material = new THREE.MeshFaceMaterial( materials );
            avatar = new THREE.Mesh( geometry, material );
            }
        );
        loader.onLoadComplete=function(){
            avatar.scale.set(30, 30, 30);
            var position = new THREE.Vector3(0,-20,0);
                avatar.position.add(position);
            scene.add( avatar );
        }         

        // RENDERER
        renderer = new THREE.WebGLRenderer( { antialias: true } );
        renderer.setPixelRatio( window.devicePixelRatio );
        renderer.setSize( window.innerWidth, window.innerHeight );
        renderer.setClearColor( scene.fog.color );
        renderer.gammaInput = true;
        renderer.gammaOutput = true;
        renderer.shadowMapEnabled = true;
        container.appendChild( renderer.domElement );

        // Orbit Controls

        controls = new THREE.OrbitControls( camera, renderer.domElement );
        //controls.addEventListener( 'change', render ); // add this only if there is no animation loop (requestAnimationFrame)
        controls.enableDamping = true;
        controls.dampingFactor = 0.25;
        controls.enableZoom = true;

        //
        stats = new Stats();
        container.appendChild( stats.domElement );
        //

        window.addEventListener( 'resize', onWindowResize, false );
    }

    function onWindowResize() {
        camera.aspect = window.innerWidth / window.innerHeight;
        camera.updateProjectionMatrix();
        renderer.setSize( window.innerWidth, window.innerHeight );
    }

    function animate() {
        requestAnimationFrame( animate );


        render();
        stats.update();
    }


    function render() {

        camera.lookAt( scene.position );
        renderer.render( scene, camera );

    }



  </script>
</body>
</html>

【问题讨论】：

您是否验证过您的照明是正确的（例如使用原始正方形）？

标签： javascript three.js

【解决方案1】：

代码和模型存在几个问题。

对于模型：条目mapLight 应该被命名为mapDiffuse。我知道您正在导出模型，因此您需要找到实现这一目标的方法。

代码：

您的环境光线非常强。它洗掉了一切。尝试0x222222 的值或将其完全从场景中移除。
您的camera 不需要添加到场景中。
删除renderer.setClearColor( fog_color ) 只是为了先看看您是否获得了正确的网格和材质。然后就可以去现场特效了。
你的纹理尺寸太大了。 webgl 不支持它。尝试 1024 的大小，然后根据需要向上移动。
最后你的loader.onLoadComplete() 永远不会被调用（也永远不会被调用）。在您的loader.load() 回调函数中移动这部分代码。

在这一切之后，你会看到你的女孩。

【讨论】：

mapdiffuse 做到了。我正在使用代码示例，我现在可以优化非常感谢！