import { LongPressHandler } from "@here/harp-map-controls" ; import { MapAnchor , MapView } from "@here/harp-mapview" ; import * as THREE from "three" ; import { HelloWorldExample } from "./getting-started_hello-world_npm" ; /**
 * This example builds on top of the [[HelloWorldExample]], so please consult that first for any
 * questions regarding basic setup of the map.
 *
 * This example shows how to add a [THREE.js](https://threejs.org/) object to the scene.
 *
 * For the purposes of the demo, create a simple pink box.
 * ```typescript
 * [[include:harp_gl_threejs_add_simple_object_0.ts]]
 * ```
 * Next we need to find the position to place the cube, we use the helpful method
 * [[getGeoCoordinatesAt]] to get the geo space position under the mouse when it is clicked, this
 * is shown here:
 * ```typescript
 * [[include:harp_gl_threejs_add_simple_object_1.ts]]
 * ```
 *
 * Here the object is created and added to the [[mapAnchors]] node of the [[MapView]] scene.
 * ```typescript
 * [[include:harp_gl_threejs_add_simple_object_2.ts]]
 * ```
 *
 * Finally, in order to see the cube rendered on the map, we need to force an update.
 * ```typescript
 * [[include:harp_gl_threejs_add_simple_object_3.ts]]
 * ```
 */ export namespace ThreejsAddSimpleObject { const scale = 100 ; const geometry = new THREE . BoxGeometry ( 1 * scale , 1 * scale , 1 * scale ) ; const prePassMaterial = new THREE . MeshStandardMaterial ( { color : "#ff00fe" , opacity : 0.3 , depthTest : false , transparent : true } ) ; const material = new THREE . MeshStandardMaterial ( { color : "#ff00fe" , opacity : 0.9 , transparent : true } ) ; function createPinkCube ( ) { const cube = new THREE . Object3D ( ) ; const prePassMesh = new THREE . Mesh ( geometry , prePassMaterial ) ; prePassMesh . renderOrder = Number . MAX_SAFE_INTEGER - 1 ; cube . add ( prePassMesh ) ; const mesh = new THREE . Mesh ( geometry , material ) ; mesh . renderOrder = Number . MAX_SAFE_INTEGER ; cube . add ( mesh ) ; return cube ; } function addMouseEventListener ( mapView ) { const canvas = mapView . canvas ; mapView . zoomLevel = 15.5 ; new LongPressHandler ( canvas , event => { const geoPosition = mapView . getGeoCoordinatesAt ( event . pageX , event . pageY ) ; if ( geoPosition === null ) { return ; } geoPosition . altitude = 50 ; const cube = createPinkCube ( ) ; cube . anchor = geoPosition ; mapView . mapAnchors . add ( cube ) ; mapView . update ( ) ; } ) ; } const message = document . createElement ( "div" ) ; message . innerHTML = `Long click to add a ${ scale }m wide cube to the scene.` ; message . style . cssText = `
        color: #000;
        width: 80%;
        left: 50%;
        position: relative;
        margin-left: -40%;
        font-size: 15px;
    ` ; document . body . appendChild ( message ) ; addMouseEventListener ( HelloWorldExample . mapView ) ; }