PM2Ring/Crate3D.html

## Crate3D.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
</head>
<body>
<canvas id="can3js" width="640" height="320"></canvas><br>
<button id="stopstart">Start</button><br>
</body>
<script type="module">
// Find the latest version by visiting https://unpkg.com/three
import * as THREE from 'https://unpkg.com/three@0.126.1/build/three.module.js';
import {OrbitControls} from 'https://unpkg.com/three@0.126.1/examples/jsm/controls/OrbitControls.js';
import {StereoEffect} from 'https://unpkg.com/three@0.126.1/examples/jsm/effects/StereoEffect.js';

var camera, scene, thing, renderer, effect, go = false, pending = false;

function init() {
    const can = document.getElementById('can3js');
    scene = new THREE.Scene();
    scene.background = new THREE.Color(0xeeeeff);

    camera = new THREE.PerspectiveCamera(70, can.clientWidth / can.clientHeight, 0.01, 10);
    camera.position.z = 7;
    scene.add(camera);

    const light = new THREE.DirectionalLight(0xffffff, 1);
    light.position.set(-1, 7, 10);
    scene.add(light);
    camera.add(light);

    thing = new THREE.Object3D();
    scene.add(thing);

    const cube = new THREE.BoxGeometry(1, 1, 1);
    const materials = [];
    for (var i=0; i<6; i++) {
        const m = new THREE.MeshPhongMaterial();
        m.color.setHSL(i/6, 0.75, .475);
        materials.push(m);
    }

    for (var z=-1; z<2; z++)
        for (var y=-1; y<2; y++)
            for (var x=-1; x<2; x++) {
        if (Math.abs(x) + Math.abs(y) + Math.abs(z) < 2)
            continue;
        const mesh = new THREE.Mesh(cube, materials);
        mesh.position.set(x, y, z);
        thing.add(mesh);
    }

    renderer = new THREE.WebGLRenderer({canvas: can, antialias: true});
    renderer.setSize(can.clientWidth, can.clientHeight);

    const controls = new OrbitControls(camera, renderer.domElement);
    controls.addEventListener('change', animate);

    effect = new StereoEffect(renderer);
    effect.setSize(can.clientWidth, can.clientHeight);
    document.querySelector('#stopstart').onclick = stopstart;
    animate();
}

function rotate() {
    thing.rotation.y += 0.01;
    animate();
}

function render() {
    // renderer.render(scene, camera);
    effect.render(scene, camera);
    pending = false;
    if (go) rotate();
}

function animate() {
    if (!pending) {
        requestAnimationFrame(render);
        pending = true;
    }
}

function stopstart() {
    go = !go;
    if (go) rotate();
    this.innerHTML = go ? "Stop" : "Start";
}

init();
</script>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
	</head>
	<body>
	<canvas id="can3js" width="640" height="320"></canvas><br>
	<button id="stopstart">Start</button><br>
	</body>
	<script type="module">
	// Find the latest version by visiting https://unpkg.com/three
	import * as THREE from 'https://unpkg.com/three@0.126.1/build/three.module.js';
	import {OrbitControls} from 'https://unpkg.com/three@0.126.1/examples/jsm/controls/OrbitControls.js';
	import {StereoEffect} from 'https://unpkg.com/three@0.126.1/examples/jsm/effects/StereoEffect.js';

	var camera, scene, thing, renderer, effect, go = false, pending = false;

	function init() {
	const can = document.getElementById('can3js');
	scene = new THREE.Scene();
	scene.background = new THREE.Color(0xeeeeff);

	camera = new THREE.PerspectiveCamera(70, can.clientWidth / can.clientHeight, 0.01, 10);
	camera.position.z = 7;
	scene.add(camera);

	const light = new THREE.DirectionalLight(0xffffff, 1);
	light.position.set(-1, 7, 10);
	scene.add(light);
	camera.add(light);

	thing = new THREE.Object3D();
	scene.add(thing);

	const cube = new THREE.BoxGeometry(1, 1, 1);
	const materials = [];
	for (var i=0; i<6; i++) {
	const m = new THREE.MeshPhongMaterial();
	m.color.setHSL(i/6, 0.75, .475);
	materials.push(m);
	}

	for (var z=-1; z<2; z++)
	for (var y=-1; y<2; y++)
	for (var x=-1; x<2; x++) {
	if (Math.abs(x) + Math.abs(y) + Math.abs(z) < 2)
	continue;
	const mesh = new THREE.Mesh(cube, materials);
	mesh.position.set(x, y, z);
	thing.add(mesh);
	}

	renderer = new THREE.WebGLRenderer({canvas: can, antialias: true});
	renderer.setSize(can.clientWidth, can.clientHeight);

	const controls = new OrbitControls(camera, renderer.domElement);
	controls.addEventListener('change', animate);

	effect = new StereoEffect(renderer);
	effect.setSize(can.clientWidth, can.clientHeight);
	document.querySelector('#stopstart').onclick = stopstart;
	animate();
	}

	function rotate() {
	thing.rotation.y += 0.01;
	animate();
	}

	function render() {
	// renderer.render(scene, camera);
	effect.render(scene, camera);
	pending = false;
	if (go) rotate();
	}

	function animate() {
	if (!pending) {
	requestAnimationFrame(render);
	pending = true;
	}
	}

	function stopstart() {
	go = !go;
	if (go) rotate();
	this.innerHTML = go ? "Stop" : "Start";
	}

	init();
	</script>
	</html>