babylon.js和cannon.js实现可交互弹性绳木架子掉落动画

spring tensegrity with babylonjs

babylon, cannon, physics, 物理

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

var canvas = document.getElementById("renderCanvas");
var engine = new BABYLON.Engine(canvas, true);

function addJoint(box1, box2, mainPivot, connectedPivot) {
  var params = {
    length: 10,
    stiffness: 20,
    damping: 1,
    mainPivot: mainPivot,
    connectedPivot: connectedPivot
  };
  var joint = new BABYLON.PhysicsJoint(BABYLON.PhysicsJoint.SpringJoint, params);
  box1.physicsImpostor.addJoint(box2.physicsImpostor, joint);
  return joint;
}

function createBar(i, scene) {
  var bar = BABYLON.MeshBuilder.CreateBox(
    "bar" + i,
    { height: 16, width: 1, depth: 1 },
    scene
  );
  bar.position.x = (i - 1) * 2;
  bar.position.y = 20;

var material = new BABYLON.StandardMaterial("texture" + i, scene);
  material.diffuseColor = new BABYLON.Color3(0, 1, 0);//Green
  bar.material = material;

bar.physicsImpostor = new BABYLON.PhysicsImpostor(
    bar,
    BABYLON.PhysicsImpostor.BoxImpostor,
    {
      mass: 1,
      nativeOptions: { collisionFilterGroup: 2, collisionFilterMask: 1 },
    },
    scene
  );

var pointerDragBehavior = new BABYLON.PointerDragBehavior({});
  pointerDragBehavior.useObjectOrienationForDragging = false;
  pointerDragBehavior.updateDragPlane = false;
  bar.addBehavior(pointerDragBehavior);

return bar;
}

var createScene = function () {
  var scene = new BABYLON.Scene(engine);

var camera = new BABYLON.ArcRotateCamera("Camera", 0, 0, 10, new BABYLON.Vector3(0, 0, 0), scene);
  camera.setPosition(new BABYLON.Vector3(20, 20, 20));
  camera.attachControl(canvas, true);

var light = new BABYLON.HemisphericLight("light1", new BABYLON.Vector3(-1, 1, -1), scene);
  light.intensity = 0.5;

scene.enablePhysics();

var bars = [
    createBar(0, scene),
    createBar(1, scene),
    createBar(2, scene),
  ];

var linesystem = BABYLON.MeshBuilder.CreateLineSystem(
    "linesystem",
    { lines: lines, updatable: true },
    scene
  );

scene.registerBeforeRender(function() {
    for (var i = 0; i < joints.length; i++) {
      updateLine(joints[i], lines[i]);
    }
    BABYLON.MeshBuilder.CreateLineSystem("lines", {lines: lines, instance: linesystem});    
  });

return scene;
};

var scene = createScene();

engine.runRenderLoop(function () { 
    scene.render();
});

window.addEventListener("resize", function () { 
    engine.resize();
});

编译

CSS

HTML

spring tensegrity with babylonjs

babylon, cannon, physics, 物理

编辑器支持Emmet

快捷键

spring tensegrity with babylonjs

babylon, cannon, physics, 物理

基于babylon.js实现的三维草地模拟

three.js + ammo.js 实现3D物体掉落破碎动画特效

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：