Acabo de empezar a aprender three.js pero no pude poner sombras de objetos en el avión. Todo funciona, pero los objetos no proyectan su sombra sobre el plano. Aquí está mi archivo js. No sé lo que falta en el código. Se adjuntan archivos HTML y JavaScript adjuntos.
<!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <script type = "text/javascript" src="../../../libs/three/three.js"></script> <script type="text/javascript" src = "../../../libs/three/controls/TrackballControls.js"></script> <script type="text/javascript" src = "../javascript/first_scene.js"></script> <title>First_Scene</title> </head> <body> <div id ="webgl-output"></div> <script type="text/javascript"> (function(){ init() } )(); </script> </body> </html> function init() { var scene = new THREE.Scene(); var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight,0.1, 1000); var renderer =new THREE.WebGLRenderer(); renderer.setClearColor(new THREE.Color(0x000000)); renderer.setSize(window.innerWidth, window.innerHeight); renderer.shadowMap.Enabled = true; var axes = new THREE.AxesHelper(20); scene.add(axes); var planeGeometry = new THREE.PlaneGeometry(60,20,1,1) var planeMaterial = new THREE.MeshLambertMaterial({ color: 0xffffff }); var plane = new THREE.Mesh(planeGeometry, planeMaterial); plane.receiveShadow = true; plane.rotation.x = -0.5 * Math.PI; plane.position.set(15,0,0); scene.add(plane); var cubeGeometry = new THREE.BoxGeometry(4, 4, 4); var cubeMaterial = new THREE.MeshLambertMaterial({ color: 0xff0000 }); var cube = new THREE.Mesh(cubeGeometry, cubeMaterial); cube.castShadow = true; cube.position.set(-4, 4, 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; sphere.position.set(20, 0, 2); sphere.castShadow = true; scene.add(sphere); camera.position.set(-30, 40, 30); camera.lookAt(scene.position); var ambienLight = new THREE.AmbientLight(0x353535); scene.add(ambienLight); var spotLight = new THREE.SpotLight(0xffffff); spotLight.position.set(-10, 20, -5); spotLight.castShadow = true; scene.add(spotLight); document.getElementById("webgl-output").appendChild(renderer.domElement); renderer.render(scene, camera); }Hay un error tipográfico en su código. No es renderer.shadowMap.Enabled sino renderer.shadowMap.enabled . Código completo:
var scene = new THREE.Scene(); var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000); var renderer = new THREE.WebGLRenderer(); renderer.setClearColor(new THREE.Color(0x000000)); renderer.setSize(window.innerWidth, window.innerHeight); renderer.shadowMap.enabled = true; var axes = new THREE.AxesHelper(20); scene.add(axes); var planeGeometry = new THREE.PlaneGeometry(60, 20, 1, 1) var planeMaterial = new THREE.MeshLambertMaterial({ color: 0xffffff }); var plane = new THREE.Mesh(planeGeometry, planeMaterial); plane.receiveShadow = true; plane.rotation.x = -0.5 * Math.PI; plane.position.set(15, 0, 0); scene.add(plane); var cubeGeometry = new THREE.BoxGeometry(4, 4, 4); var cubeMaterial = new THREE.MeshLambertMaterial({ color: 0xff0000 }); var cube = new THREE.Mesh(cubeGeometry, cubeMaterial); cube.castShadow = true; cube.position.set(-4, 4, 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; sphere.position.set(20, 0, 2); scene.add(sphere); camera.position.set(-30, 40, 30); camera.lookAt(scene.position); var ambienLight = new THREE.AmbientLight(0x353535); scene.add(ambienLight); var spotLight = new THREE.SpotLight(0xffffff); spotLight.position.set(-10, 20, -5); spotLight.castShadow = true; scene.add(spotLight); document.body.appendChild(renderer.domElement); renderer.render(scene, camera); body { margin: 0; } <script src="https://cdn.jsdelivr.net/npm/three@0.132.2/build/three.min.js"></script>