Three.JS中的纹理为黑色

Textures are Black in Three.JS

本文关键字：黑色纹理 JS Three 更新时间：2023-09-26

我有一个模型，我正在从blender 2.76b导出到json中，然后用three.js 71加载。搅拌机模型看起来不错。在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>

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

对于模型：条目mapLight应命名为mapDiffuse。我知道你正在导出模型，所以你需要找到如何实现这一点。

对于代码：

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

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