多米诺骨牌 - 踏得网

使用Three.js 和 Oimo.js模拟多米诺骨牌动效

three

《three.js如何实现贴图模糊效果 - 使用canvas》申请公开！

第三方库
作品简介 2112
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

var DOT_SIZE = 16;
var X_START_POS = 0;
var Y_START_POS = 0;

// ‥‥‥‥‥‥‥‥‥‥‥‥‥□□□
// ‥‥‥‥‥‥〓〓〓〓〓‥‥□□□
// ‥‥‥‥‥〓〓〓〓〓〓〓〓〓□□
// ‥‥‥‥‥■■■□□■□‥■■■
// ‥‥‥‥■□■□□□■□□■■■
// ‥‥‥‥■□■■□□□■□□□■
// ‥‥‥‥■■□□□□■■■■■‥
// ‥‥‥‥‥‥□□□□□□□■‥‥
// ‥‥■■■■■〓■■■〓■‥‥‥
// ‥■■■■■■■〓■■■〓‥‥■
// □□■■■■■■〓〓〓〓〓‥‥■
// □□□‥〓〓■〓〓□〓〓□〓■■
// ‥□‥■〓〓〓〓〓〓〓〓〓〓■■
// ‥‥■■■〓〓〓〓〓〓〓〓〓■■
// ‥■■■〓〓〓〓〓〓〓‥‥‥‥‥
// ‥■‥‥〓〓〓〓‥‥‥‥‥‥‥‥
var dataSet = [
    "BK","BK","BK","BK","BK","BK","BK","BK","BK","BK","BK","BK","BK","BG","BG","BG",
    "BK","BK","BK","BK","BK","BK","RD","RD","RD","RD","RD","BK","BK","BG","BG","BG",
    "BK","BK","BK","BK","BK","RD","RD","RD","RD","RD","RD","RD","RD","RD","BG","BG",
    "BK","BK","BK","BK","BK","BR","BR","BR","BG","BG","BR","BG","BK","RD","RD","RD",
    "BK","BK","BK","BK","BR","BG","BR","BG","BG","BG","BR","BG","BG","RD","RD","RD",
    "BK","BK","BK","BK","BR","BG","BR","BR","BG","BG","BG","BR","BG","BG","BG","RD",
    "BK","BK","BK","BK","BR","BR","BG","BG","BG","BG","BR","BR","BR","BR","RD","BK",
    "BK","BK","BK","BK","BK","BK","BG","BG","BG","BG","BG","BG","BG","RD","BK","BK",
    "BK","BK","RD","RD","RD","RD","RD","BL","RD","RD","RD","BL","RD","BK","BK","BK",
    "BK","RD","RD","RD","RD","RD","RD","RD","BL","RD","RD","RD","BL","BK","BK","BR",
    "BG","BG","RD","RD","RD","RD","RD","RD","BL","BL","BL","BL","BL","BK","BK","BR",
    "BG","BG","BG","BK","BL","BL","RD","BL","BL","YL","BL","BL","YL","BL","BR","BR",
    "BK","BG","BK","BR","BL","BL","BL","BL","BL","BL","BL","BL","BL","BL","BR","BR",
    "BK","BK","BR","BR","BR","BL","BL","BL","BL","BL","BL","BL","BL","BL","BR","BR",
    "BK","BR","BR","BR","BL","BL","BL","BL","BL","BL","BL","BK","BK","BK","BK","BK",
    "BK","BR","BK","BK","BL","BL","BL","BL","BK","BK","BK","BK","BK","BK","BK","BK"
];

function getRgbColor(colorType)
{
    var colorHash = {
        //"BK":"#000000", // black
        "BK":"#DCAA6B", // cardbord color
        "WH":"#FFFFFF", // white
        "BG":"#FFCCCC", // beige
        "BR":"#800000", // brown
        "RD":"#FF0000", // red
        "YL":"#FFFF00", // yellow
        "GN":"#00FF00", // green
        "WT":"#00FFFF", // water
        "BL":"#0000FF", // blue
        "PR":"#800080"  // purple
    };
    return colorHash[colorType];
}

// three var
var camera, scene, light, renderer, container, center;
var meshs = [];
var geoBox, geoSphere;
var matBox, matSphere, matBoxSleep, matSphereSleep;

var camPos = { horizontal: 40, vertical: 60, distance: 400, automove: false };
var mouse = { ox:0, oy:0, h:0, v:0, mx:0, my:0, down:false, over:false, moving:true };

