threejs-lesson-utils.js

import * as THREE from 'three';
import { OrbitControls } from '../../examples/jsm/controls/OrbitControls.js';

export const threejsLessonUtils = {
	_afterPrettifyFuncs: [],
	init( options = { threejsOptions: {} } ) {

		if ( this.renderer ) {

			return;

		}

		const canvas = document.createElement( 'canvas' );
		canvas.id = 'c';
		document.body.appendChild( canvas );
		const renderer = new THREE.WebGLRenderer( {
			canvas,
			alpha: true,
			antialias: true,
			powerPreference: 'low-power',
			...options.threejsOptions,
		} );
		this.pixelRatio = window.devicePixelRatio;

		this.renderer = renderer;
		this.elemToRenderFuncMap = new Map();

		const resizeRendererToDisplaySize = ( renderer ) => {

			const canvas = renderer.domElement;
			const width = canvas.clientWidth * this.pixelRatio | 0;
			const height = canvas.clientHeight * this.pixelRatio | 0;
			const needResize = canvas.width !== width || canvas.height !== height;
			if ( needResize ) {

				renderer.setSize( width, height, false );

			}

			return needResize;

		};

		const clearColor = new THREE.Color( '#000' );
		let needsUpdate = true;
		let rafRequestId;
		let rafRunning;

		const render = ( time ) => {

			rafRequestId = undefined;
			time *= 0.001;

			const resized = resizeRendererToDisplaySize( renderer );

			// only update if we drew last time
			// so the browser will not recomposite the page
			// of nothing is being drawn.
			if ( needsUpdate ) {

				needsUpdate = false;

				renderer.setScissorTest( false );
				renderer.setClearColor( clearColor, 0 );
				renderer.clear( true, true );
				renderer.setScissorTest( true );

			}

			this.elementsOnScreen.forEach( elem => {

				const fn = this.elemToRenderFuncMap.get( elem );
				const wasRendered = fn( renderer, time, resized );
				needsUpdate = needsUpdate || wasRendered;

			} );

			if ( needsUpdate ) {

				// maybe there is another way. Originally I used `position: fixed`
				// but the problem is if we can't render as fast as the browser
				// scrolls then our shapes lag. 1 or 2 frames of lag isn't too
				// horrible but iOS would often been 1/2 a second or worse.
				// By doing it this way the canvas will scroll which means the
				// worse that happens is part of the shapes scrolling on don't
				// get drawn for a few frames but the shapes that are on the screen
				// scroll perfectly.
				//
				// I'm using `transform` on the voodoo that it doesn't affect
				// layout as much as `top` since AFAIK setting `top` is in
				// the flow but `transform` is not though thinking about it
				// the given we're `position: absolute` maybe there's no difference?
				const transform = `translateY(${window.scrollY}px)`;
				renderer.domElement.style.transform = transform;

			}

			if ( rafRunning ) {

				startRAFLoop();

			}

		};

		function startRAFLoop() {

			rafRunning = true;
			if ( ! rafRequestId ) {

				rafRequestId = requestAnimationFrame( render );

			}

		}

		this.elementsOnScreen = new Set();
		this.intersectionObserver = new IntersectionObserver( ( entries ) => {

			entries.forEach( entry => {

				if ( entry.isIntersecting ) {

					this.elementsOnScreen.add( entry.target );

				} else {

					this.elementsOnScreen.delete( entry.target );

				}
				// Each entry describes an intersection change for one observed
				// target element:
				//   entry.boundingClientRect
				//   entry.intersectionRatio
				//   entry.intersectionRect
				//   entry.isIntersecting
				//   entry.rootBounds
				//   entry.target
				//   entry.time

			} );
			if ( this.elementsOnScreen.size > 0 ) {

				startRAFLoop();

			} else {

				rafRunning = false;

			}

		} );


	},
	addDiagrams( diagrams ) {

		[ ...document.querySelectorAll( '[data-diagram]' ) ].forEach( ( elem ) => {

			const name = elem.dataset.diagram;
			const info = diagrams[ name ];
			if ( ! info ) {

				throw new Error( `no diagram: ${name}` );

			}

			this.addDiagram( elem, info );

		} );

	},
	addDiagram( elem, info ) {

		this.init();

		const scene = new THREE.Scene();
		let targetFOVDeg = 60;
		const aspect = 1;
		const near = 0.1;
		const far = 50;
		let camera = new THREE.PerspectiveCamera( targetFOVDeg, aspect, near, far );
		camera.position.z = 15;
		scene.add( camera );

		const root = new THREE.Object3D();
		scene.add( root );

		const renderInfo = {
			pixelRatio: this.pixelRatio,
			camera,
			scene,
			root,
			renderer: this.renderer,
			elem,
		};

		const obj3D = info.create( { scene, camera, renderInfo } );
		const promise = ( obj3D instanceof Promise ) ? obj3D : Promise.resolve( obj3D );

		const updateFunctions = [];
		const resizeFunctions = [];

		const settings = {
			lights: true,
			trackball: true,
			// resize(renderInfo) {
			// },
			// update(time, renderInfo) {
			// },
			render( renderInfo ) {

				renderInfo.renderer.render( renderInfo.scene, renderInfo.camera );

			},
		};

		promise.then( ( result ) => {

			const info = result instanceof THREE.Object3D ? {
				obj3D: result,
			} : result;
			if ( info.obj3D ) {

				root.add( info.obj3D );

			}

			if ( info.update ) {

				updateFunctions.push( info.update );

			}

			if ( info.resize ) {

				resizeFunctions.push( info.resize );

			}

			if ( info.camera ) {

				camera = info.camera;
				renderInfo.camera = camera;

			}

			Object.assign( settings, info );
			targetFOVDeg = camera.fov;

			if ( settings.trackball !== false ) {

				const controls = new OrbitControls( camera, elem );
				controls.rotateSpeed = 1 / 6;
				controls.enableZoom = false;
				controls.enablePan = false;
				elem.removeAttribute( 'tabIndex' );
				//resizeFunctions.push(controls.handleResize.bind(controls));
				updateFunctions.push( controls.update.bind( controls ) );

			}

			// add the lights as children of the camera.
			// this is because TrackballControls move the camera.
			// We really want to rotate the object itself but there's no
			// controls for that so we fake it by putting all the lights
			// on the camera so they move with it.
			if ( settings.lights !== false ) {

				camera.add( new THREE.HemisphereLight( 0xaaaaaa, 0x444444, .5 ) );
				const light = new THREE.DirectionalLight( 0xffffff, 1 );
				light.position.set( - 1, 2, 4 - 15 );
				camera.add( light );

			}

		} );

		let oldWidth = - 1;
		let oldHeight = - 1;

		const render = ( renderer, time ) => {

			root.rotation.x = time * .1;
			root.rotation.y = time * .11;

			const rect = elem.getBoundingClientRect();
			if ( rect.bottom < 0 || rect.top > renderer.domElement.clientHeight ||
          rect.right < 0 || rect.left > renderer.domElement.clientWidth ) {

				return false;

			}

			renderInfo.width = rect.width * this.pixelRatio;
			renderInfo.height = rect.height * this.pixelRatio;
			renderInfo.left = rect.left * this.pixelRatio;
			renderInfo.bottom = ( renderer.domElement.clientHeight - rect.bottom ) * this.pixelRatio;

			if ( renderInfo.width !== oldWidth || renderInfo.height !== oldHeight ) {

				oldWidth = renderInfo.width;
				oldHeight = renderInfo.height;
				resizeFunctions.forEach( fn => fn( renderInfo ) );

			}

			updateFunctions.forEach( fn => fn( time, renderInfo ) );

			const aspect = renderInfo.width / renderInfo.height;
			const fovDeg = aspect >= 1
				? targetFOVDeg
				: THREE.MathUtils.radToDeg( 2 * Math.atan( Math.tan( THREE.MathUtils.degToRad( targetFOVDeg ) * .5 ) / aspect ) );

			camera.fov = fovDeg;
			camera.aspect = aspect;
			camera.updateProjectionMatrix();

			renderer.setViewport( renderInfo.left, renderInfo.bottom, renderInfo.width, renderInfo.height );
			renderer.setScissor( renderInfo.left, renderInfo.bottom, renderInfo.width, renderInfo.height );

			settings.render( renderInfo );

			return true;

		};

		this.intersectionObserver.observe( elem );
		this.elemToRenderFuncMap.set( elem, render );

	},
	onAfterPrettify( fn ) {

		this._afterPrettifyFuncs.push( fn );

	},
	afterPrettify() {

		this._afterPrettifyFuncs.forEach( ( fn ) => {

			fn();

		} );

	},
};

window.threejsLessonUtils = threejsLessonUtils;