Текстуры черные в Three.JS

У меня есть модель, я экспортирую из блендера 2.76b в json, а затем загружаю с помощью three.js 71. Blender модель выглядит нормально. В webGL модель полностью черная. Я думаю, что это имеет какое-то отношение к текстурам, но я не уверен. Модель представляет собой довольно сложную модель, изготовленную из майи, и экспортируется как fbx. Я тестировал более простые модели и различные текстуры, и у меня не было никаких проблем, но с этим что-то не так.Текстуры черные в Three.JS

Любые предложения были бы оценены очень.

Ссылка на 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>

источник

2015-12-23 jleefe92

Вы подтвердили правильность вашего освещения (например, используя примитивный квадрат)? –

С кодом и моделью возникает несколько проблем.

Для модели: запись mapLight должно было называться mapDiffuse. Я знаю, что вы экспортируете модель, поэтому вам нужно найти, как это сделать.

Для кода:

Ваш окружающий свет является очень сильным. Он вымывает все. Попробуйте значение 0x222222 или полностью удалите его из сцены.
Ваш camera не нужно добавлять к сцене.
Удалить renderer.setClearColor(fog_color), чтобы убедиться, что вы сначала получите правильные сетки и материалы. Затем вы можете использовать эффекты сцены.
Размер вашей текстуры большой. Он не поддерживается в webgl. Попробуйте размер 1024, а затем двигайтесь вверх, вам нужно.
Наконец-то ваш loader.onLoadComplete() никогда не называется (и никогда не будет). Переместите эту часть кода в свою функцию обратного вызова loader.load().

После всего этого вы увидите свою девушку.

источник

2015-12-24 00:56:56 gaitat

mapdiffuse прибил его. Я использовал пример для кода, я могу сейчас оптимизировать большое спасибо! – jleefe92

Текстуры черные в Three.JS

ответ

Смежные вопросы