three打造捕捉游戏-html代码-BFW代码库

代码语言：html
所属分类：游戏
代码描述：three打造捕捉游戏，点击左键跳过障碍物
代码标签：游戏
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

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

<style>
@import url("https://fonts.googleapis.com/css?family=Voltaire");
#world {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #dbe6e6;
  overflow: hidden;
}

#gameoverInstructions {
  position: absolute;
  font-family: 'Voltaire', sans-serif;
  font-weight: bold;
  text-transform: uppercase;
  font-size: 120px;
  text-align: center;
  color: #ffc5a2;
  opacity: 0;
  left: 50%;
  top: 50%;
  width: 100%;
  -webkit-transform: translate(-50%, -100%);
          transform: translate(-50%, -100%);
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  -webkit-transition: all 500ms ease-in-out;
  transition: all 500ms ease-in-out;
}
#gameoverInstructions.show {
  opacity: 1;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  -webkit-transition: all 500ms ease-in-out;
  transition: all 500ms ease-in-out;
}

#dist {
  position: absolute;
  left: 50%;
  top: 50px;
  -webkit-transform: translate(-50%, 0%);
          transform: translate(-50%, 0%);
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}

.label {
  position: relative;
  font-family: 'Voltaire', sans-serif;
  text-transform: uppercase;
  color: #ffa873;
  font-size: 12px;
  letter-spacing: 2px;
  text-align: center;
  margin-bottom: 5px;
}

#distValue {
  position: relative;
  text-transform: uppercase;
  color: #dc5f45;
  font-size: 40px;
  font-family: 'Voltaire';
  text-align: center;
}

#credits {
  position: absolute;
  width: 100%;
  margin: auto;
  bottom: 0;
  margin-bottom: 20px;
  font-family: 'Voltaire', sans-serif;
  color: #544027;
  font-size: 12px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  text-align: center;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}

#credits a {
  color: #544027;
}

#credits a:hover {
  color: #dc5f45;
}

#instructions {
  position: absolute;
  width: 100%;
  bottom: 0;
  margin: auto;
  margin-bottom: 50px;
  font-family: 'Voltaire', sans-serif;
  color: #dc5f45;
  font-size: 16px;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-align: center;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}

.lightInstructions {
  color: #5f9042;
}
</style>

</head>
<body translate="no">
<div id="world" />
<div id="gameoverInstructions">
Game Over
</div>
<div id="dist">
<div class="label">distance</div>
<div id="distValue">000</div>
</div>
<div id="instructions">Click to jump<span class="lightInstructions"> — Grab the carrots / avoid the hedgehogs</span></div>


<script type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/three.js"></script>
<script src='http://repo.bfw.wiki/bfwrepo/js/TweenMax.min.js'></script>
<script src='http://repo.bfw.wiki/bfwrepo/js/OrbitControls.js'></script>
<script >
//THREEJS RELATED VARIABLES 

var scene,
camera, fieldOfView, aspectRatio, nearPlane, farPlane,
gobalLight, shadowLight, backLight,
renderer,
container,
controls,
clock;
var delta = 0;
var floorRadius = 200;
var speed = 6;
var distance = 0;
var level = 1;
var levelInterval;
var levelUpdateFreq = 3000;
var initSpeed = 5;
var maxSpeed = 48;
var monsterPos = .65;
var monsterPosTarget = .65;
var floorRotation = 0;
var collisionObstacle = 10;
var collisionBonus = 20;
var gameStatus = "play";
var cameraPosGame = 160;
var cameraPosGameOver = 260;
var monsterAcceleration = 0.004;
var malusClearColor = 0xb44b39;
var malusClearAlpha = 0;
var audio = new Audio('http://repo.bfw.wiki/bfwrepo/sound/5e9e3ec279c9a.mp3');

var fieldGameOver, fieldDistance;

//SCREEN & MOUSE VARIABLES

