三维卧室建设动画效果-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
          ? (treeIsh.updateMatrix(),
            (this.matrix = treeIsh.matrix.clone()),
            treeIsh.geometry)
          : void 0;
      _ref = geometry.faces;
      _fn = function (face, i) {
        var faceVertexUvs,
          idx,
          polygon,
          vIndex,
          vName,
          vertex,
          _j,
          _len1,
          _ref1,
          _ref2;
        faceVertexUvs =
          (_ref1 = geometry.faceVertexUvs) != null ? _ref1[0][i] : void 0;
        if (faceVertexUvs == null) {
          faceVertexUvs = [
            new THREE.Vector2(),
            new THREE.Vector2(),
            new THREE.Vector2(),
            new THREE.Vector2()
          ];
        }
        polygon = new ThreeBSP.Polygon();
        _ref2 = ["a", "b", "c", "d"];
        for (vIndex = _j = 0, _len1 = _ref2.length; _j < _len1; vIndex = ++_j) {
          vName = _ref2[vIndex];
          if ((idx = face[vName]) != null) {
            vertex = geometry.vertices[idx];
            vertex = new ThreeBSP.Vertex(
              vertex.x,
              vertex.y,
              vertex.z,
              face.vertexNormals[0],
              new THREE.Vector2(
                faceVertexUvs[vIndex].x,
                faceVertexUvs[vIndex].y
              )
            );
            vertex.applyMatrix4(_this.matrix);
            polygon.vertices.push(vertex);
          }
        }
        return polygons.push(polygon.calculateProperties());
      };
      for (i = _i = 0, _len = _ref.length; _i < _len; i = ++_i) {
        face = _ref[i];
        _fn(face, i);
      }
      return new ThreeBSP.Node(polygons);
    };

    ThreeBSP.prototype.toMesh = function (material) {
      var geometry,
        mesh,
        _this = this;
      if (material == null) {
        material = new THREE.MeshNormalMaterial();
      }
      geometry = this.toGeometry();
      return returning(
        (mesh = new THREE.Mesh(geometry, material)),
        function () {
          mesh.position.getPositionFromMatrix(_this.matrix);
          return mesh.rotation.setFromRotationMatrix(_this.matrix);
        }
      );
    };

    ThreeBSP.prototype.toGeometry = function () {
      var geometry,
        matrix,
        _this = this;
      matrix = new THREE.Matrix4().getInverse(this.matrix);
      return returning((geometry = new THREE.Geometry()), function () {
        var face,
          idx,
          polyVerts,
          polygon,
          v,
          vertUvs,
          verts,
          _i,
          _len,
          _ref,
          _results;
        _ref = _this.tree.allPolygons();
        _results = [];
        for (_i = 0, _len = _ref.length; _i < _len; _i++) {
          polygon = _ref[_i];
          polyVerts = (function () {
            var _j, _len1, _ref1, _results1;
            _ref1 = polygon.vertices;
            _results1 = [];
            for (_j = 0, _len1 = _ref1.length; _j < _len1; _j++) {
              v = _ref1[_j];
              _results1.push(v.clone().applyMatrix4(matrix));
            }
            return _results1;
          })();
          _results.push(
            (function () {
              var _j, _ref1, _results1;
              _results1 = [];
              for (
                idx = _j = 2, _ref1 = polyVerts.length;
                2 <= _ref1 ? _j < _ref1 : _j > _ref1;
                idx = 2 <= _ref1 ? ++_j : --_j
              ) {
                verts = [polyVerts[0], polyVerts[idx - 1], polyVerts[idx]];
                vertUvs = (function () {
                  var _k, _len1, _ref2, _ref3, _results2;
                  _results2 = [];
                  for (_k = 0, _len1 = verts.length; _k < _len1; _k++) {
                    v = verts[_k];
                    _results2.push(
                      new THREE.Vector2(
                        (_ref2 = v.uv) != null ? _ref2.x : void 0,
                        (_ref3 = v.uv) != null ? _ref3.y : void 0
                      )
                    );
                  }
                  return _results2;
                })();
                face = (function (func, args, ctor) {
                  ctor.prototype = func.prototype;
                  var child = new ctor(),
                    result = func.apply(child, args);
                  return Object(result) === result ? result : child;
                })(
                  THREE.Face3,
                  __slice
                    .call(
                      (function () {
                        var _k, _len1, _results2;
                        _results2 = [];
                        for (_k = 0, _len1 = verts.length; _k < _len1; _k++) {
                          v = verts[_k];
                          _results2.push(geometry.vertices.push(v) - 1);
                        }
                        return _results2;
                      })()
                    )
                    .concat([polygon.normal.clone()]),
                  function () {}
                );
                geometry.faces.push(face);
                _results1.push(geometry.faceVertexUvs[0].push(vertUvs));
              }
              return _results1;
            })()
          );
        }
        return _results;
      });
    };

    ThreeBSP.prototype.subtract = function (other) {
      var them, us, _ref;
      (_ref = [this.tree.clone(), other.tree.clone()]),
        (us = _ref[0]),
        (them = _ref[1]);
      us.invert().clipTo(them);
      them.clipTo(us).invert().clipTo(us).invert();
      return new ThreeBSP(us.build(them.allPolygons()).invert(), this.matrix);
    };

    ThreeBSP.prototype.union = function (other) {
      var them, us, _ref;
      (_ref = [this.tree.clone(), other.tree.clone()]),
        (us = _ref[0]),
        (them = _ref[1]);
      us.clipTo(them);
      them.clipTo(us).invert().clipTo(us).invert();
      return new ThreeBSP(us.build(them.allPolygons()), this.matrix);
    };

    ThreeBSP.prototype.intersect = function (other) {
      var them, us, _ref;
      (_ref = [this.tree.clone(), other.tree.clone()]),
        (us = _ref[0]),
        (them = _ref[1]);
      them.clipTo(us.invert()).invert().clipTo(us.clipTo(them));
      return new ThreeBSP(us.build(them.allPolygons()).invert(), this.matrix);
    };

    return ThreeBSP;
  })();

  ThreeBSP.Vertex = (function (_super) {
    __extends(Vertex, _super);

    function Vertex(x, y, z, normal, uv) {
      this.normal = normal != null ? normal : new THREE.Vector3();
      this.uv = uv != null ? uv : new THREE.Vector2();
      this.interpolate = __bind(this.interpolate, this);
      this.lerp = __bind(this.lerp, this);
      Vertex.__super__.constructor.call(this, x, y, z);
    }

    Vertex.prototype.clone = function () {
      return new ThreeBSP.Vertex(
        this.x,
        this.y,
        this.z,
        this.normal.clone(),
        this.uv.clone()
      );
    };

    Vertex.prototype.lerp = function (v, alpha) {
      var _this = this;
      return returning(
        Vertex.__super__.lerp.apply(this, arguments),
        function () {
          _this.uv.add(v.uv.clone().sub(_this.uv).multiplyScalar(alpha));
          return _this.normal.lerp(v, alpha);
        }
      );
    };

    Vertex.prototype.interpolate = function () {
      var args, _ref;
      args = 1 <= arguments.length ? __slice.call(arguments, 0) : [];
      return (_ref = this.clone()).lerp.apply(_ref, args);
    };

    return Vertex;
  })(THREE.Vector3);

  ThreeBSP.Polygon = (function () {
    function Polygon(vertices, normal, w) {
      this.vertices = vertices != null ? vertices : [];
      this.normal = normal;
      this.w = w;
      this.subdivide = __bind(this.subdivide, this);
      this.tessellate = __bind(this.tessellate, this);
      this.classifySide = __bind(this.classifySide, this);
      this.classifyVertex = __bind(this.classifyVertex, this);
      this.invert = __bind(this.invert, this);
      this.clone = __bind(this.clone, this);
      this.calculateProperties = __bind(this.calculateProperties, this);
      if (this.vertices.length) {
        this.calculateProperties();
      }
    }

    Polygon.prototype.calculateProperties = function () {
      var _this = this;
      return returning(this, function () {
        var a, b, c, _ref;
        (_ref = _this.vertices), (a = _ref[0]), (b = _ref[1]), (c = _ref[2]);
        _this.normal = b.clone().sub(a).cross(c.clone().sub(a)).normalize();
        return (_this.w = _this.normal.clone().dot(a));
      });
    };

    Polygon.prototype.clone = function () {
      var v;
      return new ThreeBSP.Pol.........完整代码请登录后点击上方下载按钮下载查看