Portfolio

by jacob_truax

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/101/three.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.2/TweenMax.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.2/TimelineLite.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/utils/Draggable.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>Jacob Truax Portfolio</title>
  <link rel="stylesheet" href="normalize.css">
  <link rel="stylesheet" href="canvas-fix">
  <link rel="stylesheet" href="style.css">

</head>

<body>

<main class="three"></main>

</body>

<script src="portfolio.js"></script>

JavaScript

doThree = function () {
  console.clear();

  const renderer = new THREE.WebGLRenderer({
    anitalias: true
  })
  renderer.setSize(window.innerWidth, window.innerHeight)
  renderer.setPixelRatio(window.devicePixelRatio)
  renderer.setClearColor(0x000000, 1)
  const section = document.querySelector("main.three")
  section.appendChild(renderer.domElement)

  // Scene -------------------------------------------------------
  const scene = new THREE.Scene()
  scene.fog = new THREE.FogExp2(0x000000, 0.00034)

  // Light -------------------------------------------------------
  const light = new THREE.AmbientLight(0xcccccc)
  scene.add(light)

  //const light2 = new THREE.PointLight(0xcccccc, .75, 0)
  const light2 = new THREE.DirectionalLight(0xffffff, 0.5)
  light2.position.set(-1000, 0, -3000)
  scene.add(light2)

  const light3 = new THREE.DirectionalLight(0xffffff, 0.5)
  light3.position.set(1000, 0, -3000)
  scene.add(light3)


  // Camera ------------------------------------------------------
  const camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 0.1, 10000)

  camera.position.z = -2500


  // Texture Loader ----------------------------------------------
  const loader = new THREE.TextureLoader()


  // Shapes ------------------------------------------------------
  var mirrorCube, mirrorCubeCamera; // for mirror material
  var mirrorSphere, mirrorSphereCamera; // for mirror material

  function init () {
  var cubeGeom = new THREE.PlaneGeometry(10000, 12000, 120);
  	mirrorCubeCamera = new THREE.CubeCamera( 0.1, 10000, 1080 );
    mirrorCubeCamera.position.set(0, 1500, 05)

  	scene.add( mirrorCubeCamera );
  	var mirrorCubeMaterial = new THREE.MeshBasicMaterial( { envMap: mirrorCubeCamera.renderTarget.texture } );
  	mirrorCube = new THREE.Mesh( cubeGeom, mirrorCubeMaterial );
  	mirrorCube.position.set(0, -550, -1000)
    mirrorCube.rotation.x = -90 * Math.PI / 180;
  	scene.add(mirrorCube);

    }

  init()

  const...