javascript - imported 3D objects are not casting shadows with three.js -
i'm wrapping brain around three.js , i've imported 3d model made in c4d via three.objmtlloader successfully, can't object cast shadow. i've used object.castshadow = true not working can geometry created in three.js cast shadow know scene setup ok.
the test scene here: http://kirkd.co.uk/dev/ , has been updated fix suggested below.
the code below, if kindly point out either i'm doing wrong or if imported objects can cast shadows i'd eternally grateful.
ta.
<script> var container; var controls; var camera, scene, renderer; var windowhalfx = window.innerwidth / 2; var windowhalfy = window.innerheight / 2; init(); animate(); function init() { container = document.createelement( 'div' ); document.body.appendchild( container ); camera = new three.perspectivecamera(45, window.innerwidth / window.innerheight, 0.1, 2000); camera.position.z = 500; camera.position.y = 500; scene = new three.scene(); controls = new three.orbitcontrols( camera ); controls.addeventlistener( 'change', render ); var ambientlight = new three.ambientlight(0x0c0c0c); scene.add(ambientlight); var spotlight = new three.spotlight( 0xffffff ); spotlight.position.set( 500, 1000, 500 ); spotlight.castshadow = true; spotlight.shadowmapwidth = 1024; spotlight.shadowmapheight = 1024; scene.add( spotlight ); var companion = new three.objmtlloader(); companion.load( 'companion2.obj', 'companion.mtl', function ( object ) { object.position.set(0,-20,0); object.scale.set( 0.8, 0.8, 0.8 ); object.castshadow = true; scene.add( object ); }); var floorgeometry = new three.cubegeometry(1000,4,1000); var floormaterial = new three.meshlambertmaterial({color: 0xff0000}); var floor = new three.mesh(floorgeometry, floormaterial); floor.position.x=0; floor.position.y=-130; floor.position.z=0; floor.receiveshadow = true; scene.add(floor); var geometry = new three.boxgeometry( 100, 100, 100 ); mesh = new three.mesh( geometry); scene.add( mesh ); mesh.position.set(-100,200,10); mesh.castshadow = true; renderer = new three.webglrenderer(); renderer.setclearcolor(0xeeeeee, 1.0); renderer.setsize(window.innerwidth, window.innerheight); container.appendchild( renderer.domelement ); renderer.shadowmapenabled = true; renderer.shadowmapsoft = true; spotlight.shadowcameravisible = true; var step=0; render(); }; function render() { camera.lookat(scene.position); renderer.render(scene, camera); } function animate() { requestanimationframe( animate ); render(); } </script>
your object has child meshes, each of needs have castshadow
set true
.
in loader callback, add this:
object.traverse( function( node ) { if ( node instanceof three.mesh ) { node.castshadow = true; } } );
three.js r.66
Comments
Post a Comment