Comments (4)
@Diuyilu if you want your background to be always static without moving, I'd suggest to just have a static image in a <div>
underneath and overlay the globe element on top of that (with a transparent background on the globe itself).
from globe.gl.
Thank you, I will try this implementation method!
from globe.gl.
@vasturiano Do you have any specific code implementation? I tried the method you provided but it didn't work.
from globe.gl.
@vasturiano Thank you, I just achieved this effect!My implementation method is as follows:
- You need to first set a transparent background for the
Globe()
,I usebackgroundColor('#FF000000')
- You need to use
z-index
to set the stacking position of the earth and background
<div class="parent">
<div id="globeViz" class="global"></div>
<div id="background" class="background">
<img class="backimg" src="./image/background.jpg">
</div>
</div>
<script>
const world = Globe()
.backgroundColor('#FF000000')
world.controls().autoRotate = true;
world.controls().autoRotateSpeed = 1;
</script>
<style>
.parent {
position: relative;
}
.global {
position: absolute;
z-index: 2;
}
.background {
position: absolute;
z-index: 1;
}
.backimg {
width: 100vw;
height: 100vh;
}
</style>
from globe.gl.
Related Issues (20)
- For tilelayer, can it achieve something like googlemap?
- Arc dash animation stops when labels are implemented HOT 5
- Why does it take so long to set the heatmapsData? HOT 2
- Random raycast error HOT 2
- make it easier to hit labels on mobile - e.g., transparent background for labels HOT 1
- Rotate the globe to the specified position? HOT 2
- Await for globe.labelDotRadius function HOT 2
- THREE.WebGLRenderer : useLegacyLights depreciated HOT 5
- Polygons are not filling the shape of the Antarctic continent HOT 1
- Trigger polygon hover event for one of the polygons programmatically HOT 2
- Atmosphere renders above globe every 2nd rotation
- onZoom method is called even without touching the globe and triggers all events on htmlElement elements HOT 1
- How to align custom layer objects on arcs and paths? HOT 1
- Ability to adjust the map on window resize event HOT 4
- Update points dynamically HOT 2
- Attempted Import Error HOT 2
- resumeAnimation causes globe to spin very fast (catch up with missed autoRotation) HOT 2
- Is there a way to get a political map on the globe?
- Is there a way to set .scene-container to width/height of 100vw/100vh? HOT 4
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from globe.gl.