Basemap from Simulation

scene.background = new THREE.Color('white') scene.add(new THREE.AmbientLight(0xffffff, .7)) let loader = new THREE.TextureLoader() loader.load('./basemap.svg', texture => { let material = new THREE.MeshBasicMaterial({ map: texture, side: THREE.DoubleSide }) let geometry = new THREE.PlaneGeometry( texture.image.width / 100, texture.image.height / 100) let basemap = new THREE.Mesh(geometry, material) scene.add(basemap) }) let nodes = { "backend":[130,-18],"db":[234,-72], "source":[27,-18],"user":[27,-99], "webserver1":[130,-126],"webserver2":[130,-72]} let dim = [269, 152] let bricks = [] for (let n in nodes) { let geo = new THREE.CubeGeometry(.5,.3,.1) let mat = new THREE.MeshStandardMaterial({ color:'bisque', opacity: 0.5, transparent: true, }) let at = xy => [ (xy[0]-dim[0]/2)/100, (-xy[1]-dim[1]/2)/100] let be = h => { let dot = new THREE.Mesh(geo, mat) let p = new THREE.Vector3(...at(nodes[n]), h) dot.position.copy(p) bricks.push(dot) scene.add(dot) } be(.3) if(['backend','db'].includes(n)) be(.5) if(['user','source'].includes(n)) {be(.5);be(.7)} }

const mouse = new THREE.Vector2() window.addEventListener('mousemove', (event) => { mouse.x = event.clientX/window.innerWidth*2-1 mouse.y = -(event.clientY/window.innerHeight)*2+1 })

const ray = new THREE.Raycaster() tick = () => { ray.setFromCamera(mouse, camera) const hits = ray.intersectObjects(bricks) for(const hit of hits) { hit.object.material.opacity = 1} for(const brick of bricks) { if(!hits.find(hit => hit.object === brick)) { brick.material.opacity = 0.5 }} }

http://three.ward.asia.wiki.org/assets/pages/snippet-template/basic.html?basemap-from-simulation HEIGHT 400