three+oimo实现三维布娃娃落地碰撞试验效果代码-html代码-BFW代码库

代码语言：html

所属分类：三维

代码描述：three+oimo实现三维布娃娃落地碰撞试验效果代码，可集中投放和放开投放，还可设置数量及碰撞监测开关。

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  

  
  
<style>
* {  margin: 0; padding: 0; border: 0;}
body { background-color: #252627; overflow: hidden; color: #eeeeee; font-family: monospace; font-size: 11px; }
input{ margin:0; padding:4px; }
#interface{ position: absolute; left:10px; top:10px; width:456px; height:20px; }
#info{ pointer-events:none; position: absolute; left:10px; top:50px; width: 400px; height: 400px; }
#my_image{ position: absolute; display:none }
</style>


  
  
</head>

<body>
  <img id="my_image" />
<div id='container'></div>
<div id='interface'>
    <input type="button" value="demo 1" onClick=populate(1)>
    <input type="button" value="demo 2" onClick=populate(2)>
    <input type="number" name="quantity" min="1" max="120" value="32"  id='MaxNumber'>
    <input type="submit" onClick=populate()>
    <input type="button" value="collision off" onClick=switchCollision() id="col">
    <input type="number" name="gravity" min="-20" max="20" value="-10" id='gravity' onChange=gravity() >
</div>
<div id='info'></div>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/three.oimo.min.js"></script>
      <script  >
// three var
var camera, scene, light, renderer, container, center;
var meshs = [];
var grounds = [];
var geoBox, geoSphere, geoSphere2, geoCylinder, geoCylinder2;
var matBox, matSphere, matBoxSleep, matSphereSleep, matGround, matBoxSleep2, matBox2, matHead;

// navigation var 
var camPos = { horizontal: 90, vertical: 75, distance: 200, automove: false };
var mouse = { ox: 0, oy: 0, h: 0, v: 0, mx: 0, my: 0, down: false, over: false, moving: true };
var ToRad = Math.PI / 180;

//oimo var
var world;
var bodys = [];
var joints = [];

var ToRad = Math.PI / 180;

var type = 1;
var collision = false;
var bgColor = 0x252627;

init();
//loop();

function init() {

  renderer = new THREE.WebGLRenderer({ precision: "mediump", antialias: false });
  renderer.setSize(window.innerWidth, window.innerHeight);
  renderer.setClearColor(bgColor, 1);
  renderer.shadowMapEnabled = true;
  renderer.gammaInput = true;
  renderer.gammaOutput = true;

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

  camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 3000);
  center = new THREE.Vector3(0, 50, 0);
  moveCamera();

  scene = new THREE.Scene();
  scene.fog = new THREE.Fog(bgColor, 500, 1000);
  scene.add(new THREE.AmbientLight(bgColor));

  light = new THREE.DirectionalLight(0xd6e8f2, 1.5);
  light.position.copy(Orbit(center, 45, 20, 600));
  var d = 500;
  light.castShadow = true;
  light.shadowCameraVisible = false;

  light.shadowMapWidth = 1024;
  light.shadowMapHeight = 1024;
  light.shadowCameraLeft = -d;
  light.shadowCameraRight = d;
  light.shadowCameraTop = d;
  light.shadowCameraBottom = -d;
  light.shadowCameraFar = 800;
  light.shadowCameraNear = 300;
  light.shadowDarkness = 0.5;

  scene.add(light);

  geoCylinder = new THREE.CylinderGeometry(0.5, 0.5, 1, 16);
  geoCylinder2 = new THREE.CylinderGeometry(0.5, 0.5, 1, 16);
  geoCylinder2.applyMatrix(new THREE.Matrix4().makeRotationZ(Math.PI / 2));
  geoSphere = new THREE.SphereGeometry(1, 20, 10);
  geoSphere2 = new THREE.SphereGeometry(0.5, 10, 6);
  geoBox = new THREE.BoxGeometry(1, 1, 1);

  matSphere = new THREE.MeshPhongMaterial({ map: basicTexture(0), name: 'sph', transparent: true, opacity: 0.8, shininess: 100, specular: 0xffffff });
  matHead = new THREE.MeshPhongMaterial({ color: 0xffffff, name: 'sphHH', shininess: 100, specular: 0xffffff });
  matBox = new THREE.MeshPhongMaterial({ map: basicTexture(2), name: 'box', shininess: 100, specular: 0xffffff });
  matBox2 = new THREE.MeshPhongMaterial({ map: basicTexture(2, 1), name: 'box2', shininess: 100, specular: 0xffffff });
  matSphereSleep = new THREE.MeshLambertMaterial({ map: basicTexture(1), name: 'ssph', transparent: true, opacity: 0.9 });
  matBoxSleep = new THREE.MeshLambertMaterial({ map: basicTexture(3), name: 'sbox' });
  matBoxSleep2 = new THREE.MeshLambertMaterial({ map: basicTexture(3, 1), name: 'sbox2' });
  matGround = new THREE.MeshBasicMaterial({ color: bgColor });

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

  populate(1);

  // 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

  loop();
}