var HEIGHT,WIDTH,windowHalfX,windowHalfY,
mousePos = {
  x: 0,
  y: 0 };


//3D OBJECTS VARIABLES

var hero;


// Materials
var blackMat = new THREE.MeshPhongMaterial({
  color: 0x100707,
  shading: THREE.FlatShading });


var brownMat = new THREE.MeshPhongMaterial({
  color: 0xb44b39,
  shininess: 0,
  shading: THREE.FlatShading });


var greenMat = new THREE.MeshPhongMaterial({
  color: 0x7abf8e,
  shininess: 0,
  shading: THREE.FlatShading });


var pinkMat = new THREE.MeshPhongMaterial({
  color: 0xdc5f45, //0xb43b29,//0xff5b49,
  shininess: 0,
  shading: THREE.FlatShading });


var lightBrownMat = new THREE.MeshPhongMaterial({
  color: 0xe07a57,
  shading: THREE.FlatShading });


var whiteMat = new THREE.MeshPhongMaterial({
  color: 0xa49789,
  shading: THREE.FlatShading });

var skinMat = new THREE.MeshPhongMaterial({
  color: 0xff9ea5,
  shading: THREE.FlatShading });



// OTHER VARIABLES

var PI = Math.PI;

//INIT THREE JS, SCREEN AND MOUSE EVENTS

function initScreenAnd3D() {

  HEIGHT = window.innerHeight;
  WIDTH = window.innerWidth;
  windowHalfX = WIDTH / 2;
  windowHalfY = HEIGHT / 2;

  scene = new THREE.Scene();

  scene.fog = new THREE.Fog(0xd6eae6, 160, 350);

  aspectRatio = WIDTH / HEIGHT;
  fieldOfView = 50;
  nearPlane = 1;
  farPlane = 2000;
  camera = new THREE.PerspectiveCamera(
  fieldOfView,
  aspectRatio,
  nearPlane,
  farPlane);

  camera.position.x = 0;
  camera.position.z = cameraPosGame;
  camera.position.y = 30;
  camera.lookAt(new THREE.Vector3(0, 30, 0));

  renderer = new THREE.WebGLRenderer({
    alpha: true,
    antialias: true });

  renderer.setPixelRatio(window.devicePixelRatio);
  renderer.setClearColor(malusClearColor, malusClearAlpha);

  renderer.setSize(WIDTH, HEIGHT);
  renderer.shadowMap.enabled = true;

  container = document.getElementById('world');
  container.appendChild(renderer.domElement);

  window.addEventListener('resize', handleWindowResize, false);
  document.addEventListener('mousedown', handleMouseDown, false);
  document.addEventListener("touchend", handleMouseDown, false);

  /*
                                                                 controls = new THREE.OrbitControls(camera, renderer.domElement);
                                                                 //controls.minPolarAngle = -Math.PI / 2; 
                                                                 //controls.maxPolarAngle = Math.PI / 2;
                                                                 //controls.noZoom = true;
                                                                 controls.noPan = true;
                                                                 //*/

  clock = new THREE.Clock();

}

function handleWindowResize() {
  HEIGHT = window.innerHeight;
  WIDTH = window.innerWidth;
  windowHalfX = WIDTH / 2;
  windowHalfY = HEIGHT / 2;
  renderer.setSize(WIDTH, HEIGHT);
  camera.aspect = WIDTH / HEIGHT;
  camera.updateProjectionMatrix();
}


function handleMouseDown(event) {
  if (gameStatus == "play") hero.jump();else
  if (gameStatus == "readyToReplay") {
    replay();
  }
}

function createLights() {
  globalLight = new THREE.AmbientLight(0xffffff, .9);

  shadowLight = new THREE.DirectionalLight(0xffffff, 1);
  shadowLight.position.set(-30, 40, 20);
  shadowLight.castShadow = true;
  shadowLight.shadow.camera.left = -400;
  shadowLight.shadow.camera.right = 400;
  shadowLight.shadow.camera.top = 400;
  shadowLight.shadow.camera.bottom = -400;
  shadowLight.shadow.camera.near = 1;
  shadowLight.shadow.camera.far = 2000;
  shadowLight.shadow.mapSize.width = shadowLight.shadow.mapSize.height = 2048;

  scene.add(globalLight);
  scene.add(shadowLight);

}