//oimo var
var world;
var G = -10, nG = -10;
var wakeup = false;
var bodys = [];

var fps=0, time, time_prev=0, fpsint = 0;
var ToRad = Math.PI / 180;
var type=2;

function init() {

// three init
    renderer = new THREE.WebGLRenderer({
        precision: "mediump",
        antialias: false,
        clearColor: 0x585858,
        clearAlpha: 0
    });
    renderer.setClearColor(0x000, 1);
    renderer.setSize(window.innerWidth, window.innerHeight);

container = document.getElementById("container");
    container.appendChild(renderer.domElement);

camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 1, 1000);
    camera.position.set(0, 150, 300);
    center = new THREE.Vector3();
    camera.lookAt(center);

scene = new THREE.Scene();

//scene.add( new THREE.AmbientLight( 0x383838 ) );

light = new THREE.DirectionalLight(0xffffff, 1.3);
    light.position.set(0.3, 1, 0.5);
    scene.add(light);

//add ground mesh
    var mat = new THREE.MeshLambertMaterial({
        color: 0x151515
    });
    var geo0 = new THREE.CubeGeometry(100, 40, 400);
    var geo1 = new THREE.CubeGeometry(400, 40, 400);

var mground1 = new THREE.Mesh(geo1, mat);
    mground1.position.y = -50;
    scene.add(mground1);

geoSphere = new THREE.SphereGeometry(1, 20, 10);
    geoBox = new THREE.CubeGeometry(1, 1, 1);

matSphere = new THREE.MeshLambertMaterial({
        map: basicTexture(0),
        name: 'sph'
    });
    matBox = new THREE.MeshLambertMaterial({
        map: basicTexture(2),
        name: 'box'
    });
    matSphereSleep = new THREE.MeshLambertMaterial({
        map: basicTexture(1),
        name: 'ssph'
    });
    matBoxSleep = new THREE.MeshLambertMaterial({
        map: basicTexture(3),
        name: 'sbox'
    });

// oimo init
    world = new OIMO.World();
    populate(1);

// loop
    setInterval(loop, 1000 / 60);

// events
    window.addEventListener('resize', onWindowResize, false);
    container.addEventListener('mousemove', onMouseMove, false);
    container.addEventListener('mousedown', onMouseDown, false);
    container.addEventListener('mouseout', onMouseUp, false);
    container.addEventListener('mouseup', onMouseUp, false);
    container.addEventListener('mousewheel', onMouseWheel, false);
    container.addEventListener('DOMMouseScroll', onMouseWheel, false); // firefox

}

function populate(n) {

//var max = document.getElementById("MaxNumber").value;
    var max = 256;

if (n === 1) {
        type = 1;
    } else if (n === 2) {
        type = 2;
    } else if (n === 3) {
        type = 3;
    }

// reset old
    clearMesh();
    world.clear();

//add ground
    //    var ground = new OIMO.Body({size:[100, 40, 400], pos:[0,-20,0], world:world});
    var ground2 = new OIMO.Body({
        size: [400, 40, 400],
        pos: [0, -50, 0],
        world: world
    });

//add object
    var w = DOT_SIZE * 0.2;
    var h = DOT_SIZE * 1.5;
    var d = DOT_SIZE;

var color;
    var i;
    for (var x = 0; x < 16; x++) {
        for (var z = 0; z < 16; z++) {
            i = x + (z) * 16;
            color = getRgbColor(dataSet[i]);
            y = 0;
            bodys[i] = new OIMO.Body({
                type: 'box',
                size: [w, h, d],
                pos: [-120 + x * DOT_SIZE, y * DOT_SIZE, -120 + z * DOT_SIZE * 1.2],
                move: true,
                world: world
            });
            var material = new THREE.MeshLambertMaterial({
                color: color
            });
            meshs[i] = new THREE.Mesh(geoBox, material);
            meshs[i].scale.set(w, h, d);
            scene.add(meshs[i]);
        }
    }
    var size = bodys.length;
    for (i = 0; i < 16; i++) {
        w = DOT_SIZE;
        h = DOT_SIZE;
        d = DOT_SIZE;
        x = 0;
        y = 2;
        z = i;
        bodys[size + i] = new OIMO.Body({
            type: 'box',
            size: [w, h, d],
            pos: [-125 + x * DOT_SIZE, y * DOT_SIZE, -120 + z * DOT_SIZE * 1.2],
            move: true,
            world: world
        });
        var material = new THREE.MeshLambertMaterial({
            color: "#f00"
        });
        meshs[size + i] = new THREE.Mesh(geoBox, material);
        meshs[size + i].scale.set(w, h, d);
        scene.add(meshs[size + i]);
    }
}