function addStaticBox(size, position, rotation) {

  var mesh = new THREE.Mesh(new THREE.CubeGeometry(size[0], size[1], size[2]), matGround);
  mesh.position.set(position[0], position[1], position[2]);
  mesh.rotation.set(rotation[0] * ToRad, rotation[1] * ToRad, rotation[2] * ToRad);
  scene.add(mesh);
  grounds.push(mesh);
  mesh.castShadow = false;
  mesh.receiveShadow = true;

}

function addThreeMesh(size, position, rotation, color, type) {

  var mesh, mat, m2;
  if (color === 1) {mat = matSphere;} else
  if (color === 2) {mat = matBox2;} else
  {mat = matBox;}
  if (type === 'sphere') {
    mesh = new THREE.Mesh(geoSphere, mat);
    m2 = new THREE.Mesh(geoSphere2, matHead);
    mesh.add(m2);
  } else
  if (type === 'cylinder') {mesh = new THREE.Mesh(geoCylinder, mat);} else
  if (type === 'cylinder2') {mesh = new THREE.Mesh(geoCylinder2, mat);} else
  {mesh = new THREE.Mesh(geoBox, mat);}
  mesh.scale.set(size[0], size[1], size[2]);
  if (position) mesh.position.set(position[0], position[1], position[2]);
  if (rotation) mesh.rotation.set(rotation[0] * ToRad, rotation[1] * ToRad, rotation[2] * ToRad);
  scene.add(mesh);
  mesh.castShadow = true;
  mesh.receiveShadow = true;
  return mesh;

}

function switchCollision() {

  var but = document.getElementById("col");
  if (collision) {collision = false;but.value = "collision off";} else
  {collision = true;but.value = "collision on";}
  populate();

}

function populate(n) {

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

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

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

  var ground;

  if (type === 1) {
    ground = new OIMO.Body({ size: [1000, 40, 1000], pos: [0, -20, 0], world: world });
    addStaticBox([1000, 40, 1000], [0, -20, 0], [0, 0, 0]);
  } else {
    ground = new OIMO.Body({ size: [400, 40, 400], pos: [0, -20, 0], world: world });
    addStaticBox([400, 40, 400], [0, -20, 0], [0, 0, 0]);
  }

  var i = max;
  var j = 0;
  var k = 0;
  var l = 0;
  var m = 0;
  var px, py, pz;
  var spring = [2, 0.3];


  while (i--) {
    l++;

    if (type === 1) {
      px = -450 + l * 100;
      py = 100;
      pz = -350 + m * 100;
      if (l > 7) {m++;l = 0;}
    } else {
      px = 0;
      py = 200 + i * 150;
      pz = 0;
    }


    bodys[j + 0] = new OIMO.Body({ type: "box", size: [20, 10, 15], pos: [px, py - 20, pz], move: true, world: world, name: 'pelvis' + j });
    meshs[j + 0] = addThreeMesh([20, 10, 15], null, null, 0, 'cylinder');

    bodys[j + 1] = new OIMO.Body({ type: "box", size: [20, 10, 15], pos: [px, py - 10, pz], move: true, world: world, name: 'spine1_' + j });
    meshs[j + 1] = addThreeMesh([20, 10, 15], null, null, 0, 'cylinder');

    bodys[j + 2] = new OIMO.Body({ type: "box", size: [20, 10, 15], pos: [px, py, pz], move: true, world: world, name: 'spine2_' + j });
    meshs[j + 2] = addThreeMesh([20, 10, 15], null, null, 0, 'cylinder');

    bodys[j + 3] = new OIMO.Body({ type: "box", size: [20, 10, 15], pos: [px, py + 10, pz], move: true, world: world, name: 'spine3_' + j });
    meshs[j + 3] = addThreeMesh([20, 10, 15], null, null, 0, 'cylinder');

    bodys[j + 4] = new OIMO.Body({ type: "sphere", size: [10, 10, 10], pos: [px, py + 30, pz], move: true, world: world, name: 'head' + j });
    meshs[j + 4] = addThreeMesh([10, 10, 10], null, null, 1, 'sphere');

    joints[k + 0] = new OIMO.Link({ body1: 'pelvis' + j, body2: 'spine1_' + j, pos1: [0, 5, 0], pos2: [0, -5, 0], min: 2, max: 20, collision: collision, world: world, spring: spring });
    joints[k + 1] = new OIMO.Link({ body1: 'spine1_' + j, body2: 'spine2_' + j, pos1: [0, 5, 0], pos2: [0, -5, 0], min: 2, max: 20, collision: collision, world: world, spring: spring });
    joints[k + 2] = new OIMO.Link({ body1: 'spine2_' + j, body2: 'spine3_' + j, pos1: [0, 5, 0], pos2: [0, -5, 0], min: 2, max: 20, collision: collision, world: world, spring: spring });
    joints[k + 3] = new OIMO.Link({ body1: 'spine3_' + j, body2: 'head' + j, pos1: [0, 5, 0], pos2: [0, -10, 0], min: 2, max: 20, collision: collision, world: world, spring: spring });

    //arm

    bodys[j + 5] = new OIMO.Body({ type: "box", size: [20, 10, 10], pos: [px - 20, py + 8, pz], rot: [0, 0, 20], move: true, world: world, name: 'L_arm' + j });
    meshs[j + 5] = addThreeMesh(.........完整代码请登录后点击上方下载按钮下载查看