JSFiddle - React, Tailwind, and code Playground

by cober20122

JavaScript

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

var camera, scene, renderer, geometry, material, mesh;
const clock = new THREE.Clock()

init();
animate();

function init() {

    scene = new THREE.Scene();
    renderer = new THREE.WebGLRenderer()
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(renderer.domElement);

    camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, .1, 1000);
    camera.position.z = 8;
    scene.add(camera);
    
	 const group = new THREE.Group();
   const points = []
   
   for(let i=0; i < 2; i++){

          const geometry = new THREE.CircleGeometry();
          const material = new THREE.MeshBasicMaterial();
          const mesh = new THREE.Mesh(geometry, material);
          
          if(i === 0){mesh.position.x = 0}else{mesh.position.x = i - 10}
          
          
          points.push(mesh.position)
          
          mesh.renderOrder = 1

          scene.add(mesh)

      }
  
  for(let i=0; i < 2; i++){

    const canvas = document.createElement('canvas');
    canvas.width = 256;
    canvas.height = 256;
    const ctx = canvas.getContext("2d");

    ctx.textAlign = "center";
    ctx.lineWidth = 8;
    ctx.fillStyle = "white";
    ctx.font = '24px Courier New';
    ctx.fillText(`boom${i}`, 128, 110);
    
    const texture = new THREE.Texture(canvas);
    texture.needsUpdate = true
    
    const spriteMat = new THREE.SpriteMaterial({map: texture});
    const sprite = new THREE.Sprite(spriteMat)
    
    sprite.scale.set(7, 7, 1)
    
    if(i === 0){sprite.position.x = i + 2}else{sprite.position.x = i - 4}
    
    scene.add(sprite)
    
  }
 
  const geometry = new THREE.BufferGeometry().setFromPoints(points);
  const material = new THREE.LineBasicMaterial({color: 0xffffff, depthTest: false});
  const line = new THREE.Line(geometry, material);
  
  line.geometry.attributes.position.needsUpdate = true;
 ...