[iTowns-user] Shadows in iTowns

Mon Jun 22 02:32:13 PDT 2020

Hello

you need to enable renderer shadow map

view.mainLoop.gfxEngine.renderer.shadowMap.enabled = true;
view.mainLoop.gfxEngine.renderer.shadowMap.type = itowns.THREE.PCFShadowMap;

and move the light over the objects

var cP = view.controls.getLookAtCoordinate();
cP.altitude += 100;
sun.position.copy(cP.as(view.referenceCrs));

Beware the itowns ground doesn't handle shadows yet.

best regards

________________________________
De : ITowns-user [itowns-user-bounces at lists.osgeo.org] de la part de Carsten Oldenburg [carsten.oldenburg at th-owl.de]
Envoyé : vendredi 19 juin 2020 08:51
À : itowns-user at lists.osgeo.org
Objet : [iTowns-user] Shadows in iTowns

Dear all,

is it possible to enable casting shadows in iTowns especially using 3DTiles?

Here is a minimal example with three.js 3D objects in iTowns.
I've set the castShadow and receiveShadow properties to true and added a new DirectionalLight casting shadows.

Might be possible that I've forgotten something!?!

<html>
    <head>
        <title>Shadow</title>

        <meta charset="UTF-8">
        <link rel="stylesheet" type="text/css" href="examples/css/example.css">
        <link rel="stylesheet" type="text/css" href="examples/css/LoadingScreen.css">

        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.7.6/dat.gui.min.js"></script>
    </head>
    <body>
        <div id="viewerDiv"></div>
        <script src="examples/js/GUI/GuiTools.js"></script>
        <script src="dist/itowns.js"></script>
        <script src="examples/js/GUI/LoadingScreen.js"></script>
        <script src="dist/debug.js"></script>
        <script src="dist/three.min.js"></script>

        <script type="text/javascript">
            // Define initial camera position
            var positionOnGlobe = { longitude: 6.956944, latitude: 50.938056, altitude: 5000 };
            var placement = {
                coord: new itowns.Coordinates('EPSG:4326', 6.978090, 50.922810), range: 1000, // Deutzer Hafen
                //tilt: 45,
                tilt: 10,
            }

            var viewerDiv = document.getElementById('viewerDiv');

            var scene = new THREE.Scene();
            scene.castShadow = true;
            scene.receiveShadow = true;

            var globeOptions = {
                scene3D : scene,
            }
            var view = new itowns.GlobeView(viewerDiv, placement, globeOptions);

            // delete original sun
            view.tileLayer.object3d.remove (view.tileLayer.object3d.children[0]);

            // Add new sun casting shadows
            var sun = new THREE.DirectionalLight( 0xffffff, 1, 100 );
            sun.position.set(9.3194, 0.30187, 4.0399);
            sun.castShadow = true;
            sun.updateMatrixWorld(true);
            view.tileLayer.object3d.add(sun);

            // position of the mesh
            var cameraTargetPosition = view.controls.getLookAtCoordinate();
            var meshCoord = cameraTargetPosition;
            meshCoord.altitude += 30;

            //Create a sphere that cast shadows (but does not receive them)
            var sphereGeometry = new THREE.SphereBufferGeometry( 5, 32, 32 );
            var sphereMaterial = new THREE.MeshStandardMaterial( { color: 0xff0000 } );
            var sphere = new THREE.Mesh( sphereGeometry, sphereMaterial );
            sphere.castShadow = true; //default is false
            sphere.receiveShadow = true; //default
            sphere.position.copy(meshCoord.as(view.referenceCrs));
            view.tileLayer.object3d.add( sphere );

            var meshCoord2 = cameraTargetPosition;
            meshCoord2.altitude -= 10;

            meshCoord2.latitude += 0.01;

            //Create a plane that receives shadows (but does not cast them)
            var planeGeometry = new THREE.PlaneBufferGeometry( 80, 80, 32, 32 );
            var planeMaterial = new THREE.MeshStandardMaterial( { color: 0x00ff00 } )
            var plane = new THREE.Mesh( planeGeometry, planeMaterial );
            plane.castShadow = true; //default is false
            plane.receiveShadow = true;
            plane.rotateY(0.3*Math.PI);
            plane.position.copy(meshCoord2.as(view.referenceCrs));
            view.tileLayer.object3d.add( plane );

            setupLoadingScreen(viewerDiv, view);

            var menuGlobe = new GuiTools('menuDiv', view, 300);

            // Add a debug UI
            var d = new debug.Debug(view, menuGlobe.gui);
            debug.createTileDebugUI(menuGlobe.gui, view, view.tileLayer, d);

        </script>
    </body>
</html>

Thanks in advance and all the best.
Carsten
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.osgeo.org/pipermail/itowns-user/attachments/20200622/78813d09/attachment.html>