function createFloor() {

  floorShadow = new THREE.Mesh(new THREE.SphereGeometry(floorRadius, 50, 50), new THREE.MeshPhongMaterial({
    color: 0x7abf8e,
    specular: 0x000000,
    shininess: 1,
    transparent: true,
    opacity: .5 }));

  //floorShadow.rotation.x = -Math.PI / 2;
  floorShadow.receiveShadow = true;

  floorGrass = new THREE.Mesh(new THREE.SphereGeometry(floorRadius - .5, 50, 50), new THREE.MeshBasicMaterial({
    color: 0x7abf8e }));

  //floor.rotation.x = -Math.PI / 2;
  floorGrass.receiveShadow = false;

  floor = new THREE.Group();
  floor.position.y = -floorRadius;

  floor.add(floorShadow);
  floor.add(floorGrass);
  scene.add(floor);

}

Hero = function () {
  this.status = "running";
  this.runningCycle = 0;
  this.mesh = new THREE.Group();
  this.body = new THREE.Group();
  this.mesh.add(this.body);

  var torsoGeom = new THREE.CubeGeometry(7, 7, 10, 1);

  this.torso = new THREE.Mesh(torsoGeom, brownMat);
  this.torso.position.z = 0;
  this.torso.position.y = 7;
  this.torso.castShadow = true;
  this.body.add(this.torso);

  var pantsGeom = new THREE.CubeGeometry(9, 9, 5, 1);
  this.pants = new THREE.Mesh(pantsGeom, whiteMat);
  this.pants.position.z = -3;
  this.pants.position.y = 0;
  this.pants.castShadow = true;
  this.torso.add(this.pants);

  var tailGeom = new THREE.CubeGeometry(3, 3, 3, 1);
  tailGeom.applyMatrix(new THREE.Matrix4().makeTranslation(0, 0, -2));
  this.tail = new THREE.Mesh(tailGeom, lightBrownMat);
  this.tail.position.z = -4;
  this.tail.position.y = 5;
  this.tail.castShadow = true;
  this.torso.add(this.tail);

  this.torso.rotation.x = -Math.PI / 8;

  var headGeom = new THREE.CubeGeometry(10, 10, 13, 1);

  headGeom.applyMatrix(new THREE.Matrix4().makeTranslation(0, 0, 7.5));
  this.head = new THREE.Mesh(headGeom, brownMat);
  this.head.position.z = 2;
  this.head.position.y = 11;
  this.head.castShadow = true;
  this.body.add(this.head);

  var cheekGeom = new THREE.CubeGeometry(1, 4, 4, 1);
  this.cheekR = new THREE.Mesh(cheekGeom, pinkMat);
  this.cheekR.position.x = -5;
  this.cheekR.position.z = 7;
  this.cheekR.position.y = -2.5;
  this.cheekR.castShadow = true;
  this.head.add(this.cheekR);

  this.cheekL = this.cheekR.clone();
  this.cheekL.position.x = -this.cheekR.position.x;
  this.head.add(this.cheekL);


  var noseGeom = new THREE.CubeGeometry(6, 6, 3, 1);
  this.nose = new THREE.Mesh(noseGeom, lightBrownMat);
  this.nose.position.z = 13.5;
  this.nose.position.y = 2.6;
  this.nose.castShadow = true;
  this.head.add(this.nose);

  var mouthGeom = new THREE.CubeGeometry(4, 2, 4, 1);
  mouthGeom.applyMatrix(new THREE.Matrix4().makeTranslation(0, 0, 3));
  mouthGeom.applyMatrix(new THREE.Matrix4().makeRotationX(Math.PI / 12));
  this.mouth = new THREE.Mesh(mouthGeom, brownMat);
  this.mouth.position.z = 8;
  this.mouth.position.y = -4;
  this.mouth.castShadow = true;
  this.head.add(this.mouth);


  var pawFGeom = new THREE.CubeGeometry(3, 3, 3, 1);
  this.pawFR = new THREE.Mesh(pawFGeom, lightBrownMat);
  this.pawFR.position.x = -2;
  this.pawFR.position.z = 6;
  this.pawFR.position.y = 1.5;
  this.pawFR.castShadow = true;
  this.body.add(this.pawFR);

  this.pawFL = this.pawFR.clone();
  this.pawFL.position.x = -this.pawFR.position.x;
  this.pawFL.castShadow = true;
  this.body.add(this.pawFL);

  var pawBGeom = new THREE.CubeGeometry(3, 3, 6, 1);
  this.pawBL = new THREE.Mesh(pawBGeom, lightBrownMat);
  this.pawBL.position.y = 1.5;
  this.pawBL.position.z = 0;
  this.pawBL.position.x = 5;
  this.pawBL.castShadow = true;
  this.body.add(this.pawBL);

  this.pawBR = this.pawBL.clone();
  this.pawBR.position.x = -this.pawBL.position.x;
  this.pawBR.castShadow = true;
  this.body.add(this.pawBR);

  var earGeom = new THREE.CubeGeometry(7, 18, 2, 1);
  earGeom.vertices[6].x += 2;
  earGeom.vertices[6].z += .5;

  earGeom.vertices[7].x += 2;
  earGeom.vertices[7].z -= .5;

  earGeom.vertices[2].x -= 2;
  earGeom.vertices[2].z -= .5;

  earGeom.vertices[3].x -= 2;
  earGeom.vertices[3].z += .5;
  earGeom.applyMatrix(new THREE.Matrix4().makeTranslation(0, 9, 0));

  this.earL = new THREE.Mesh(earGeom, brownMat);
  this.earL.position.x = 2;
  this.earL.position.z = 2.5;
  this.earL.position.y = 5;
  this.earL.rotation.z = -Math.PI / 12;
  this.earL.castShadow = true;
  this.head.add(this.earL);

  this.earR = this.earL.clone();
  this.earR.position.x = -this.earL.position.x;
  this.earR.rotation.z = -this.earL.rotation.z;
  this.earR.castShadow = true;
  this.head.add(this.earR);

  var eyeGeom = new THREE.CubeGeometry(2, 4, 4);

  this.eyeL = new THREE.Mesh(eyeGeom, whiteMat);
  this.eyeL.position.x = 5;
  this.eyeL.position.z = 5.5;
  this.eyeL.position.y = 2.9;
  this.eyeL.castShadow = true;
  this.head.add(this.eyeL);

  var irisGeom = new THREE.CubeGeometry(.6, 2, 2);

  this.iris = new THREE.Mesh(irisGeom, blackMat);
  this.iris.position.x = 1.2;
  this.iris.position.y = 1;
  this.iris.position.z = 1;
  this.eyeL.add(this.iris);

  this.eyeR = this.eyeL.clone();
  this.eyeR.children[0].position.x = -this.iris.position.x;


  this.eyeR.position.x = -this.eyeL.position.x;
  this.head.add(this.eyeR);

  this.body.traverse(function (object) {
    if (object instanceof THREE.Mesh) {
      object.castShadow = true;
      object.receiveShadow = true;
    }
  });
};

