Результат неожиданного рендеринга Three.js?

создал следующую сетку в блендере: Результат неожиданного рендеринга Three.js?

Всякий раз, когда я загрузить его в three.js я получаю следующий результат:

Я экспортировать в .obj формат и триангуляции все мои лица. Не знаю, почему это происходит. Ниже приведен трёхмерный код, который я использую для рендеринга сетки. Я использую тот же код с другими сетками, и они отображают как ожидалось. Я догадываюсь, что я сделал что-то, что не нравится трио.js с этой сеткой?

<!DOCTYPE html> 

<html> 

<head> 
    <title></title> 
    <script type="text/javascript" src="/js/three.js"></script> 
    <script type="text/javascript" src="/js/DDSLoader.js"></script> 
    <script type="text/javascript" src="/js/MTLLoader.js"></script> 
    <script type="text/javascript" src="/js/OBJLoader.js"></script> 
    <script type="text/javascript" src="/js/OrbitControls.js"></script> 



    <script type="text/javascript" src="/js/stats.js"></script> 
    <script type="text/javascript" src="/js/dat.gui.js"></script> 
    <style> 
     body { 
      /* set margin to 0 and overflow to hidden, to go fullscreen */ 
      margin: 0; 
      overflow: hidden; 
     } 
    </style> 
</head> 
<body> 

<div id="Stats-output"> 
</div> 
<!-- Div which will hold the Output --> 
<div id="WebGL-output"> 
</div> 

<!-- Javascript code that runs our Three.js examples --> 
<script type="text/javascript"> 

    function init() { 
     var stats = initStats(); 

     var scene = new THREE.Scene(); 

     var camera = new THREE.PerspectiveCamera(45, window.innerWidth/window.innerHeight, 0.1, 1000); 
     camera.position.x = 130; 
     camera.position.y = 40; 
     camera.position.z = 50; 
     camera.lookAt(scene.position); 
     scene.add(camera); 


     // create a render and set the size 
     var webGLRenderer = new THREE.WebGLRenderer(); 
     //webGLRenderer.setPixelRatio(window.devicePixelRatio); 
     webGLRenderer.setClearColor(new THREE.Color(0xffffff, 1.0)); 
     webGLRenderer.setSize(window.innerWidth, window.innerHeight); 
     webGLRenderer.shadowMapEnabled = true; 


     var ambient = new THREE.AmbientLight(0x444444); 
     ambient.intensity = 5; 
     scene.add(ambient); 


     if('stiletto_switchblade_knife.mtl' !== ''){ 

      THREE.Loader.Handlers.add(/\.dds$/i, new THREE.DDSLoader()); 

      var mtlLoader = new THREE.MTLLoader(); 
      mtlLoader.setBaseUrl('/assets/download/mesh/18/'); 
      mtlLoader.setPath('/assets/download/mesh/18/'); 
      mtlLoader.load('stiletto_switchblade_knife.mtl', function(materials) { 
       materials.preload(); 

       var objLoader = new THREE.OBJLoader(); 
       objLoader.setMaterials(materials); 
       objLoader.setPath('/assets/download/mesh/18/'); 
       objLoader.load('stiletto_switchblade_knife.obj', function (object) { 
        //object.scale.set(100, 100, 100); 
        //object.rotation.x = -0.3; 
        scene.add(object); 
       }); 

      }); 

     } else { 

      var objLoader = new THREE.OBJLoader(); 
      objLoader.setPath('/assets/download/mesh/18/'); 
      objLoader.load('stiletto_switchblade_knife.obj', function (object) { 
       object.material = new THREE.MeshLambertMaterial({color: 0xFFFFFF}); 
       //object.scale.set(100, 100, 100); 
       //object.rotation.x = -0.3; 
       scene.add(object); 
      }); 

     } 


     // add the output of the renderer to the html element 
     document.getElementById("WebGL-output").appendChild(webGLRenderer.domElement); 


     var controls = new THREE.OrbitControls(camera, webGLRenderer.domElement); 
     render(); 


     // simple render 
     function render() { 
      stats.update(); 
      controls.update(); 
      requestAnimationFrame(render); 
      webGLRenderer.render(scene, camera); 
     } 

     function initStats() { 

      var stats = new Stats(); 
      stats.setMode(0); // 0: fps, 1: ms 

      // Align top-left 
      stats.domElement.style.position = 'absolute'; 
      stats.domElement.style.left = '0px'; 
      stats.domElement.style.top = '0px'; 

      document.getElementById("Stats-output").appendChild(stats.domElement); 

      return stats; 
     } 
    } 
    window.onload = init; 
</script> 
</body> 
</html>

EDIT ли сетки, необходимые для быть водонепроницаемыми в three.js? Если это так, это может быть проблемой, так как есть пара областей, которые не находятся в этой сетке. Это единственное, о чем я могу думать в данный момент, который отличается от этого и к сеткам, которые отображают должным образом.

источник

2016-05-08 commanderZiltoid

Решено. Оказалось, что я оставил несколько лиц, нарисованных внутри сетки. Это вызвало неожиданное поведение. Интересный метод отладки. Я просто начал удалять вершины и рендеринг с помощью трехjs, пока не нашел раздел, который вызывал проблему.

источник

2016-05-09 00:30:30 commanderZiltoid

Оказалось, что это оказалось с помощью моделей OBJ в three.js R76. Оказалось, что любой объект, содержащий блуждающий элемент «l» (строка), взорвался так же, как вы показали. Я обнаружил плохие объекты, выполнив поиск в файле ASCII OBJ на «l», избавился от страйков, выбирая и скрывая все лица и занимаясь тем, что осталось.

источник

2016-05-16 13:56:36 YoGorgar

Результат неожиданного рендеринга Three.js?

ответ

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