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
Post a Comment