BonusParticles = function () {
  this.mesh = new THREE.Group();
  var bigParticleGeom = new THREE.CubeGeometry(10, 10, 10, 1);
  var smallParticleGeom = new THREE.CubeGeometry(5, 5, 5, 1);
  this.parts = [];
  for (var i = 0; i < 10; i++) {
    var partPink = new THREE.Mesh(bigParticleGeom, pinkMat);
    var partGreen = new THREE.Mesh(smallParticleGeom, greenMat);
    partGreen.scale.set(.5, .5, .5);
    this.parts.push(partPink);
    this.parts.push(partGreen);
    this.mesh.add(partPink);
    this.mesh.add(partGreen);
  }
};

BonusParticles.prototype.explose = function () {
  var _this = this;
  var explosionSpeed = .5;
  for (var i = 0; i < this.parts.length; i++) {
    var tx = -50 + Math.random() * 100;
    var ty = -50 + Math.random() * 100;
    var tz = -50 + Math.random() * 100;
    var p = this.parts[i];
    p.position.set(0, 0, 0);
    p.scale.set(1, 1, 1);
    p.visible = true;
    var s = explosionSpeed + Math.random() * .5;
    TweenMax.to(p.position, s, { x: tx, y: ty, z: tz, ease: Power4.easeOut });
    TweenMax.to(p.scale, s, { x: .01, y: .01, z: .01, ease: Power4.easeOut, onComplete: removeParticle, onCompleteParams: [p] });
  }
};

