import "./style.css";

import * as THREE from "https://cdn.skypack.dev/three@0.136.0";
import { OrbitControls } from "https://cdn.skypack.dev/three@0.136.0/examples/jsm/controls/OrbitControls";
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(
  45,
  window.innerWidth / window.innerHeight,
  1,
  1000
);
camera.position.set(0, 0, 14);
camera.lookAt(scene.position);
var renderer = new THREE.WebGLRenderer({
  antialias: true,
});
renderer.setClearColor(0x252025);
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

var controls = new OrbitControls(camera, renderer.domElement);

var geom = new THREE.SphereBufferGeometry(5, 180, 90);
var colors = [];
var color = new THREE.Color();
var q = ["pink", "red", "red", "red", "maroon", "maroon", "maroon"];
for (let i = 0; i < geom.attributes.position.count; i++) {
  color.set(q[THREE.Math.randInt(0, q.length - 1)]);
  color.toArray(colors, i * 3);
}
geom.addAttribute(
  "color",
  new THREE.BufferAttribute(new Float32Array(colors), 3)
);

var loader = new THREE.TextureLoader();
loader.setCrossOrigin("");
var texture = loader.load(
  "https://cywarr.github.io/small-shop/earthspec1k[1].jpg"
);
texture.wrapS = THREE.RepeatWrapping;
texture.wrapT = THREE.RepeatWrapping;
texture.repeat.set(1, 1);
var disk = loader.load(
  "https://threejs.org/examples/textures/sprites/circle.png"
);

var points = new THREE.Points(
  geom,
  new THREE.ShaderMaterial({
    vertexColors: THREE.VertexColors,
    uniforms: {
      visibility: {
        value: texture,
      },
      shift: {
        value: 0,
      },
      shape: {
        value: disk,
      },
      size: {
        value: 0.3,
      },
      scale: {
        value: window.innerHeight / 2,
      },
    },
    vertexShader: `
  				
      uniform float scale;
      uniform float size;
      
      varying vec2 vUv;
      varying vec3 vColor;
      
      void main() {
      
        vUv = uv;
        vColor = color;
        vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );
        gl_PointSize = size * ( scale / length( mvPosition.xyz )) * (0.3 + sin(uv.y * 3.1415926) * 0.6 );
        gl_Position = projectionMatrix * mvPosition;

      }
  `,
    fragmentShader: `
      uniform sampler2D visibility;
      uniform float shift;
      uniform sampler2D shape;
      
      varying vec2 vUv;
      varying vec3 vColor;
      

      void main() {
      	
        vec2 uv = vUv;
        uv.x += shift;
        vec4 v = texture2D(visibility, uv);
        if (length(v.rgb) > 1.0) discard;

        gl_FragColor = vec4( vColor, 1.0 );
        vec4 shapeData = texture2D( shape, gl_PointCoord );
        if (shapeData.a < 0.0625) discard;
        gl_FragColor = gl_FragColor * shapeData;
		
      }
  `,
    transparent: false,
  })
);
scene.add(points);

var blackGlobe = new THREE.Mesh(
  geom,
  new THREE.MeshBasicMaterial({
    color: 0x120000,
  })
);
blackGlobe.scale.setScalar(0.99);
points.add(blackGlobe);

var clock = new THREE.Clock();
var time = 0;

render();

function render() {
  requestAnimationFrame(render);
  time += clock.getDelta();
  points.material.uniforms.shift.value = -time * 0.1;
  renderer.render(scene, camera);
}


"onhover mesh stop orbit "