三维卧室建设动画效果-html代码-BFW代码库

三维卧室建设动画效果

代码语言：html

所属分类：三维

代码描述：三维卧室建设动画效果

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

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<style>
body {
  margin: 0;
  overflow: hidden;
  background: #f6cbcd;
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: center;
          justify-content: center;
  -webkit-box-align: center;
          align-items: center;
  align-content: center;
}
/* Name Badge */
html,
body {
  margin: 0;
  padding: 0;
  overflow: hidden;
}
#name-card-container {
  position: fixed;
  bottom: 0px;
  height: 38px;
  width: 100%;
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: center;
          justify-content: center;
}
#name-card {
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: center;
          justify-content: center;
  font-family: Avenir;
  font-size: 14px;
  font-weight: 500;
  line-height: 38px;
  border-radius: 4px 4px 0 0;
  overflow: hidden;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1), 0 0 2px rgba(0, 0, 0, 0.2);
}
#name-card > div.dark-background {
  background: #1d1e22;
  padding: 0 10px 0 20px;
  height: 100%;
  color: #fff;
}
#name-card > div.light-background {
  background: #fff;
  padding: 0 20px 0 10px;
  height: 100%;
}
#name-card span.emoji {
  font-size: 18px;
}
#name-card a {
  text-decoration: none;
}
#name-card a:hover {
  text-decoration: underline;
}
#name-card a:visited {
  text-decoration: none;
}
#name-card div.dark-background a {
  color: #fff;
}
#name-card div.light-background a {
  color: #000;
}
</style>

</head>
<body translate="no">
<canvas id="artboard"></canvas>

<script type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/three.110.js"></script>
<script type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/gsap.3.3.1.js"></script>

<script >
// Generated by CoffeeScript 1.6.3
(function () {
  var BACK,
    COPLANAR,
    EPSILON,
    FRONT,
    SPANNING,
    returning,
    __bind = function (fn, me) {
      return function () {
        return fn.apply(me, arguments);
      };
    },
    __slice = [].slice,
    __hasProp = {}.hasOwnProperty,
    __extends = function (child, parent) {
      for (var key in parent) {
        if (__hasProp.call(parent, key)) child[key] = parent[key];
      }
      function ctor() {
        this.constructor = child;
      }
      ctor.prototype = parent.prototype;
      child.prototype = new ctor();
      child.__super__ = parent.prototype;
      return child;
    };

  EPSILON = 1e-5;

  COPLANAR = 0;

  FRONT = 1;

  BACK = 2;

  SPANNING = 3;

  returning = function (value, fn) {
    fn();
    return value;
  };

  window.ThreeBSP = (function () {
    function ThreeBSP(treeIsh, matrix) {
      this.matrix = matrix;
      this.intersect = __bind(this.intersect, this);
      this.union = __bind(this.union, this);
      this.subtract = __bind(this.subtract, this);
      this.toGeometry = __bind(this.toGeometry, this);
      this.toMesh = __bind(this.toMesh, this);
      this.toTree = __bind(this.toTree, this);
      if (this.matrix == null) {
        this.matrix = new THREE.Matrix4();
      }
      this.tree = this.toTree(treeIsh);
    }

    ThreeBSP.prototype.toTree = function (treeIsh) {
      var face,
        geometry,
        i,
        polygons,
        _fn,
        _i,
        _len,
        _ref,
        _this = this;
      if (treeIsh instanceof ThreeBSP.Node) {
        return treeIsh;
      }
      polygons = [];
      geometry =
        treeIsh instanceof THREE.Geometry
          ? treeIsh
          : treeIsh instanceof THREE.Mesh
   .........完整代码请登录后点击上方下载按钮下载查看