JSFiddle - React, Tailwind, and code Playground

by gree303

HTML

<script src="//cdn.rawgit.com/mrdoob/three.js/master/build/three.min.js"></script>

CSS

body {
	  margin: 0;
}

JavaScript

let camera, scene, renderer;
let meshPhong, meshShader;

function getEnvMap() {
  const r = "https://threejs.org/examples/textures/cube/Bridge2/";
  const urls = [r + "posx.jpg", r + "negx.jpg", r + "posy.jpg", r + "negy.jpg", r + "posz.jpg", r + "negz.jpg"];

  textureCube = new THREE.CubeTextureLoader().load(urls);
  textureCube.format = THREE.RGBFormat;
  textureCube.mapping = THREE.CubeReflectionMapping;
  textureCube.encoding = THREE.sRGBEncoding;
  
  return textureCube;
}

function init() {

  camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 0.01, 10);
  camera.position.z = 1;

  scene = new THREE.Scene();
  
  light = new THREE.AmbientLight('#ffffff');
  scene.add(light);
  
  const envMap = getEnvMap();

  const geometry = new THREE.BoxGeometry(0.2, 0.2, 0.2);

  const materialPhong = new THREE.MeshPhongMaterial({
    envMap,
    color: '#aaaaaa',
  });

  const materialShader = new THREE.ShaderMaterial({
    uniforms: THREE.UniformsUtils.merge([
      THREE.ShaderLib.phong.uniforms,
      {
        diffuse: { value: new THREE.Color('#aaaaaa') },
        // this has no effect
        envMap: { value: envMap }
      },
    ]),
    // this has no effect, just throws (imho valid) warning
    //envMap,
    vertexShader: THREE.ShaderChunk.meshphong_vert,
    fragmentShader: THREE.ShaderChunk.meshphong_frag,
    lights: true,
  });

  meshPhong = new THREE.Mesh(geometry, materialPhong);
  meshPhong.position.setX(-0.5);
  scene.add(meshPhong);

  meshShader = new THREE.Mesh(geometry, materialShader);
  meshShader.position.setX(0.5);
  scene.add(meshShader);

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


}

function animate() {
  requestAnimationFrame(animate);

  meshPhong.rotation.x += 0.01;
  meshPhong.rotation.y += 0.02;

  meshShader.rotation.x += 0.01;
  meshShader.rotation.y += 0.02;

 ...