zachgoldstein / penroseTriangle

TorontoJS Worshop Nov 2018 Code - A penrose triangle illusion in JS

JS Workshop November 2018

Goals

• Build a basic threejs scene with a rotating cube.
• Make a penrose triangle: https://gifer.com/en/3Zu9
• Animate it so the geometry is revealed

References:

• https://codepen.io/quentinhocde/pen/qEvvba
• https://gifer.com/en/3Zu9

High-level steps:

• Add basic scene with camera, box, and light.
• Style box so it looks decent (monument valley styling)
• Add different geometry so it looks like a penrose triange.
• Add animation to reveal geometry

Code-along steps:

• Step 0: https://codepen.io/zachgoldstein/pen/LXRXVw
• Step 1: https://codepen.io/zachgoldstein/pen/VVKEyN
• Step 2: https://codepen.io/zachgoldstein/pen/YRGJMz
• Step 3: https://codepen.io/zachgoldstein/pen/qQaJpQ
• Step 4: https://codepen.io/zachgoldstein/pen/ZmpmzR

Deps

• https://cdnjs.cloudflare.com/ajax/libs/three.js/r71/three.min.js
• https://cdnjs.cloudflare.com/ajax/libs/gsap/1.16.1/TweenMax.min.js