javascript - Three.js、シャドウ レンダリングなし (.stl ファイル)

Question

私は three.js を使用しており、.stl ファイル用の優れたビューアーを作ろうとしています。しかし、私はシャドウに大きな問題を抱えています。一部のファイルでは問題ありませんが、他のファイルではひどいものです。(ほとんどの場合、動作しないのは Blender からの stl ファイルです)。

以下は、「通常の」ファイルを使用した 2 つの異なるレンダリングと、Blender を使用した同じファイルのインポート/エクスポートです。画像 : http://imageup.fr/uploads/1367501292.jpeg & http://imageup.fr/uploads/1367501311.jpeg

コードは次のとおりです。

<script src="scripts/three.min.js"></script>
<script src="three/js/loaders/STLLoader.js"></script>
<script src="three/js/Detector.js"></script>
<script src="three/js/controls/TrackballControls.js"></script>
<div id='3d' style='width:400px;height:300px;margin:auto;position:relative;border:5px solid white;border-radius:5px;'>
    <script>

        var modele = document.getElementById('modele3d').value; 


      if ( ! Detector.webgl ) Detector.addGetWebGLMessage();

      var container, stats;

      var camera, cameraTarget, scene, renderer;


      init();
      animate();

      function init() {

        container = document.getElementById('3d');
        camera = new THREE.PerspectiveCamera( 45, 400 / 300, 0.1, 10000 );
        camera.position.set( 200, 200, 200 );
        cameraTarget = new THREE.Vector3( 0, 0, 0 );
        scene = new THREE.Scene();
        scene.fog = new THREE.Fog( 0x1875cd, 0, 100000 );



        var material = new THREE.MeshPhongMaterial( { ambient: 0xaeadad, color: 0xfefcfc, specular: 0x111111, shininess: 200} );
        var loader = new THREE.STLLoader();
        loader.addEventListener( 'load', function ( event ) {

          var geometry = event.content;
          var mesh = new THREE.Mesh( geometry, material );

          mesh.position.set( 0, 0, 0 );
          mesh.rotation.set( - Math.PI / 2, 0, 0 );

          // Recherche et envoi des tailles //
          geometry.computeBoundingBox();
          var largeur = (mesh.geometry.boundingBox.max.x)-(mesh.geometry.boundingBox.min.x);
          var hauteur = (mesh.geometry.boundingBox.max.y)-(mesh.geometry.boundingBox.min.y);
          var profondeur = (mesh.geometry.boundingBox.max.z)-(mesh.geometry.boundingBox.min.z);
          var tailles = largeur + " " + hauteur + " " + profondeur;
          var prix  = document.getElementById('prototype_prix').value;
          if(prix==0){
          document.getElementById('prototype_taille1').value = Math.round(largeur);
          document.getElementById('prototype_taille2').value = Math.round(hauteur);
          document.getElementById('prototype_taille3').value = Math.round(profondeur);
          document.getElementById('prototype_taille1_base').value = largeur;  
          document.getElementById('prototype_taille2_base').value = hauteur;
          document.getElementById('prototype_taille3_base').value = profondeur; 
          }     

          geometry.computeBoundingSphere();
          var radius = mesh.geometry.boundingSphere.radius;
          mesh.position.set( 0, -radius/2, 0 );
          var d = 300/(2*radius);
          mesh.scale.set( d, d, d );

          mesh.castShadow = true;
          mesh.receiveShadow = true;
          scene.add( mesh );

        } );
        loader.load( 'images/'+modele);


        // Lights

        scene.add( new THREE.AmbientLight( 0x777777 ) );

        addShadowedLight( 1, 1, 1, 0xffffff, 0.8 );
        addShadowedLight( 0.5, 1, -1, 0xfcd891, 0.6 );



        // renderer

        renderer = new THREE.WebGLRenderer( { antialias: true, alpha: false } );
        renderer.setSize( 400, 300);
        renderer.setClearColor( scene.fog.color, 1 );
        renderer.gammaInput = true;
        renderer.gammaOutput = true;
        renderer.physicallyBasedShading = true;
        renderer.shadowMapEnabled = true;
        renderer.shadowMapCullFace = THREE.CullFaceBack;
        container.appendChild( renderer.domElement );
        window.addEventListener( 'resize', onWindowResize, false );

        // Trackball
                enhanced_control = new THREE.TrackballControls(camera,renderer.domElement);        
      }

      function addShadowedLight( x, y, z, color, intensity ) {

        var directionalLight = new THREE.DirectionalLight( color, intensity );
        directionalLight.position.set( x, y, z );
        scene.add( directionalLight );
        directionalLight.castShadow = true;
        directionalLight.shadowCameraVisible = true;
        directionalLight.shadowCameraNear = 0;
        directionalLight.shadowCameraFar = 20;
        directionalLight.shadowMapWidth = 1024;
        directionalLight.shadowMapHeight = 1024;
        directionalLight.shadowBias = -0.005;
        directionalLight.shadowDarkness = 0.15;

      }

      function onWindowResize() {
        camera.aspect = 400 / 300;
        renderer.setSize( 400, 300);
      }

      function animate() {
        requestAnimationFrame( animate );       
        enhanced_control.update();
        render();
      }

      function render() {
        var timer = Date.now() * 0.0005;          
        camera.lookAt( cameraTarget );
        renderer.render( scene, camera );
      }




    </script>
    <p style='position:relative;margin-top:-310px;margin-left:3px;float:left;color:white;text-shadow:1px 1px 1px #135da4'>Rendu 3D :</p>
    </div>

私はあなたが私を助けてくれることを願っています.私はすでにレンダリングを機能させるために多くの時間を費やしてきました:s