Globe

A test environment for my globe asset

HTML

<script async src="https://unpkg.com/es-module-shims@1.3.6/dist/es-module-shims.js"></script>
    
<script type="importmap">
	{
		"imports": {
			"three": "https://unpkg.com/three/build/three.module.js",
      "three-mesh-bvh": "https://unpkg.com/three-mesh-bvh/build/index.module.js"
		}
	}
</script>

CSS

* {
  padding: 0;
  margin: 0;
}

JavaScript

import * as THREE from 'three';
import { computeBoundsTree, disposeBoundsTree, acceleratedRaycast } from 'three-mesh-bvh';

// Add the extension functions
THREE.BufferGeometry.prototype.computeBoundsTree = computeBoundsTree;
THREE.BufferGeometry.prototype.disposeBoundsTree = disposeBoundsTree;
THREE.Mesh.prototype.raycast = acceleratedRaycast;

const renderer = new THREE.WebGLRenderer({ alpha: true });
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

var pointer, raycaster;
pointer = new THREE.Vector2();
raycaster = new THREE.Raycaster();
pointer.x = 1;
pointer.y = 1;

const scene = new THREE.Scene();
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
const camera = new THREE.PerspectiveCamera(
    45,
    window.innerWidth / window.innerHeight,
    1,
    10000
);

camera.position.set(0, 0, 1000);
renderer.render(scene, camera);

window.addEventListener("pointermove", onPointerMove);

/* lighting */

const pointLight = new THREE.PointLight(0xffffff);
pointLight.position.set(-500, 500, 1000);
scene.add(pointLight);

//
//
// main
//
//

/* world */


const world = new THREE.Mesh(
    new THREE.SphereGeometry(100, 10, 10),
    new THREE.MeshStandardMaterial({
       
        // wireframe: true,
    })
);
scene.add(world);

/* ellipse const */
const ellipseMaterial = new THREE.LineBasicMaterial({ color: 0x000000 });
const cometGeometry = new THREE.SphereGeometry(20, 50, 5);
/* ellipse two */

const curveTwo = new THREE.EllipseCurve(
    0,
    0,
    150,
    150,
    0,
    2 * Math.PI,
    false,
    0
);

const curveThree = new THREE.EllipseCurve(
    50,
    0,
    250,
    150,
    0,
    2 * Math.PI,
    false,
    0
);

const pointsTwo = curveTwo.getPoints(100);
const geometryTwo = new THREE.BufferGeometry().setFromPoints(pointsTwo);

const pointsThree = curveThree.getPoints(100);
const geometryThree = new...