the screen
center of projection + frustum
wordmark (drag me)
tesseract + chart path (drag me)
world axes

Interactive 3D diagram showing how three.js projects three Schuck Data logos onto the screen. It is a visual aid; every value can be read and changed with the labelled controls in the scene setup panel below.

// the canvas const width = 1920, height = 1080; renderer.setSize(width, height); // the lens + view const camera = new THREE.PerspectiveCamera(75, width/height, 5.2, 14); camera.position.set(0, 0, 5); camera.lookAt(0, 0, 0); // wordmark wordmark.position.set(0, 0, -5); wordmark.scale.setScalar(0.7); // tesseract (chart path highlighted) tesseract.position.set(0, 1.5, -4.5); tesseract.scale.setScalar(0.7);