JSFiddle - React, Tailwind, and code Playground

by Paul West

HTML

<script src="https://threejs.org/build/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>

CSS

body {
  overflow: hidden;
  margin: 0;
}

JavaScript

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.set(5, 5, 30);
var renderer = new THREE.WebGLRenderer({
  antialias: true
});
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

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

var dirLight = new THREE.DirectionalLight(0xffffff);
dirLight.position.set(-10, 10, 10);
scene.add(dirLight);

var loader = new THREE.CubeTextureLoader();
loader.setCrossOrigin("");
loader.setPath('https://threejs.org/examples/textures/cube/pisa/');

var cubeTexture = loader.load([
  'px.png', 'nx.png',
  'py.png', 'ny.png',
  'pz.png', 'nz.png'
]);

scene.background = cubeTexture;

function createBoxWithRoundedEdges(width, height, depth, radius0, smoothness) {
  let shape = new THREE.Shape();
  let eps = 0.00001;
  let radius = radius0 - eps;
  shape.absarc(eps, eps, eps, -Math.PI / 2, -Math.PI, true);
  shape.absarc(eps, height - radius * 2, eps, Math.PI, Math.PI / 2, true);
  shape.absarc(width - radius * 2, height - radius * 2, eps, Math.PI / 2, 0, true);
  shape.absarc(width - radius * 2, eps, eps, 0, -Math.PI / 2, true);
  let geometry = new THREE.ExtrudeBufferGeometry(shape, {
    depth: depth - radius0 * 2,
    bevelEnabled: true,
    bevelSegments: smoothness * 2,
    steps: 1,
    bevelSize: radius,
    bevelThickness: radius0,
    curveSegments: smoothness
  });

  geometry.center();

  return geometry;
}

for (let i = 0; i < 1; i++) {

  const textureLoader = new THREE.TextureLoader();
  const sunTexture = textureLoader.load("https://i.ibb.co/3srcxqp/Sol.jpg");
  /* sunTexture.encoding = THREE.sRGBEncoding;
      sunTexture.anisotropy = 16; */

  let cubeMat = new THREE.MeshStandardMaterial({
    //color: Math.random() * 0x777777 + 0x777777,
    emissiveMap: sunTexture,
    emissive: 0xffffff,
    envMap: cubeTexture,
    side: THREE.DoubleSide,
    roughness:...