JSFiddle - React, Tailwind, and code Playground

by tfoller

JavaScript

import * as THREE from 'https://unpkg.com/three/build/three.module.js'

let camera, scene, renderer;

init();
animate();

function init() {

  camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 10, 600);
  camera.position.set(0, 0, 200);

  scene = new THREE.Scene();

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

  scene.background = new THREE.Color(0x003300);

  var geom = new THREE.SphereBufferGeometry(50, 10, 10);

  const mat_P = new THREE.PointsMaterial({
    color: 0xff0000,
    opacity: 0.3,
    size: 10,
    transparent: true,
    fog: false,
  });

  const mat_M = new THREE.MeshBasicMaterial({
    color: 0xff0000,
    opacity: 0.3,
    transparent: true,
    fog: false,
  });

  var sphere_P = new THREE.Points(geom, mat_P);
  sphere_P.position.set(-70, 0, 0);
  scene.add(sphere_P);

  var sphere_M = new THREE.Mesh(geom, mat_M);
  sphere_M.position.set(70, 0, 0);
  scene.add(sphere_M);

}

function animate() {

  requestAnimationFrame(animate);

  renderer.render(scene, camera);

}