<html dir="ltr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css" style="">
<!--
p
{margin-top:0;
margin-bottom:0}
-->
</style><style type="text/css" id="owaParaStyle"></style>
</head>
<body dir="ltr" fpstyle="1" ocsi="0">
<div style="direction: ltr;font-family: Tahoma;color: #000000;font-size: 10pt;">
<div>Hello</div>
<div><br>
</div>
<div>you need to enable renderer shadow map</div>
<div><font face="Courier New"><br>
</font></div>
<div><font face="Courier New">view.mainLoop.gfxEngine.renderer.shadowMap.enabled = true;<br>
view.mainLoop.gfxEngine.renderer.shadowMap.type = itowns.THREE.PCFShadowMap;</font><br>
</div>
<div><br>
</div>
<div>and move the light over the objects</div>
<div><font face="Courier New"><br>
</font></div>
<div><font face="Courier New">var cP = view.controls.getLookAtCoordinate();<br>
cP.altitude += 100;<br>
sun.position.copy(cP.as(view.referenceCrs));</font></div>
<div><br>
</div>
<div>Beware the itowns ground doesn't handle shadows yet.</div>
<div><br>
</div>
<div>best regards <br>
</div>
<div><br>
</div>
<div><br>
</div>
<div><br>
</div>
<div><br>
</div>
<div><br>
</div>
<div style="font-family: Times New Roman; color: #000000; font-size: 16px">
<hr tabindex="-1">
<div id="divRpF257235" style="direction: ltr;"><font size="2" face="Tahoma" color="#000000"><b>De :</b> ITowns-user [itowns-user-bounces@lists.osgeo.org] de la part de Carsten Oldenburg [carsten.oldenburg@th-owl.de]<br>
<b>Envoyé :</b> vendredi 19 juin 2020 08:51<br>
<b>À :</b> itowns-user@lists.osgeo.org<br>
<b>Objet :</b> [iTowns-user] Shadows in iTowns<br>
</font><br>
</div>
<div></div>
<div>
<div id="divtagdefaultwrapper" dir="ltr" style="font-size:12pt; color:#000000; font-family:Calibri,Helvetica,sans-serif">
<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>
</div>
</div>
</div>
</body>
</html>