javascript - Three.js .obj shadows not working -
i trying learn thee.js. , pretty straight forward. reason unable shadows working. i've set castshadows, recieveshadows, shadowmapenabled true on places found set them not show shadows (anywhere).
what want imported model casts shadows on can make out model is.
this current code:
var container; var camera, scene, renderer; var mousex = 0, mousey = 0; init(); animate(); function init(){ container = document.createelement( "div" ); document.body.appendchild( container ); camera = new three.perspectivecamera( 45, window.innerwidth / window.innerheight, 1, 2000 ); camera.position.z = 100; controls = new three.trackballcontrols( camera ); controls.rotatespeed = 5.0; controls.zoomspeed = 5; controls.panspeed = 0; controls.nozoom = false; controls.nopan = true; controls.staticmoving = true; controls.dynamicdampingfactor = 0.3; scene = new three.scene(); var ambient = new three.ambientlight( 0xffffff ); scene.add( ambient ); /*var spotlight = new three.spotlight( 0xffffff,1.5, 40 ); spotlight.position.set( -400, 1200, 300 ); spotlight.castshadow = true; spotlight.shadowdarkness = 0.5; spotlight.shadowcameravisible = true; spotlight.target.position = new three.object3d( 10, 10, 10 ); scene.add( spotlight );*/ var light = new three.directionallight(0xffffff, 2); light.position.x = -100; light.position.y = 150; light.shadowcameravisible = true; light.castshadow = true; light.shadowcameranear = 100; light.shadowcamerafar = 300; light.shadowcamerafov = 20; light.shadowbias = -0.00022; light.shadowdarkness = 0.5; scene.add(light); var groundgeo = new three.planegeometry(400,400); var groundmat = new three.meshbasicmaterial( { color: 0x00ff00 } ); var ground = new three.mesh(groundgeo,groundmat); ground.position.y = -20; ground.rotation.x = -math.pi/2; ground.doublesided = true; ground.reciveshadow = true; scene.add(ground); var manager = new three.loadingmanager(); manager.onprogress = function( item, loaded, total ){ console.log( item, loaded, total ); }; var loader = new three.objloader( manager ); //var texture = new three.texture(); var texture = three.imageutils.loadtexture( "textures/red.jpg" ); texture.repeat.set( 0.7, 1 ); texture.wraps = texture.wrapt = three.repeatwrapping; var material = new three.meshphongmaterial({ ambient : 0x444444, color : 0x8844aa, shininess : 300, specular : 0x33aa33, shading : three.smoothshading, map : texture }); loader.load("models/shooza.obj",function(e){ var object = e; object.traverse( function(child){ if(child instanceof three.mesh){ child.material.color.setrgb(0.5,0,0); child.castshadow = true; child.reciveshadow = false; //child.material.map = texture; } }); //object.scale = new three.vector3(-100,-100,-100); object.scale.set(0.2,0.2,0.2); object.position.y -= 2.5; object.castshadow = true; object.reciveshadow = true; scene.add(object); }); renderer = new three.webglrenderer(); renderer.setsize(window.innerwidth,window.innerheight); renderer.shadowmapenabled = true; renderer.shadowmaptype = three.pcfsoftshadowmap; renderer.shadowmapsoft = true; container.appendchild( renderer.domelement ); } function animate(){ requestanimationframe( animate ); controls.update(); camera.lookat(scene.position); renderer.render(scene, camera); }
and current result: http://gyazo.com/931f9103e01a5985508897fb1a5d0b88
i don't know if realy need shadows. use meshbasicmaterial. meshbasicmaterial doesn't calculate lighting.
try use meshlambertmaterial or meshphongmaterial instead. lighting based on normals of mesh. , if activate castshadows , receiveshadows shadwomap.
http://threejs.org/docs/#reference/materials/meshlambertmaterial
http://threejs.org/docs/#reference/materials/meshphongmaterial
Comments
Post a Comment