function removeParticle(p) {
  p.visible = false;
}

Hero.prototype.run = function () {
  this.status = "running";

  var s = Math.min(speed, maxSpeed);

  this.runningCycle += delta * s * .7;
  this.runningCycle = this.runningCycle % (Math.PI * 2);
  var t = this.runningCycle;

  var amp = 4;
  var disp = .2;

  // BODY

  this.body.position.y = 6 + Math.sin(t - Math.PI / 2) * amp;
  this.body.rotation.x = .2 + Math.sin(t - Math.PI / 2) * amp * .1;

  this.torso.rotation.x = Math.sin(t - Math.PI / 2) * amp * .1;
  this.torso.position.y = 7 + Math.sin(t - Math.PI / 2) * amp * .5;

  // MOUTH
  this.mouth.rotation.x = Math.PI / 16 + Math.cos(t) * amp * .05;

  // HEAD
  this.head.position.z = 2 + Math.sin(t - Math.PI / 2) * amp * .5;
  this.head.position.y = 8 + Math.cos(t - Math.PI / 2) * amp * .7;
  this.head.rotation.x = -.2 + Math.sin(t + Math.PI) * amp * .1;

  // EARS
  this.earL.rotation.x = Math.cos(-Math.PI / 2 + t) * (amp * .2);
  this.earR.rotation.x = Math.cos(-Math.PI / 2 + .2 + t) * (amp * .3);

  // EYES
  this.eyeR.scale.y = this.eyeL.scale.y = .7 + Math.abs(Math.cos(-Math.PI / 4 + t * .5)) * .6;

  // TAIL
  this.tail.rotation.x = Math.cos(Math.PI / 2 + t) * amp * .3;

  // FRONT RIGHT PAW
  this.pawFR.position.y = 1.5 + Math.sin(t) * amp;
  this.pawFR.rotation.x = Math.cos(t) * Math.PI / 4;


  this.pawFR.position.z = 6 - Math.cos(t) * amp * 2;

  // FRONT LEFT PAW

  this.pawFL.position.y = 1.5 + Math.sin(disp + t) * amp;
  this.pawFL.rotation.x = Math.cos(t) * Math.PI / 4;


  this.pawFL.position.z = 6 - Math.cos(disp + t) * amp * 2;

  // BACK RIGHT PAW
  this.pawBR.position.y = 1.5 + Math.sin(Math.PI + t) * amp;
  this.pawBR.rotation.x = Math.cos(t + Math.PI * 1.5) * Math.PI / 3;


  this.pawBR.position.z = -Math.cos(Math.PI + t) * amp;

  // BACK LEFT PAW
  this.pawBL.position.y = 1.5 + Math.sin(Math.PI + t) * amp;
  this.pawBL.rotation.x = Math.cos(t + Math.PI * 1.5) * Math.PI / 3;


  this.pawBL.position.z = -Math.cos(Math.PI + t) * amp;


};

