splitflap

// https://coolors.co/dcd6f7-a6b1e1-b4869f-985f6f-4e4c67
var enclosure_height = 148.786;
var enclosure_height_lower = 82.6451;

var model_base_url = 'https://scottbez1.github.io/splitflap/artifact_snapshot/3d_colored_stl/';

var debug = false;

var canvas = document.getElementById("viewer_canvas");

var scene = new THREE.Scene();
var render_width = canvas.clientWidth;
var render_height = canvas.clientHeight;

scene.fog = new THREE.Fog(0x985F6F, 1200, 4000);
var camera = new THREE.PerspectiveCamera( 35, render_width/render_height, 1, 4000 );
camera.position.set(-400, 200, -400);

var renderer = new THREE.WebGLRenderer({canvas: canvas});

function addShadowedLight(x, y, z, color, intensity, top, right, bottom, left) {
    var directionalLight = new THREE.DirectionalLight( color, intensity );
    directionalLight.position.set( x, y, z );
    scene.add( directionalLight );
    directionalLight.castShadow = true;
    directionalLight.shadow.camera.left = left;
    directionalLight.shadow.camera.right = right;
    directionalLight.shadow.camera.top = top;
    directionalLight.shadow.camera.bottom = bottom;
    directionalLight.shadow.camera.near = 1200;
    directionalLight.shadow.camera.far = 1700;
    directionalLight.shadow.mapSize.width = 512;
    directionalLight.shadow.mapSize.height = 512;

    if (debug) {
        scene.add( new THREE.CameraHelper( directionalLight.shadow.camera ));
    }
}

// Ground
var plane = new THREE.Mesh(
    new THREE.PlaneBufferGeometry(7000, 7000),
    new THREE.MeshPhongMaterial({color: 0x231A22, specular:0x101010})
);
plane.rotation.x = -Math.PI/2;
plane.position.y = -0.1;
plane.receiveShadow = true;
scene.add(plane);

// Lights
scene.add( new THREE.HemisphereLight( 0x443333, 0x111122 ) );
addShadowedLight( 300, 1000, -1000, 0xE6CBE9, 0.9, 150, 100, -50, -100);
addShadowedLight( -300, 1500, -100, 0xF6F1C0, 0.6, 100, 80, -80, -80);

// renderer
renderer.setSize( render_width, render_height);
renderer.setClearColor( scene.fog.color );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.gammaInput = true;
renderer.gammaOutput = true;
renderer.shadowMap.enabled = true;

if (debug) {
    var stats = new Stats();
    stats.showPanel( 0 );
    document.body.appendChild( stats.dom );
}

var render = function () {
    if (debug) {
        stats.begin();
    }

    controls.update();
    renderer.render(scene, camera);

    if (debug) {
        stats.end();
    }
    requestAnimationFrame(render);
};

// Camera Controls
controls = new THREE.OrbitControls( camera, renderer.domElement );
controls.enableZoom = true;
controls.minDistance = 80;
controls.maxDistance = 1300;
controls.validUpdate = function(position, quaternion, target) {
    // Don't allow camera to go below ground
    return position.y > 0 && target.y > 0;
};
controls.autoRotateSpeed = 1.5;
controls.addEventListener('start', function(){
  controls.autoRotate = false;
  $("#banner").fadeOut();
});


var cameraTarget = new THREE.Vector3(0, enclosure_height_lower, 0);
controls.target = cameraTarget;
controls.update();

render();

var expected_models = 0;
var loaded_models = 0;
var loader = new THREE.XHRLoader(THREE.DefaultLoadingManager);
loader.load(model_base_url + 'manifest.json', function(text) {
    var json = JSON.parse(text);
    var keys = Object.keys(json)
    expected_models = keys.length;
    for (var i = 0; i < expected_models; i++) {
        var color = json[keys[i]];
        loadStl(model_base_url + keys[i], new THREE.Color( color[0], color[1], color[2] ).getHex());
    }
});
var loadStl = function(url, color) {
    var loader = new THREE.STLLoader();
    loader.load(url, function(geometry) {
        var material = new THREE.MeshPhongMaterial({
            color: color,
            specular: 0x111111,
            shininess: 10
        });
        var mesh = new THREE.Mesh(geometry, material);

        mesh.position.set(0, enclosure_height_lower, 0);
        mesh.rotation.set(-Math.PI/2, 0, 0);

        mesh.castShadow = true;
        mesh.receiveShadow = true;
        scene.add(mesh);

        loaded_models++;
        if (loaded_models === expected_models) {
            controls.autoRotate = true;
            $("#banner").fadeIn(1200);
        }
    });
};

if (canvas.classList.contains("embed")) {
    window.addEventListener('resize', function () {
        renderer.setSize(window.innerWidth, window.innerHeight);
        camera.aspect = window.innerWidth / window.innerHeight;
        camera.updateProjectionMatrix();
    });
}