console 命令行工具 X clear

console

// Fill an almost-rectangular polygon with crosswalk pattern.

// Prepare environment
//
const w = window.innerWidth;
const h = window.innerHeight;

const canvas = document.createElement("canvas");
document.body.append(canvas);

const renderer = new THREE.WebGLRenderer({ antialias: true, canvas });
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(w, h);

const scene = new THREE.Scene();
scene.background = new THREE.Color("#000000");

const camera = new THREE.PerspectiveCamera(60, w / h, 0.1, 10000);
camera.up.set(0, 1, 0);
camera.position.set(0, 0, 30);
camera.lookAt(0, 0, 0);

const debugElem = new THREE.Object3D();
{
    const gridHelper = new THREE.GridHelper(100, 100, new THREE.Color("#808080"), new THREE.Color("#808080"));
    gridHelper.rotateX(- Math.PI / 2)
    debugElem.add(gridHelper);

    debugElem.add(new THREE.AxesHelper(1));
}
scene.add(debugElem);

// Process crosswalk
//

// Make some crosswalks
const crosswalk0 = [];
crosswalk0.push(new THREE.Vector2(0, 0));
crosswalk0.push(new THREE.Vector2(4, 2));
crosswalk0.push(new THREE.Vector2(4, 3));
crosswalk0.push(new THREE.Vector2(3, 3));
crosswalk0.push(new THREE.Vector2(-1, 2));

const crosswalk1 = [];
crosswalk1.push(new THREE.Vector2(10, 10));
crosswalk1.push(new THREE.Vector2(20, 10));
crosswalk1.push(new THREE.Vector2(20, 15));
crosswalk1.push(new THREE.Vector2(10, 15));

scene.add(compileCrosswalk(crosswalk0));
scene.add(compileCrosswalk(crosswalk1));

function compileCrosswalk(contour) {
    const CROSSWALK_DENSITY = 2.0;

    // Find principal direction (assumming the first edge)
    const dir = contour[1].clone().sub(contour[0]);
    const rotation = dir.angle();

    // Load the texture
    // Note: It should be optimized such that only one texture is created and
    // shared by multiple instances, but I haven't find a way around.
    const tex = new THREE.TextureLoader().load("https://ZhujinLi.github.io/hosting/jsrun/crosswalk_pattern.png")
    tex.wrapS = tex.wrapT = THREE.RepeatWrapping;

    // Rotate and scale UV coordinates
    tex.matrixAutoUpdate = false;
    tex.matrix.setUvTransform(0, 0, CROSSWALK_DENSITY, 1, rotation, 0, 0);

    const shape = new THREE.Shape(contour);
    const geo = new THREE.ShapeGeometry(shape);
    const mtl = new THREE.MeshBasicMaterial({ map: tex, color: 0xffffff, transparent: true });
    const mesh = new THREE.Mesh(geo, mtl);
    return mesh;
}

render();

function render() {
    requestAnimationFrame(render);
    renderer.render(scene, camera);
};

<html>
    <body>
    </body>
</html>

本项目引用的自定义外部资源

three.min.js