Shapes and shadows with ThreeJS script src https cdn jsdelivr net npm three 0 117 1 build three min js script script src https cdn jsdelivr net npm three 0 117 1 examples js controls OrbitControls js script style body height 300px style div id WebGL xbdev div script var renderer camera scene controls var init function scene new THREE Scene camera new THREE PerspectiveCamera 45 window innerWidth window innerHeight 0 1 1000 renderer new THREE WebGLRenderer controls new THREE OrbitControls camera renderer domElement var color new THREE Color rgb 200 250 250 renderer setClearColor new THREE Color color renderer setSize window innerWidth window innerHeight renderer shadowMap enabled true renderer shadowMap type THREE PCFSoftShadowMap default THREE PCFShadowMap var ejesAyuda new THREE AxesHelper 20 son los ejes de ayuda creo scene add ejesAyuda var planeGeometry new THREE PlaneGeometry 60 20 var planeMaterial new THREE MeshLambertMaterial color 0xcccccc var plane new THREE Mesh planeGeometry planeMaterial plane receiveShadow true plane rotation x 0 5 Math PI 90 plane position x 15 plane position y 0 plane position z 0 scene add plane var cubeGeometry new THREE CubeGeometry 4 4 4 var cubeMaterial new THREE MeshLambertMaterial color 0xff0000 var cube new THREE Mesh cubeGeometry cubeMaterial cube castShadow true con esto le indicamos que queremos que emita sombra cube position x 4 cube position y 3 cube position z 0 scene add cube var sphereGeometry new THREE SphereGeometry 4 20 20 var sphereMaterial new THREE MeshLambertMaterial color 0x7777ff var sphere new THREE Mesh sphereGeometry sphereMaterial sphere castShadow true con esto le indicamos que queremos que emita sombra sphere position x 20 sphere position y 4 sphere position z 2 scene add sphere camera position x 30 camera position y 40 camera position z 30 camera lookAt scene position var spotLight new THREE SpotLight 0xffffff 0 8 spotLight position set 40 60 10 spotLight castShadow true spotLight angle Math PI 8 0 spotLight shadow mapSize width 2048 spotLight shadow mapSize height 2048 scene add spotLight document getElementById WebGL xbdev append renderer domElement resize window onresize resize function animate requestAnimationFrame animate renderer render scene camera function resize renderer setSize window innerWidth window innerHeight camera aspect window innerWidth window innerHeight camera updateProjectionMatrix controls handleResize init animate script
al color 0xff0000 var cube new THREE Mesh cubeGeometry cubeMaterial cube castShadow true con esto le indicamos que queremos que emita sombra cube position x 4 cube position y 3 cube position z 0 scene add cube var sphereGeometry new THREE SphereGeometry 4 20 20 var sphereMaterial new THREE MeshLambertMaterial color 0x7777ff var sphere new THREE Mesh sphereGeometry sphereMaterial sphere castShadow true con esto le indicamos que queremos que emita sombra sphere position x 20 sphere position y 4 sphere position z 2 scene add sphere camera position x 30 camera position y 40 camera position z 30 camera lookAt scene position var spotLight new THREE SpotLight 0xffffff 0 8 spotLight position set 40 60 10 spotLight castShadow true spotLight angle Math PI 8 0 spotLight shadow mapSize width 2048 spotLight shadow mapSize height 2048 scene add spotLight document getElementById WebGL xbdev append renderer domElement resize window onresize resize function animate requestAnimationFrame animate renderer render scene camera function resize renderer setSize window innerWidth window innerHeight camera aspect window innerWidth window innerHeight camera updateProjectionMatrix controls handleResize init animate script