个人中心
gpt4 book ai didi

javascript - Three.JS 中的纹理为黑色

转载 作者：行者123 更新时间：2023-12-03 08:04:35 26 4
gpt4 key购买 nike

我有一个模型，我正在从 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>

最佳答案

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

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

对于代码:

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

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

关于javascript - Three.JS 中的纹理为黑色，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34441798/

26 4 0
文章推荐： javascript - WebSocket onopen - 有时仅发送消息
文章推荐： javascript - 如何使用 ng-repeat 同时获取两个连续的数组对象
文章推荐： javascript - 无法通过设置 video.currentTime = {value} 来设置 video.currentTime
文章推荐： javascript - 适当使用Javascript的bind()
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com