threejs-test

by xiaoming110

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/100/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
<div id="app"></div>

CSS

* {
  margin: 0;
  padding: 0;
}
html,
body,
#app {
  width: 100%;
  height: 100%;
}
#app {
  position: relative;
  cursor: pointer;
  overflow: hidden;
}

Babel + JSX

"use strict";

/** INIT ENV **/

let container = document.querySelector("#app")
let { clientWidth: w, clientHeight: h } = container

let renderer = new THREE.WebGLRenderer()
let scene    = new THREE.Scene()
let camera   = new THREE.PerspectiveCamera(60, w / h, 1, 1000)
let orbit    = new THREE.OrbitControls(camera, container)


container.appendChild(renderer.domElement)
renderer.setSize(w, h)
camera.position.set(-150, 150, -150)
orbit.target        = new THREE.Vector3(1, 0, 0)
orbit.enableDamping = true
orbit.rotateSpeed   = 0.17
orbit.dampingFactor = 0.17

window.addEventListener("resize", function windowResize(e) {
	let { clientWidth: w, clientHeight: h } = container
  renderer.setSize(w, h)
  camera.aspect = w / h
  camera.updateProjectionMatrix()
})

function animate() {
	requestAnimationFrame(animate)
  renderer.render(scene, camera)
  orbit.update()
}

/** MAIN CODE **/

function genOrientedMat({ texture, face }) {
  return new THREE.ShaderMaterial({
    side: THREE.DoubleSide,
    uniforms: {
      texture: { type: "t", value: texture },
    },
    vertexShader: `
      varying vec2 vUv;

      void main() {
        vUv = uv;

        gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
      }
    `,
    fragmentShader: `
      uniform sampler2D texture;
      varying vec2 vUv;

      const float PI = 3.14159265359;
      const float PI2 = PI * 2.0;
      const float PI_DIV_2 = PI / 2.0;

      const int RIGHT  = 0;
      const int LEFT   = 1;
      const int UP     = 2;
      const int DOWN   = 3;
      const int FRONT  = 4;
      const int BACK   = 5;

      vec3 uvToXYZ(vec2 uv, int faceIndex) {
        float a = 2.0 * uv.x;
        float b = 2.0 * uv.y;
        vec3 result;

        if(faceIndex == RIGHT) {
          result = vec3(1.0 - a, 1.0, 1.0 - b);
        } else if(faceIndex == LEFT) {
          result = vec3(a - 1.0, -1.0, 1.0 - b);
        } else if(faceIndex == UP) {
          result = vec3(1.0 - b, a - 1.0, -1.0);
     ...