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&q.........完整代码请登录后点击上方下载按钮下载查看