Hero.prototype.jump = function () {
  if (this.status == "jumping") return;
  this.status = "jumping";
  var _this = this;
  var totalSpeed = 10 / speed;
  var jumpHeight = 45;

  TweenMax.to(this.earL.rotation, totalSpeed, { x: "+=.3", ease: Back.easeOut });
  TweenMax.to(this.earR.rotation, totalSpeed, { x: "-=.3", ease: Back.easeOut });

  TweenMax.to(this.pawFL.rotation, totalSpeed, { x: "+=.7", ease: Back.easeOut });
  TweenMax.to(this.pawFR.rotation, totalSpeed, { x: "-=.7", ease: Back.easeOut });
  TweenMax.to(this.pawBL.rotation, totalSpeed, { x: "+=.7", ease: Back.easeOut });
  TweenMax.to(this.pawBR.rotation, totalSpeed, { x: "-=.7", ease: Back.easeOut });

  TweenMax.to(this.tail.rotation, totalSpeed, { x: "+=1", ease: Back.easeOut });

  TweenMax.to(this.mouth.rotation, totalSpeed, { x: .5, ease: Back.easeOut });

  TweenMax.to(this.mesh.position, totalSpeed / 2, { y: jumpHeight, ease: Power2.easeOut });
  TweenMax.to(this.mesh.position, totalSpeed / 2, { y: 0, ease: Power4.easeIn, delay: totalSpeed / 2, onComplete: function () {
      //t = 0;
      _this.status = "running";
    } });

};


