Cannon.js + Three.js 应用程序基础模板

Cannon.js物理引擎简单示例, three.js版本为68

webgl, template

《aframe.js 3d拼图代码详解》作品已被踏得网收录！

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

HTML
CSS
JavaScript
Result

编译

JavaScript

var world, mass, body, shape, timeStep = 1 / 60,
    camera, scene, renderer, geometry, material, mesh;

initThree();
initCannon();
animate();

function initCannon() {

world = new CANNON.World();
    world.gravity.set(0, -9.8, 0);
    world.broadphase = new CANNON.NaiveBroadphase();
    world.solver.iterations = 10;

// Ground plane
    var plane = new CANNON.Plane();
    var groundBody = new CANNON.Body({
        mass: 0
    });
    groundBody.addShape(plane);
    groundBody.quaternion.setFromAxisAngle(new CANNON.Vec3(1, 0, 0), -Math.PI / 2);
    world.add(groundBody);

shape = new CANNON.Box(new CANNON.Vec3(1, 1, 1));
    body = new CANNON.Body({
        mass: 1
    });
    body.position.set(0, 10, 0)
    body.addShape(shape);
    world.addBody(body);

}

function initThree() {

scene = new THREE.Scene();

camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 1000);
    camera.position.y = 2;
    camera.position.z = 5;
    scene.add(camera);

// lights
    var light, materials;
    scene.add(new THREE.AmbientLight(0x666666));

light = new THREE.DirectionalLight(0xffffff, 1.75);
    light.position.set(0, 2, 10);
    light.castShadow = true;
    scene.add(light);

// floor
    geometry = new THREE.PlaneGeometry(100, 100, 1, 1);
    material = new THREE.MeshLambertMaterial({
        color: 0x777777
    });
    let floor = new THREE.Mesh(geometry, material);
    floor.rotateX(-Math.PI / 2)
    scene.add(floor);

geometry = new THREE.BoxGeometry(2, 2, 2);
    material = new THREE.MeshBasicMaterial({
        color: 0xff0000,
        wireframe: false
    });

mesh = new THREE.Mesh(geometry, material);
    mesh.position.y = 10;
    scene.add(mesh);

renderer = new THREE.WebGLRenderer({
        antialias: true
    });
    renderer.setSize(window.innerWidth, window.innerHeight);
    renderer.gammaInput = true;
    renderer.gammaOutput = true;
    renderer.shadowMapEnabled = true;

document.body.appendChild(renderer.domElement);

}

function animate() {

requestAnimationFrame(animate);
    updatePhysics();
    render();

}

function updatePhysics() {

// Step the physics world
    world.step(timeStep);

// Copy coordinates from Cannon.js to Three.js
    mesh.position.copy(body.position);
    mesh.quaternion.copy(body.quaternion);

}

function render() {

renderer.render(scene, camera);

}

编译

CSS

HTML

Cannon.js物理引擎简单示例, three.js版本为68

webgl, template

编辑器支持Emmet

快捷键

Cannon.js物理引擎简单示例, three.js版本为68

webgl, template

Three.js + GSAP + Cannon 物体掉落粉碎动画

WebGL Three.js + Cannon.js实现的3D十字关卡

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：