function clearMesh() {
    var i = meshs.length;
    while (i--) {
        scene.remove(meshs[i]);
    }
}

function onWindowResize() {
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
    renderer.setSize(window.innerWidth, window.innerHeight);
}

// MAIN LOOP
function loop() {

world.step();

var p, r, m, x, y, z;
    var mtx = new THREE.Matrix4();
    var i = bodys.length;
    var mesh;
    wakeup = false;

if (G !== nG) {
        wakeup = true;
        G = nG;
    }

while (i--) {
        var body = bodys[i].body;
        mesh = meshs[i];
        if (wakeup) bodys[i].body.awake();
        if (!body.sleeping) {
            m = body.getMatrix();
            mtx.fromArray(m);
            mesh.position.setFromMatrixPosition(mtx);
            mesh.rotation.setFromRotationMatrix(mtx);

// change material
            if (mesh.material.name === 'sbox') mesh.material = matBox;
            if (mesh.material.name === 'ssph') mesh.material = matSphere;
        } else {
            if (mesh.material.name === 'box') mesh.material = matBoxSleep;
            if (mesh.material.name === 'sph') mesh.material = matSphereSleep;
        }
    }

renderer.render(scene, camera);
}

function moveCamera() {
    camera.position.copy(Orbit(center, camPos.horizontal, camPos.vertical, camPos.distance));
    camera.lookAt(center);
}

function gravity(g) {
    nG = document.getElementById("gravity").value;
    world.gravity = new OIMO.Vec3(0, nG, 0);
}

// TEXTURE
function basicTexture(n) {
    var canvas = document.createElement('canvas');
    canvas.width = canvas.height = 64;
    var ctx = canvas.getContext('2d');
    var colors = [];
    if (n === 0) { // sphere
        colors[0] = "#58AA80";
        colors[1] = "#58FFAA";
    }
    if (n === 1) { // sphere sleep
        colors[0] = "#383838";
        colors[1] = "#38AA80";
    }
    if (n === 2) { // box
        colors[0] = "#AA8058";
        colors[1] = "#FFAA58";
    }
    if (n === 3) { // box sleep
        colors[0] = "#383838";
        colors[1] = "#AA8038";
    }
    ctx.fillStyle = colors[0];
    ctx.fillRect(0, 0, 64, 64);
    ctx.fillStyle = colors[1];
    ctx.fillRect(0, 0, 32, 32);
    ctx.fillRect(32, 32, 32, 32);

var tx = new THREE.Texture(canvas);
    tx.needsUpdate = true;
    return tx;
}

// MATH
function Orbit(origine, horizontal, vertical, distance) {
    var p = new THREE.Vector3();
    var phi = vertical * ToRad;
    var theta = horizontal * ToRad;
    p.x = (distance * Math.sin(phi) * Math.cos(theta)) + origine.x;
    p.z = (distance * Math.sin(phi) * Math.sin(theta)) + origine.z;
    p.y = (distance * Math.cos(phi)) + origine.y;
    return p;
}

// MOUSE 
function onMouseDown(e) {
    e.preventDefault();
    mouse.ox = e.clientX;
    mouse.oy = e.clientY;
    mouse.h = camPos.horizontal;
    mouse.v = camPos.vertical;
    mouse.down = true;
}

function onMouseUp(e) {
    mouse.down = false;
    document.body.style.cursor = 'auto';
}

function onMouseMove(e) {
    e.preventDefault();
    if (mouse.down) {
        document.body.style.cursor = 'move';
        camPos.horizontal = ((e.clientX - mouse.ox) * 0.3) + mouse.h;
        camPos.vertical = (-(e.clientY - mouse.oy) * 0.3) + mouse.v;
        moveCamera();
    }
}

init();

编译

CSS

HTML

使用Three.js 和 Oimo.js模拟多米诺骨牌动效

three

编辑器支持Emmet

快捷键

使用Three.js 和 Oimo.js模拟多米诺骨牌动效

three

Three.js 圆环形状的多米诺骨牌

three.js使用多个渐变torus模拟光环光晕

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：