JSFiddle - React, Tailwind, and code Playground

by Millieyan

JavaScript

var camera, scene, renderer, radius;
var pos, vel;
var motion = true;

init();
animate();


function init() {
  var ww = $("#container").innerWidth();
  var hh = $("#container").innerHeight();
  renderer = new THREE.WebGLRenderer();
  renderer.setSize(ww, hh);
  renderer.setClearColor(0x888888);
  $("#container").append(renderer.domElement);

  ////////////////////////////////////////////////

  scene = new THREE.Scene();
  camera = new THREE.OrthographicCamera(-50, 50, 50, -50, 1, 1000);
  camera.position.z = 500;
  radius = 5;
  circle = new THREE.Mesh(new THREE.CircleGeometry(radius, 20), new THREE.MeshBasicMaterial());
  scene.add(circle);
  plane = new THREE.Mesh(new THREE.PlaneGeometry(25, 5), new THREE.MeshBasicMaterial());
  scene.add(plane);
  let border = new THREE.Line(geometry, new THREE.LineBasicMaterial({
    color: 0xffffff
  }));
  scene.add(border);
  window.addEventListener('resize', onWindowResize, false);
}

function onWindowResize() {
  var ww = $("#container").innerWidth();
  var hh = $("#container").innerHeight();
  camera.aspect = ww / hh;
  camera.updateProjectionMatrix();
  renderer.setSize(ww, hh);
}

function animate() {
  requestAnimationFrame(animate);
  render();
}

function render() {
  renderer.render(scene, camera);
}