JSFiddle - React, Tailwind, and code Playground

by bemuse

HTML

<script src="https://unpkg.com/three/build/three.js"></script>
<canvas id="canvas"></canvas>

CSS

*{
    margin: 0;
    padding: 0;
}
body{
    background: black;
    overflow: hidden;
    position: absolute;
}
canvas#canvas{
    position: absolute;
    top: 0;
    left: 0;
}

JavaScript

const canvas = document.querySelector('#canvas')

const src = 'https://cdn.pixabay.com/photo/2017/08/30/01/05/milky-way-2695569_960_720.jpg'
const width = window.innerWidth
const height = window.innerHeight

const renderer = new THREE.WebGLRenderer({antialias: true, alpha: true, canvas: canvas})
renderer.setSize(width, height)
renderer.setPixelRatio(window.devicePixelRatio)
renderer.setClearColor(0x000000, 0.0)
renderer.setClearAlpha(0.0)
renderer.autoClear = false

const scene = new THREE.Scene()
const camera = new THREE.PerspectiveCamera(60, width / height, 0.1, 10000)
camera.position.z = 20



const loader = new THREE.TextureLoader().load(src, texture => {
	const widthSeg = 1
  const heightSeg = 2
  const plane = new THREE.PlaneGeometry(19.2, 10.8, widthSeg, heightSeg)
  
  const geometry = new THREE.BufferGeometry()
  const posArr = plane.attributes.position.array
  const indexArr = plane.index.array
  // const indexCnt = this.index.count
  console.log(indexArr)

  const w = widthSeg * 2
  const h = heightSeg
  const col = widthSeg + 1
  const row = heightSeg + 1

  const positions = []
  const normals = []
  const uv = []

  const pA = new THREE.Vector3()
  const pB = new THREE.Vector3()
  const pC = new THREE.Vector3()

  const cb = new THREE.Vector3()
  const ab = new THREE.Vector3()

  for(let i = 0; i < h; i++){
    for(let j = 0; j < w; j++){
      const idx = (i * w + j) * 3

      const p1 = indexArr[idx] * 3
      const p2 = indexArr[idx + 1] * 3
      const p3 = indexArr[idx + 2] * 3
      
      console.log(indexArr[idx])
      console.log(indexArr[idx + 1])
      console.log(indexArr[idx + 2])


      const x1 = posArr[p1]
      const y1 = posArr[p1 + 1]
      const z1 = posArr[p1 + 2]

      const x2 = posArr[p2]
      const y2 = posArr[p2 + 1]
      const z2 = posArr[p2 + 2]

      const x3 = posArr[p3]
      const y3 = posArr[p3 + 1]
      const z3 = posArr[p3 + 2]

      positions.push(x1, y1, z1)
      positions.push(x2, y2, z2)
     ...