I am currently working on a project to create a dynamic rotating globe with points of interest marked on it. The globe rotates, and I want the points of interest to be visible whenever they are in view.
However, I am facing an issue where the points of interest only appear when they are "behind" the globe during rotation, as shown in the image below (only a thin red line is visible on the right):
https://i.sstatic.net/4Vrzw.png
Below is the code snippet:
<script setup>
import * as THREE from 'three';
const points = [
{
name: 'Paris',
latitude: 48.864716,
longitude: 2.349014,
},
{
name: 'New York',
latitude: 40.73061,
longitude: -73.935242,
},
{
name: 'Beijing',
latitude: 39.9042,
longitude: 116.407396,
},
];
// Remaining code snippet goes here...
If you want to see a live demonstration of the issue, you can visit this Stackblitz link: https://stackblitz.com/edit/nuxt-starter-ewsydq?file=app.vue. I have stripped down unnecessary elements to keep the reproduction as lightweight as possible.
Your assistance in resolving this issue would be greatly appreciated. How can I ensure that the points of interest are visible when they are on the side of the globe facing the viewer?