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;
    overflow: hidden;
}
</style>


  
</head>

<body translate="no">
  <div id='container'></div>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/three.67.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/oimo.min.js"></script>
      <script >
var DOT_SIZE = 16;
var X_START_POS = 0;
var Y_START_POS = 0;

var dataSet = [
"BK", "BK", "BK", "BK", "BK", "BK", "BK", "BK", "BK", "BK", "BK", "BK", "BK", "BG", "BG", "BG",
"BK", "BK", "BK", "BK", "BK", "BK", "RD", "RD", "RD", "RD", "RD", "BK", "BK", "BG", "BG", "BG",
"BK", "BK", "BK", "BK", "BK", "RD", "RD", "RD", "RD", "RD", "RD", "RD", "RD", "RD", "BG", "BG",
"BK", "BK", "BK", "BK", "BK", "BR", "BR", "BR", "BG", "BG", "BR", "BG", "BK", "RD", "RD", "RD",
"BK", "BK", "BK", "BK", "BR", "BG", "BR", "BG", "BG", "BG", "BR", "BG", "BG", "RD", "RD", "RD",
"BK", "BK", "BK", "BK", "BR", "BG", "BR", "BR", "BG", "BG", "BG", "BR", "BG", "BG", "BG", "RD",
"BK", "BK", "BK", "BK", "BR", "BR", "BG", "BG", "BG", "BG", "BR", "BR", "BR", "BR", "RD", "BK",
"BK", "BK", "BK", "BK", "BK", "BK", "BG", "BG", "BG", "BG", "BG", "BG", "BG", "RD", "BK", "BK",
"BK", "BK", "RD", "RD", "RD", "RD", "RD", "BL", "RD", "RD", "RD", "BL", "RD", "BK", "BK", "BK",
"BK", "RD", "RD", "RD", "RD", "RD", "RD", "RD", "BL", "RD", "RD", "RD", "BL", "BK", "BK", "BR",
"BG", "BG", "RD", "RD", "RD", "RD", "RD", "RD", "BL", "BL", "BL", "BL", "BL", "BK", "BK", "BR",
"BG", "BG", "BG", "BK", "BL", "BL", "RD", "BL", "BL", "YL", "BL", "BL", "YL", "BL", "BR", "BR",
"BK", "BG", "BK", "BR", "BL", "BL", "BL", "BL", "BL", "BL", "BL", "BL", "BL", "BL", "BR", "BR",
"BK", "BK", "BR", "BR", "BR", "BL", "BL", "BL", "BL", "BL", "BL", "BL", "BL", "BL", "BR", "BR",
"BK", "BR", "BR", "BR", "BL", "BL", "BL", "BL", "BL", "BL", "BL", "BK", "BK", "BK", "BK", "BK",
"BK", "BR", "BK", "BK", "BL", "BL", "BL", "BL", "BK", "BK", "BK", "BK", "BK", "BK", "BK", "BK"];


function getRgbColor(colorType)
{
  var colorHash = {
    //"BK":"#000000", // black
    "BK": "#DCAA6B", // cardbord color
    "WH": "#FFFFFF", // white
    "BG": "#FFCCCC", // beige
    "BR": "#800000", // brown
    "RD": "#FF0000", // red
    "YL": "#FFFF00", // yellow
    "GN": "#00FF00", // green
    "WT": "#00FFFF", // water
    "BL": "#0000FF", // blue
    "PR": "#800080" // purple
  };
  return colorHash[colorType];
}

// three var
var camera, scene, light, renderer, container, center;
var meshs = [];
var geoBox, geoSphere;
var matBox, matSphere, matBoxSleep, matSphereSleep;

var camPos = { horizontal: 40, vertical: 60, distance: 400, automove: false };
var mouse = { ox: 0, oy: 0, h: 0, v: 0, mx: 0, my: 0, down: false, over: false, moving: true };

//oimo var
var world;
var G = -10,nG = -10;
var wakeup = false;
var bodys = [];

var fps = 0,time,time_prev = 0,fpsint = 0;
var ToRad = Math.PI / 180;
var type = 2;

function init() {

  // three init
  renderer = new THREE.WebGLRenderer({
    precision: "mediump",
    antialias: false,
    clearColor: 0x585858,
    clearAlpha: 0 });

  renderer.setClearColor(0x000, 1);
  renderer.setSize(window.innerWidth, window.innerHeight);

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

  camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 1, 1000);
  camera.position.set(0, 150, 300);
  center = new THREE.Vector3();
  camera.lookAt(center);

  scene = new THREE.Scene();

  //scene.add( new THREE.AmbientLight( 0x383838 ) );

  light = new THREE.DirectionalLight(0xffffff, 1.3);
  light.position.set(0.3, 1, 0.5);
  scene.add(light);

  //add g.........完整代码请登录后点击上方下载按钮下载查看