javascript - Three.js, no shadow rendered (.stl files) -


i'm using three.js , i'm trying make viewer .stl files. have big problem shadow, files it's ok , other it's horrible. (most of time, it's stl file come blender don't work).

here 2 different render "normal" file , same file import/export blender. images : http://imageup.fr/uploads/1367501292.jpeg & http://imageup.fr/uploads/1367501311.jpeg

here code:

<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> 

i hope can me, have passed lot of time trying make render works :s


Comments

Popular posts from this blog

Change php variable from jquery value using ajax (same page) -

Pull out data related to my apps from Android Play Store and iOS App Store -

How can I fetch data from a web server in an android application? -