Shadows dont work with three.js -
actually i'm new on webgl , specially three.js , i'm trying larn while studying examples http://stemkoski.github.com/three.js/.
now problem: build little 3d scene. cube, sphere, floor , pointlight. want pointlight create shadows. set command "castshadow = true;" cube, pointlight , sphere , "receiveshadow = true;" floor. no shadow there.
hope help me.
other question, main goal build house windows , animated lite sun. means every mesh must cast shadows , receive shadows. possible?
my code:
<html> <head> <style> #container { background: #225; width: 400px; height: 300px; } </style> </head> <body> <div id="container"> </div> </body> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script> <script src="js/three.js"></script> <script type="text/javascript"> // set scene size var width = 400, height = 400; // set photographic camera attributes var view_angle = 45, aspect = width / height, near = 0.1, far = 10000; var $container = $('#container'); // create webgl renderer, photographic camera // , scene var renderer = new three.webglrenderer(); var photographic camera = new three.perspectivecamera( view_angle, aspect, near, far); var scene = new three.scene(); ///////////////////////// photographic camera ///////////////////// scene.add(camera); camera.position.set(180,-180,300); camera.lookat(scene.position); ///////////////////////// floor ///////////////////// var floorgeometry = new three.planegeometry(200, 200); var floormaterial = new three.meshlambertmaterial( { color: 0x008800 } ); var floor = new three.mesh(floorgeometry, floormaterial); floor.position.set(0,0,-25); floor.rotation.set(0,0,0); floor.doublesided = true; floor.receiveshadow = true; scene.add(floor); ///////////////////////// cube ///////////////////// var cubegeometry = new three.cubegeometry( 50, 50, 50 ); var cubematerial = new three.meshlambertmaterial( { color: 0x000088 } ); cube = new three.mesh( cubegeometry, cubematerial ); cube.position.set(0,0,0); cube.castshadow = true; scene.add(cube); ///////////////////////// sphere ///////////////////// var spheregeometry = new three.spheregeometry(50, 16, 16); var spherematerial = new three.meshlambertmaterial( { color: 0xcc0000 }); sphere = new three.mesh( spheregeometry, spherematerial ); sphere.position.set(100,100,0); sphere.castshadow = true; scene.add(sphere); ///////////////////////// point lite ///////////////////// var pointlight = new three.pointlight(0xffffff); pointlight.position.set(50,50,130); pointlight.shadowcameravisible = true; pointlight.shadowdarkness = 1; pointlight.intensity = 2; pointlight.castshadow = true; scene.add(pointlight); renderer.setsize(width, height); $container.append(renderer.domelement); renderer.render(scene, camera); </script> </html>
did enable shadows on renderer?
renderer.shadowmapenabled = true; three.js shadow
No comments:
Post a Comment