2

我正在使用three.js，并且正在尝试为.stl 文件制作一个好的查看器。但是我对阴影有一个很大的问题，对于某些文件来说还可以，而对于另一些文件来说，这太可怕了。（大多数时候，来自 Blender 的 stl 文件不起作用）。

这是使用“普通”文件和使用 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

4

0 回答 0