I’ve been trying to add a shadow via DirectionalLight as per the documentation - but no luck… The shadow I try to add doesn’t appear - I added shadowCameraVisible for debugging, but it just doesn’t appear… Does anyone have any idea what could be wrong with my code?? I appreciate any input!!
<!DOCTYPE html>
<html lang="en">
<head>
<!-- <title></title> -->
<!-- <meta charset="utf-8"> -->
<!-- <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"> -->
<style>
body {
margin: 0px;
overflow: hidden;
}
</style>
</head>
<body>
<script src="js/threejs/three.js"></script>
<script src="js/controls/OrbitControls.js"></script>
<script src="js/curves/NURBSCurve.js"></script>
<script src="js/curves/NURBSUtils.js"></script>
<script src="js/loaders/FBXLoader.js"></script>
<script src="js/Detector.js"></script>
<script src="js/libs/inflate.min.js"></script>
<script src="js/libs/stats.min.js"></script>
<script>
if (!Detector.webgl) Detector.addGetWebGLMessage();
var container, stats, controls;
var camera, scene, renderer, light;
var sky, sunSphere;
var fbx = window.location.search.substr(1).split('=')[1] + '.fbx';
init();
animate();
function init() {
container = document.createElement('div');
document.body.appendChild(container);
camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 5000 );
camera.position.set(0,0,100);
//camera.lookAt(new THREE.Vector3(1,1,1));
scene = new THREE.Scene();
//scene.background = new THREE.Color(0xffffff);
scene.add(new THREE.AmbientLight(0xffffff, .5));
var light = new THREE.DirectionalLight(0xffffff, 1);
light.castShadow = true;
light.shadowCameraVisible = true;
light.position.set(-3, 4, 7);
//light.position.set(-3, 1, 5);
scene.add(light);
scene.add( new THREE.DirectionalLightHelper(light, 0.2) );
/*//eixos (para ajudar na orientação)
axesHelper = new THREE.AxesHelper( 500 );
scene.add( axesHelper ); */
controls = new THREE.OrbitControls(camera);
controls.addEventListener( 'change', render );
controls.enableDamping = true;
controls.dampingFactor = 0.25;
controls.enableZoom = true;
//controls.minDistance = 200;
//controls.maxDistance = 1000;
//Angulo polar, não permite que tenha uma visão com (Y) negativo
controls.minPolarAngle = 0;
controls.maxPolarAngle = Math.PI * 0.55;
//loadSkyBox();
var geometry = new THREE.SphereGeometry( 150, 60, 40 );
geometry.scale( - 1, 1, 1 );
var material = new THREE.MeshBasicMaterial( {
map: new THREE.TextureLoader().load( 'images/BGCompleto_360.jpg' )
} );
mesh = new THREE.Mesh( geometry, material );
mesh.position.y += 5;
//mesh.castShadow = true;
//mesh.receiveShadow = true;
scene.add( mesh );
//Código comentado pois foi retirado o piso geométrico
gt = new THREE.TextureLoader().load( 'images/TexturesCom_FloorsRegular0190_1_MTester.jpg' );
gg = new THREE.PlaneGeometry( 1500, 1500 );
gm = new THREE.MeshBasicMaterial( { color: 0xffffff, map: gt } );
ground = new THREE.Mesh( gg, gm );
ground.rotation.x = - Math.PI / 2;
ground.material.map.repeat.set( 100, 100 );
ground.material.map.wrapS = ground.material.map.wrapT = THREE.RepeatWrapping;
ground.material.map.encoding = THREE.sRGBEncoding;
//ground.castShadow = true;
//ground.receiveShadow = true;
scene.add( ground );
var loader = new THREE.FBXLoader();
loader.load('9587.fbx', function(object) {
offset = 1.25;
object.scale.set(0.1, 0.1, 0.1)
//obter centro do objeto
const boundingBox = new THREE.Box3().setFromObject(object);
const middle = new THREE.Vector3();
const size = new THREE.Vector3();
boundingBox .getCenter(middle);
console.log("center", middle );
boundingBox .getSize(size);
console.log("size", size );
//adicionar objecto
object.position.y -= middle.getComponent(1);
ground.position.y -= middle.getComponent(1);
//object.position.y -= 8;
//add objecto z from position camera
//object.position.z = middle.getComponent(2);
object.position.z -= 2;
scene.add(object);
const fov = camera.fov * ( Math.PI / 180 );
const fovh = 2*Math.atan(Math.tan(fov/2) * camera.aspect);
let dx = size.z / 2 + Math.abs( size.x / 2 / Math.tan( fovh / 2 ) );
let dy = size.z / 2 + Math.abs( size.y / 2 / Math.tan( fov / 2 ) );
let cameraZ = Math.max(dx, dy);
// offset the camera, if desired (to avoid filling the whole canvas)
if( offset !== undefined && offset !== 0 ) cameraZ *= offset;
camera.position.set( 0, 0, cameraZ );
// set the far plane of the camera so that it easily encompasses the whole object
const minZ = boundingBox.min.z;
const cameraToFarEdge = ( minZ < 0 ) ? -minZ + cameraZ : cameraZ - minZ;
//camera.far = cameraToFarEdge * 3;
camera.updateProjectionMatrix();
if ( controls !== undefined ) {
// set camera to rotate around the center
controls.target = new THREE.Vector3(0, 0, 0);
// prevent camera from zooming out far enough to create far plane cutoff
controls.maxDistance = cameraToFarEdge * 2;
}
}, (ev) => {
console.log(ev);
}, (e) => {
console.log(e);
});
renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setPixelRatio(window.devicePixelRatio);
renderer.shadowMapEnabled = true;
renderer.shadowMapSoft = false;
document.body.appendChild(renderer.domElement);
//container.appendChild(renderer.domElement);
}
function loadSkyBox() {
// Load the skybox images and create list of materials
var materials = [
createMaterial( 'images/skyX55+x.png' ), // right
createMaterial( 'images/skyX55-x.png' ), // left
createMaterial( 'images/skyX55+y.png' ), // top
createMaterial( 'images/skyX55-y.png' ), // bottom
createMaterial( 'images/skyX55+z.png' ), // back
createMaterial( 'images/skyX55-z.png' ) // front
];
// Create a large cube
var mesh = new THREE.Mesh( new THREE.BoxGeometry( 1500, 1500, 1500, 1, 1, 1 ), new THREE.MeshFaceMaterial( materials ) );
scene.add( mesh );
}
function createMaterial( path ) {
var texture = THREE.ImageUtils.loadTexture(path);
var material = new THREE.MeshBasicMaterial( { map: texture, overdraw: 0.5, side: THREE.BackSide } );
//console.log(material);
return material;
}
function render() {
renderer.render(scene, camera);
}
function animate() {
requestAnimationFrame(animate);
controls.update();
render();
}
</script>
</body>
</html>