SOURCE

console 命令行工具 X clear

                    
>
console
import * as $ from '//unpkg.com/three@0.116.1/build/three.module.js'
import { OrbitControls } from '//unpkg.com/three@0.116.1/examples/jsm/controls/OrbitControls.js'
import { SceneUtils } from '//unpkg.com/three@0.116.1/examples/jsm/utils/SceneUtils'

// ----
// Boot
// ----

const renderer = new $.WebGLRenderer({ antialias: false });
const scene = new $.Scene();
const camera = new $.PerspectiveCamera(75, 2, .1, 1000);
const controls = new OrbitControls(camera, renderer.domElement);
window.addEventListener('resize', () => {
    const { clientWidth, clientHeight } = renderer.domElement;
    renderer.setSize(clientWidth, clientHeight, false);
    camera.aspect = clientWidth / clientHeight;
    camera.updateProjectionMatrix();
});
document.body.prepend(renderer.domElement);
window.dispatchEvent(new Event('resize'));
renderer.setAnimationLoop(t => {
    renderer.render(scene, camera);
    controls.update();
    animate(t);
});

// ----
// Main
// ---- 

renderer.shadowMap.enabled = true;
scene.background = new $.Color('white');
camera.position.set(15, -20, 15);
controls.autoRotate = true;
controls.autoRotateSpeed = 0.5;

const light = new $.PointLight('white', 1);
light.position.set(0, 0, 0);
light.castShadow = true;
light.shadow.camera.near = .1;
light.shadow.camera.far = 100;
light.shadow.mapSize.set(1024, 1024);
scene.add(light);

const canvas = document.createElement('canvas');
canvas.width = 256;
canvas.height = 256;
const ctx = canvas.getContext('2d');
ctx.fillStyle = 'white';
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.globalCompositeOperation = 'destination-out';

const map = new $.Texture(canvas);
map.needsUpdate = true;
const dMat = new $.MeshDistanceMaterial({ alphaMap: map, alphaTest: 1 });
const mat0 = new $.MeshLambertMaterial({ map, alphaTest: 1, side: $.BackSide });
const mat1 = new $.MeshLambertMaterial({ map, alphaTest: 1, side: $.FrontSide });
const geom = new $.BoxGeometry(1, 1, 1);
const I = 9;
for (let i = 0; i < I; ++i) {
    const obj = SceneUtils.createMultiMaterialObject(geom, [mat0, mat1]);
    obj.traverse(o => {
        if (o.type == 'Mesh') {
            o.castShadow = true;
            o.receiveShadow = true;
            o.customDistanceMaterial = dMat;
        }
    });
    obj.scale.setScalar((i + 1) / I * 3);
    obj.rotation.y = i / I * 3.14;
    scene.add(obj);
}

{ //// ROOM
    const geom = new $.BoxGeometry(50, 50, 50, 10, 10, 10);
    const mat0 = new $.MeshLambertMaterial({ side: $.BackSide });
    const mesh0 = new $.Mesh(geom, mat0);
    mesh0.receiveShadow = true;
    scene.add(mesh0);
}

const R = (l, g) => g + (l - g * 2) * Math.random();
let nLine = 500;
function animate(t) {
    if (nLine) {
        ctx.lineTo(R(canvas.width, 1), R(canvas.height, 1));
        ctx.stroke();
        map.needsUpdate = true;
        --nLine;
    }
}
a(href='//codepen.io/ycw' target='_blank') Interior
canvas {
    width: 100%;
    height: 100vh;
    display: block;
}

a { 
    position: fixed;
    top: 0;
    left: 0;
    color: #eee;
    padding: 5vmin;
}