threejs-minecraft-40

class Creeper extends THREE.Group {
  constructor( sizeScale, massScale, scene, world ) {
    // ... other code snippet

    this.world = world;

    // ... other code snippet

    this.sizeScale = sizeScale;
    this.massScale = massScale;

    // ... other code snippet

    // Move init here
    this.init();
  }

  // Find and replace this function's content
  init() {
    const sizeScale = this.sizeScale;
    const massScale = this.massScale;

    // Geometries for head, body and foot
    const headGeo = new THREE.BoxGeometry(
      4 * sizeScale,
      4 * sizeScale,
      4 * sizeScale
    );
    const bodyGeo = new THREE.BoxGeometry(
      4 * sizeScale,
      8 * sizeScale,
      2 * sizeScale
    );
    const footGeo = new THREE.BoxGeometry(
      2 * sizeScale,
      3 * sizeScale,
      2 * sizeScale
    );

    // Skin Color
    const textureLoader = new THREE.TextureLoader();
    const faceMap = textureLoader.load( 'img/creeper_face.png' );
    const skinMap = textureLoader.load( 'img/creeper_skin.png' );

    const skinMat = new THREE.MeshPhongMaterial({
      map: skinMap
    });

    const headMaterials = [];
    for( let i = 0; i < 6; i++ ) {
        let map;

        if( i === 4 ) map = faceMap;
        else map = skinMap;

        headMaterials.push(new THREE.MeshPhongMaterial({ map }));
    }

    // head
    this.head = new THREE.Mesh( headGeo, headMaterials );
    this.head.position.set( 0, 12 * sizeScale, 0 );
    // this.head.castShadow = true;
    // this.head.receiveShadow = true;

    const headShape = new CANNON.Box(
      new CANNON.Vec3( 2 * sizeScale, 2 * sizeScale, 2 * sizeScale )
    );

    // body
    this.body = new THREE.Mesh( bodyGeo, skinMat );
    this.body.position.set( 0, 6 * sizeScale, 0 );
    // this.body.castShadow = true;
    // this.body.receiveShadow = true;

    this.headBody = new CANNON.Body({
      mass: 5 * massScale,
      position: new CANNON.Vec3( 0, 12 * sizeScale, 0 )
    });
    this.headBody.addShape( headShape );
    this.headBody.position.copy( this.head.position );
    this.headBody.addEventListener(
      'collide',
      ( event ) => this.onCollide( event )
    );

    const bodyShape = new CANNON.Box(
      new CANNON.Vec3( 2 * sizeScale, 4 * sizeScale, 1 * sizeScale )
    );
    this.bodyBody = new CANNON.Body({
      mass: 10 * massScale,
      position: new CANNON.Vec3( 0, 6 * sizeScale, 0 )
    });
    this.bodyBody.addShape( bodyShape );

    // 4 feet
    this.leftFrontLeg = new THREE.Mesh( footGeo, skinMat );
    // this.leftFrontLeg.castShadow = true;
    // this.leftFrontLeg.receiveShadow = true;
    this.leftFrontLeg.position.set(
      -1 * sizeScale,
      1.5 * sizeScale,
      2 * sizeScale
    );
    this.leftBackLeg = this.leftFrontLeg.clone();
    this.leftBackLeg.position.set(
      -1 * sizeScale,
      1.5 * sizeScale,
      -2 * sizeScale
    );
    this.rightFrontLeg = this.leftFrontLeg.clone();
    this.rightFrontLeg.position.set(
      1 * sizeScale,
      1.5 * sizeScale,
      2 * sizeScale
    );
    this.rightBackLeg = this.leftFrontLeg.clone();
    this.rightBackLeg.position.set(
      1 * sizeScale,
      1.5 * sizeScale,
      -2 * sizeScale
    );

    const footShape = new CANNON.Box(
      new CANNON.Vec3( 1 * sizeScale, 1.5 * sizeScale, 1 * sizeScale )
    );
    this.leftFrontLegBody = new CANNON.Body({
      mass: 10 * massScale,
      position: new CANNON.Vec3( -1 * sizeScale, 1.5 * sizeScale, 2 * sizeScale )
    });
    this.leftFrontLegBody.addShape( footShape );
    this.leftBackLegBody = new CANNON.Body({
      mass: 10 * massScale,
      position: new CANNON.Vec3( -1 * sizeScale, 1.5 * sizeScale, -2 * sizeScale )
    })
    this.leftBackLegBody.addShape( footShape );
    this.rightFrontLegBody = new CANNON.Body({
      mass: 10 * massScale,
      position: new CANNON.Vec3( 1 * sizeScale, 1.5 * sizeScale, 2 * sizeScale )
    });
    this.rightFrontLegBody.addShape( footShape );
    this.rightBackLegBody = new CANNON.Body({
      mass: 10 * massScale,
      position: new CANNON.Vec3( 1 * sizeScale, 1.5 * sizeScale, -2 * sizeScale )
    });
    this.rightBackLegBody.addShape( footShape );

    // Neck joint
    this.neckJoint = new CANNON.LockConstraint( this.headBody, this.bodyBody );

    // Knee joint
    this.leftFrontKneeJoint = new CANNON.LockConstraint(
      this.bodyBody,
      this.leftFrontLegBody
    );
    this.leftBackKneeJoint = new CANNON.LockConstraint(
      this.bodyBody,
      this.leftBackLegBody
    );
    this.rightFrontKneeJoint = new CANNON.LockConstraint(
      this.bodyBody,
      this.rightFrontLegBody
    );
    this.rightBackKneeJoint = new CANNON.LockConstraint(
      this.bodyBody,
      this.rightBackLegBody
    );

    // Combine 4 feet as a group
    this.feet = new THREE.Group();
    this.feet.add(this.leftFrontLeg) // 前腳左
    this.feet.add(this.leftBackLeg) // 後腳左
    this.feet.add(this.rightFrontLeg) // 前腳右
    this.feet.add(this.rightBackLeg) // 後腳右


    // Put head, body and feet into a single group
    this.add( this.head );
    this.add( this.body );
    this.add( this.feet );
    this.name = 'creeper';

    // Here add shadow to creeper
    this.traverse(function( object ) {
      if( object instanceof THREE.Mesh ) {
        object.castShadow = true;
        object.receiveShadow = true;
      }
    });

    // this.scene.add(this);
    this.attach();
  }

