DanboardStory(class)

by 蔡 育曄

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/84/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/stats.js/r16/Stats.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.5/dat.gui.min.js"></script>

CSS

body {
  overflow: hidden;
}

JavaScript

class Danboard {
  constructor() {
  	this.head = new THREE.Object3D();
    this.target = new THREE.Object3D();
    this.helfBody = new THREE.Object3D();
  	this.body = new THREE.Object3D();
    this.leftLeg = new THREE.Object3D();
    this.rightLeg = new THREE.Object3D();
    this.FSkirt = new THREE.Object3D();
    this.BSkirt = new THREE.Object3D();
    this.LSkirt = new THREE.Object3D();
    this.RSkirt = new THREE.Object3D();
    
    
  	let loader = new THREE.TextureLoader();
    loader.setCrossOrigin ('');
    let faceTexture = [
      new THREE.MeshLambertMaterial({
        side:THREE.DoubleSide,
        map: loader.load( "https://i.imgur.com/PiFxBnA.jpg" )}),// +x
      new THREE.MeshLambertMaterial({
        side:THREE.DoubleSide,
        map: loader.load( "https://i.imgur.com/9KGDYiy.jpg")}),// -x
      new THREE.MeshLambertMaterial({
        side:THREE.DoubleSide,
        map: loader.load( "https://i.imgur.com/xIbygcS.png" )}),// +y
      new THREE.MeshLambertMaterial({ visible: false }),// -Y
      new THREE.MeshLambertMaterial({
        side:THREE.DoubleSide,
        map: loader.load( "https://i.imgur.com/UQjjOu2.jpg" )}),// +z
      new THREE.MeshLambertMaterial({
        side:THREE.DoubleSide,
        map: loader.load( "https://i.imgur.com/A7tfkyx.jpg" )})// -Z
    ];
    let material = new THREE.MultiMaterial(faceTexture);
    this.headMesh = new THREE.Mesh(new THREE.CubeGeometry(96,58,56),material);

    let skin = new THREE.MeshLambertMaterial({
      map: loader.load('https://i.imgur.com/ZSklu60.jpg')});

    let bodyTexture = [
      skin,
      skin,
      skin,
      skin,
      new THREE.MeshLambertMaterial({
        map: loader.load('https://i.imgur.com/uUZxpgM.jpg')}),
      new THREE.MeshLambertMaterial({
        map: loader.load('https://i.imgur.com/8UOpKrK.jpg')})
    ];
    let bodyMaterial = new THREE.MultiMaterial(bodyTexture);
    //var bodyMesh = new THREE.Mesh(new THREE.CubeGeometry(12, 16, 8),bodyMaterial);

    this.bodyMesh =...