<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css" style="display:none;"><!-- P {margin-top:0;margin-bottom:0;} --></style>
</head>
<body dir="ltr">
<div id="divtagdefaultwrapper" style="font-size:12pt;color:#000000;font-family:Calibri,Helvetica,sans-serif;" dir="ltr">
<p>Dear all,</p>
<p><br>
</p>
<font color="black">
<div style="margin:0">is it possible to enable casting shadows in iTowns especially using 3DTiles?</div>
<div style="margin:0"><br>
</div>
<div style="margin:0">Here is a minimal example with three.js 3D objects in iTowns.</div>
<div style="margin:0">I've set the castShadow and receiveShadow properties to true and added a new DirectionalLight casting shadows.</div>
<div style="margin:0"><br>
</div>
<div style="margin:0">Might be possible that I've forgotten something!?!<br>
</div>
<div style="margin:0"><br>
</div>
<div style="margin:0"><br>
</div>
<div style="margin:0">
<div><html><br>
<head><br>
<title>Shadow</title><br>
<br>
<meta charset="UTF-8"><br>
<link rel="stylesheet" type="text/css" href="examples/css/example.css"><br>
<link rel="stylesheet" type="text/css" href="examples/css/LoadingScreen.css"><br>
<br>
<meta name="viewport" content="width=device-width, initial-scale=1.0"><br>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.7.6/dat.gui.min.js"></script><br>
</head><br>
<body><br>
<div id="viewerDiv"></div><br>
<script src="examples/js/GUI/GuiTools.js"></script><br>
<script src="dist/itowns.js"></script><br>
<script src="examples/js/GUI/LoadingScreen.js"></script><br>
<script src="dist/debug.js"></script><br>
<script src="dist/three.min.js"></script><br>
<br>
<script type="text/javascript"><br>
// Define initial camera position<br>
var positionOnGlobe = { longitude: 6.956944, latitude: 50.938056, altitude: 5000 };<br>
var placement = {<br>
coord: new itowns.Coordinates('EPSG:4326', 6.978090, 50.922810), range: 1000, // Deutzer Hafen<br>
//tilt: 45,<br>
tilt: 10,<br>
}<br>
<br>
var viewerDiv = document.getElementById('viewerDiv');<br>
<br>
var scene = new THREE.Scene();<br>
scene.castShadow = true;<br>
scene.receiveShadow = true;<br>
<br>
var globeOptions = {<br>
scene3D : scene,<br>
}<br>
var view = new itowns.GlobeView(viewerDiv, placement, globeOptions);<br>
<br>
// delete original sun<br>
view.tileLayer.object3d.remove (view.tileLayer.object3d.children[0]);<br>
<br>
// Add new sun casting shadows<br>
var sun = new THREE.DirectionalLight( 0xffffff, 1, 100 );<br>
sun.position.set(9.3194, 0.30187, 4.0399);<br>
sun.castShadow = true;<br>
sun.updateMatrixWorld(true);<br>
view.tileLayer.object3d.add(sun);<br>
<br>
// position of the mesh<br>
var cameraTargetPosition = view.controls.getLookAtCoordinate();<br>
var meshCoord = cameraTargetPosition;<br>
meshCoord.altitude += 30;<br>
<br>
//Create a sphere that cast shadows (but does not receive them)<br>
var sphereGeometry = new THREE.SphereBufferGeometry( 5, 32, 32 );<br>
var sphereMaterial = new THREE.MeshStandardMaterial( { color: 0xff0000 } );<br>
var sphere = new THREE.Mesh( sphereGeometry, sphereMaterial );<br>
sphere.castShadow = true; //default is false<br>
sphere.receiveShadow = true; //default<br>
sphere.position.copy(meshCoord.as(view.referenceCrs));<br>
view.tileLayer.object3d.add( sphere );<br>
<br>
var meshCoord2 = cameraTargetPosition;<br>
meshCoord2.altitude -= 10;<br>
<br>
meshCoord2.latitude += 0.01;<br>
<br>
//Create a plane that receives shadows (but does not cast them)<br>
var planeGeometry = new THREE.PlaneBufferGeometry( 80, 80, 32, 32 );<br>
var planeMaterial = new THREE.MeshStandardMaterial( { color: 0x00ff00 } )<br>
var plane = new THREE.Mesh( planeGeometry, planeMaterial );<br>
plane.castShadow = true; //default is false<br>
plane.receiveShadow = true;<br>
plane.rotateY(0.3*Math.PI);<br>
plane.position.copy(meshCoord2.as(view.referenceCrs));<br>
view.tileLayer.object3d.add( plane );<br>
<br>
setupLoadingScreen(viewerDiv, view);<br>
<br>
var menuGlobe = new GuiTools('menuDiv', view, 300);<br>
<br>
// Add a debug UI<br>
var d = new debug.Debug(view, menuGlobe.gui);<br>
debug.createTileDebugUI(menuGlobe.gui, view, view.tileLayer, d);<br>
<br>
</script><br>
</body><br>
</html></div>
<br>
</div>
<div style="margin:0">Thanks in advance and all the best.</div>
<div style="margin:0">Carsten<br>
<span style="font-size:9pt"></span></div>
</font>
<div id="Signature">
<div id="divtagdefaultwrapper" dir="ltr" style="font-size: 12pt; color: rgb(0, 0, 0); font-family: Calibri, Helvetica, sans-serif, "EmojiFont", "Apple Color Emoji", "Segoe UI Emoji", NotoColorEmoji, "Segoe UI Symbol", "Android Emoji", EmojiSymbols;">
<font color="black"></font>
<p></p>
</div>
</div>
</div>
</body>
</html>