  onCollide( event ) {
    this.trigger();
  }

  attach() {
    const world = this.world;
    const scene = this.scene;
    if( !world || !scene ) return;

    scene.add( this );

    world.addBody( this.headBody );
    world.addBody( this.bodyBody );
    world.addBody( this.leftFrontLegBody );
    world.addBody( this.leftBackLegBody );
    world.addBody( this.rightFrontLegBody );
    world.addBody( this.rightBackLegBody );
    world.addConstraint( this.neckJoint );
    world.addConstraint( this.leftFrontKneeJoint );
    world.addConstraint( this.leftBackKneeJoint );
    world.addConstraint( this.rightFrontKneeJoint );
    world.addConstraint( this.rightBackKneeJoint );
  }

  detach() {
    const world = this.world;
    const scene = this.scene;
    if( !world || !scene ) return;

    for( let i=0; i < this.explosions.length; i++ ) {
      this.explosions[i].destroy();
      this.scene.remove( this.explosions[i] );
    }

    this.explosions.length = 0;
    this.isExposed = false;

    scene.remove( this );

    world.removeBody( this.headBody );
    world.removeBody( this.bodyBody );
    world.removeBody( this.leftFrontLegBody );
    world.removeBody( this.leftBackLegBody );
    world.removeBody( this.rightFrontLegBody );
    world.removeBody( this.rightBackLegBody );
    world.removeConstraint( this.neckJoint );
    world.removeConstraint( this.leftFrontKneeJoint );
    world.removeConstraint( this.leftBackKneeJoint );
    world.removeConstraint( this.rightFrontKneeJoint );
    world.removeConstraint( this.rightBackKneeJoint );
  }

  dispose() {
    this.detach();

    this.scene = null;
    this.world = null;
  }

  update() {
    this.head.position.copy( this.headBody.position );
    this.head.quaternion.copy( this.headBody.quaternion );
    this.body.position.copy( this.bodyBody.position );
    this.body.quaternion.copy( this.bodyBody.quaternion );
    this.leftFrontLeg.position.copy( this.leftFrontLegBody.position );
    this.leftFrontLeg.quaternion.copy( this.leftFrontLegBody.quaternion );

    this.leftBackLeg.position.copy( this.leftBackLegBody.position );
    this.leftBackLeg.quaternion.copy( this.leftBackLegBody.quaternion );
    this.rightFrontLeg.position.copy( this.rightFrontLegBody.position );
    this.rightFrontLeg.quaternion.copy( this.rightFrontLegBody.quaternion );
    this.rightBackLeg.position.copy( this.rightBackLegBody.position );
    this.rightBackLeg.quaternion.copy( this.rightBackLegBody.quaternion );

    this.animate();
  }

  // ... other code snippet

  // Find reset function and comment it out
  // reset() {
  //   if (!this.isExposed) return;

  //   for (let i = 0; i < this.explosions.length; i++) {
  //     this.explosions[i].destroy();
  //   }

  //   this.explosions.length = 0;
  //   this.isExposed = false;

  //   this.scene.add(this);
  //   this.position.set(0, 0, 0);
  // }
}