Monster = function () {

  this.runningCycle = 0;

  this.mesh = new THREE.Group();
  this.body = new THREE.Group();

  var torsoGeom = new THREE.CubeGeometry(15, 15, 20, 1);
  this.torso = new THREE.Mesh(torsoGeom, blackMat);

  var headGeom = new THREE.CubeGeometry(20, 20, 40, 1);
  headGeom.applyMatrix(new THREE.Matrix4().makeTranslation(0, 0, 20));
  this.head = new THREE.Mesh(headGeom, blackMat);
  this.head.position.z = 12;
  this.head.position.y = 2;

  var mouthGeom = new THREE.CubeGeometry(10, 4, 20, 1);
  mouthGeom.applyMatrix(new THREE.Matrix4().makeTranslation(0, -2, 10));
  this.mouth = new THREE.Mesh(mouthGeom, blackMat);
  this.mouth.position.y = -8;
  this.mouth.rotation.x = .4;
  this.mouth.position.z = 4;

  this.heroHolder = new THREE.Group();
  this.heroHolder.position.z = 20;
  this.mouth.add(this.heroHolder);

  var toothGeom = new THREE.CubeGeometry(2, 2, 1, 1);

  toothGeom.vertices[1].x -= 1;
  toothGeom.vertices[4].x += 1;
  toothGeom.vertices[5].x += 1;
  toothGeom.vertices[0].x -= 1;

  for (var i = 0; i < 3; i++) {
    var toothf = new THREE.Mesh(toothGeom, whiteMat);
    toothf.position.x = -2.8 + i * 2.5;
    toothf.position.y = 1;
    toothf.position.z = 19;

    var toothl = new THREE.Mesh(toothGeom, whiteMat);
    toothl.rotation.y = Math.PI / 2;
    toothl.position.z = 12 + i * 2.5;
    toothl.position.y = 1;
    toothl.position.x = 4;

    var toothr = toothl.clone();
    toothl.position.x = -4;

    this.mouth.add(toothf);
    this.mouth.add(toothl);
    this.mouth.add(toothr);
  }

  var tongueGeometry = new THREE.CubeGeometry(6, 1, 14);
  tongueGeometry.applyMatrix(new THREE.Matrix4().makeTranslation(0, 0, 7));

  this.tongue = new THREE.Mesh(tongueGeometry, pinkMat);
  this.tongue.position.z = 2;
  this.tongue.rotation.x = -.2;
  this.mouth.add(this.tongue);

  var noseGeom = new THREE.CubeGeometry(4, 4, 4, 1);
  this.nose = new THREE.Mesh(noseGeom, pinkMat);
  this.nose.position.z = 39.5;
  this.nose.position.y = 9;
  this.head.add(this.nose);

  this.head.add(this.mouth);

  var eyeGeom = new THREE.CubeGeometry(2, 3, 3);

  this.eyeL = new THREE.Mesh(eyeGeom, whiteMat);
  this.eyeL.position.x = 10;
  this.eyeL.position.z = 5;
  this.eyeL.position.y = 5;
  this.eyeL.castShadow = true;
  this.head.add(this.eyeL);

  var irisGeom = new THREE.CubeGeometry(.6, 1, 1);

  this.iris = new THREE.Mesh(irisGeom, blackMat);
  this.iris.position.x = 1.2;
  this.iris.position.y = -1;
  this.iris.position.z = 1;
  this.eyeL.add(this.iris);

  this.eyeR = this.eyeL.clone();
  this.eyeR.children[0].position.x = -this.iris.position.x;
  this.eyeR.position.x = -this.eyeL.position.x;
  this.head.add(this.eyeR);


  var earGeom = new THREE.CubeGeometry(8, 6, 2, 1);
  earGeom.vertices[1].x -= 4;
  earGeom.vertices[4].x += 4;
  earGeom.vertices[5].x += 4;
  earGeom.vertices[5].z -= 2;
  earGeom.vertices[0].x -= 4;
  earGeom.vertices[0].z -= 2;


  earGeom.applyMatrix(new THREE.Matrix4().makeTranslation(0, 3, 0));

  this.earL = new THREE.Mesh(earGeom, blackMat);
  this.earL.position.x = 6;
  this.earL.position.z = 1;
  this.earL.position.y = 10;
  this.earL.castShadow = true;
  this.head.add(this.earL);

  this.earR = this.earL.clone();
  this.earR.position.x = -this.earL.position.x;
  this.earR.rotation.z = -this.earL.rotation.z;
  this.head.add(this.earR);

  var eyeGeom = new THREE.CubeGeometry(2, 4, 4);

  var tailGeom = new THREE.CylinderGeometry(5, 2, 20, 4, 1);
  tailGeom.applyMatrix(new THREE.Matrix4().makeTranslation(0, 10, 0));
  tailGeom.applyMatrix(new THREE.Matrix4().makeRotationX(-Math.PI / 2));
  tailGeom.applyMatrix(new THREE.Matrix4().makeRotationZ(Math.PI / 4));

  this.tail = new THREE.Mesh(tailGeom, blackMat);
  this.tail.position.z = -10;
  this.tail.position.y = 4;
  this.torso.add(this.tail);


  var pawGeom = new THREE.CylinderGeometry(1.5, 0, 10);
  pawGeom.applyMatrix(new THREE.Matrix4().makeTranslation(0, -5, 0));
  this.pawFL = new THREE.Mesh(pawGeom, blackMat);
  this.pawFL.position.y = -7.5;
  this.pawFL.position.z = 8.5;
  this.pawFL.position.x = 5.5;
  this.torso.add(this.pawFL);

  this.pawFR = this.pawFL.clone();
  this.pawFR.position.x = -this.pawFL.position.x;
  this.torso.add(this.pawFR);

  this.pawBR = this.pawFR.clone();
  this.pawBR.position.z = -this.pawFL.position.z;
  this.torso.add(this.pawBR);

  this.pawBL = this.pawBR.clone();
  this.pawBL.position.x = this.pawFL.position.x;
  this.torso.add(this.pawBL);

  this.mesh.add(this.body);
  this.torso.add(this.head);
  this.body.add(this.torso);

  this.torso.castShadow .........完整代码请登录后点击上方下载按钮下载查看