使用Physi.js插件（Three.js）实现的物体碰撞检测

Physi.js是基于Three.js的基本物理运动学辅助计算插件。使用了ammo.js。Ammo.js是Bullet引擎的JS移植。Bullet是一个广泛使用的3D开源物理引擎，支持3D的刚体和软体力学以及碰撞检测。性能表现还是不够好。

webgl, three, collision

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

'use strict';

Physijs.scripts.worker = '/uploads/160701/physijs_worker.js';
Physijs.scripts.ammo = 'http://chandlerprall.github.io/Physijs/examples/js/ammo.js';

var initScene, render, createShape, NoiseGen,
    renderer, render_stats, physics_stats, scene, light, ground, ground_geometry, ground_material, camera;

initScene = function() {
    TWEEN.start();

renderer = new THREE.WebGLRenderer({
        antialias: true
    });
    renderer.setSize(window.innerWidth, window.innerHeight);
    renderer.shadowMapEnabled = true;
    renderer.shadowMapSoft = true;
    document.getElementById('viewport').appendChild(renderer.domElement);

render_stats = new Stats();
    render_stats.domElement.style.position = 'absolute';
    render_stats.domElement.style.top = '0px';
    render_stats.domElement.style.zIndex = 100;
    document.getElementById('viewport').appendChild(render_stats.domElement);

physics_stats = new Stats();
    physics_stats.domElement.style.position = 'absolute';
    physics_stats.domElement.style.top = '50px';
    physics_stats.domElement.style.zIndex = 100;
    document.getElementById('viewport').appendChild(physics_stats.domElement);

scene = new Physijs.Scene({
        fixedTimeStep: 1 / 120
    });
    scene.setGravity(new THREE.Vector3(0, -30, 0));
    scene.addEventListener(
        'update',
        function() {
            scene.simulate(undefined, 2);
            physics_stats.update();
        }
    );

camera = new THREE.PerspectiveCamera(
        35,
        window.innerWidth / window.innerHeight,
        1,
        1000
    );
    camera.position.set(60, 50, 60);
    camera.lookAt(scene.position);
    scene.add(camera);

// Light
    light = new THREE.DirectionalLight(0xFFFFFF);
    light.position.set(20, 40, -15);
    light.target.position.copy(scene.position);
    light.castShadow = true;
    light.shadowCameraLeft = -60;
    light.shadowCameraTop = -60;
    light.shadowCameraRight = 60;
    light.shadowCameraBottom = 60;
    light.shadowCameraNear = 20;
    light.shadowCameraFar = 200;
    light.shadowBias = -.0001
    light.shadowMapWidth = light.shadowMapHeight = 2048;
    light.shadowDarkness = .7;
    scene.add(light);

// Materials
    ground_material = Physijs.createMaterial(
        new THREE.MeshLambertMaterial({
            map: THREE.ImageUtils.loadTexture('/uploads/161101/grass.png')
        }),
        .8, // high friction
        .4 // low restitution
    );
    ground_material.map.wrapS = ground_material.map.wrapT = THREE.RepeatWrapping;
    ground_material.map.repeat.set(2.5, 2.5);

// Ground
    NoiseGen = new SimplexNoise;

ground_geometry = new THREE.PlaneGeometry(75, 75, 50, 50);
    for (var i = 0; i < ground_geometry.vertices.length; i++) {
        var vertex = ground_geometry.vertices[i];
        vertex.z = NoiseGen.noise(vertex.x / 10, vertex.y / 10) * 2;
    }
    ground_geometry.computeFaceNormals();
    ground_geometry.computeVertexNormals();

// If your plane is not square as far as face count then the HeightfieldMesh
    // takes two more arguments at the end: # of x faces and # of y faces that were passed to THREE.PlaneMaterial
    ground = new Physijs.HeightfieldMesh(
        ground_geometry,
        ground_material,
        0, // mass
        50,
        50
    );
    ground.rotation.x = Math.PI / -2;
    ground.receiveShadow = true;
    scene.add(ground);

requestAnimationFrame(render);
    scene.simulate();

createShape();
};

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

createShape = (function() {
    var addshapes = true,
        shapes = 0,
        box_geometry = new THREE.CubeGeometry(3, 3, 3),
        sphere_geometry = new THREE.SphereGeometry(1.5, 32, 32),
        cylinder_geometry = new THREE.CylinderGeometry(2, 2, 1, 32),
        cone_geometry = new THREE.CylinderGeometry(0, 2, 4, 32),
        octahedron_geometry = new THREE.OctahedronGeometry(1.7, 1),
        torus_geometry = new THREE.TorusKnotGeometry(1.7, .2, 32, 4),
        doCreateShape;

setTimeout(
        function addListener() {
            var button = document.getElementById('stop');
            if (button) {
                button.addEventListener('click', function() {
                    addshapes = false;
                });
            } else {
                setTimeout(addListener);
            }
        }
    );

doCreateShape = function() {
        var shape, material = new THREE.MeshLambertMaterial({
            opacity: 0,
            transparent: true
        });

switch (Math.floor(Math.random() * 2)) {
            case 0:
                shape = new Physijs.BoxMesh(
                    box_geometry,
                    material
                );
                break;

case 1:
                shape = new Physijs.SphereMesh(
                    sphere_geometry,
                    material,
                    undefined, {
                        restitution: Math.random() * 1.5
                    }
                );
                break;
        }

shape.material.color.setRGB(Math.random() * 100 / 100, Math.random() * 100 / 100, Math.random() * 100 / 100);
        shape.castShadow = true;
        shape.receiveShadow = true;

shape.position.set(
            Math.random() * 30 - 15,
            20,
            Math.random() * 30 - 15
        );

shape.rotation.set(
            Math.random() * Math.PI,
            Math.random() * Math.PI,
            Math.random() * Math.PI
        );

if (addshapes) {
            shape.addEventListener('ready', createShape);
        }
        scene.add(shape);

new TWEEN.Tween(shape.material).to({
            opacity: 1
        }, 500).start();

document.getElementById('shapecount').textContent = (++shapes) + ' shapes created';
    };

return function() {
        setTimeout(doCreateShape, 250);
    };
})();

window.onload = initScene;

编译

CSS

HTML

Physi.js是基于Three.js的基本物理运动学辅助计算插件。使用了ammo.js。Ammo.js是Bullet引擎的JS移植。Bullet是一个广泛使用的3D开源物理引擎，支持3D的刚体和软体力学以及碰撞检测。性能表现还是不够好。

webgl, three, collision

编辑器支持Emmet

快捷键

Physi.js是基于Three.js的基本物理运动学辅助计算插件。使用了ammo.js。Ammo.js是Bullet引擎的JS移植。Bullet是一个广泛使用的3D开源物理引擎，支持3D的刚体和软体力学以及碰撞检测。 性能表现还是不够好。

webgl, three, collision

Pixi.js使用着色器（shader）代码实现的超炫烟雾特效

使用WebGL Three.js实现的3D注解（注释）控件

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：

Physi.js是基于Three.js的基本物理运动学辅助计算插件。使用了ammo.js。Ammo.js是Bullet引擎的JS移植。Bullet是一个广泛使用的3D开源物理引擎，支持3D的刚体和软体力学以及碰撞检测。性能表现还是不够好。