DanboardStory_StickyBall

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

var renderer, camera, controls, scene, axes, stats;
var loader = new THREE.TextureLoader();

var leftjoint, rightjoint;
var target,angel = Math.PI/4,tmp = true;
var ball;
init();
animate();

function buildDanboard() {
	loader.setCrossOrigin (''); 

  var faceTexture = [
    new THREE.MeshLambertMaterial({
    	side:THREE.DoubleSide,
    	map: loader.load( "https://i.imgur.com/PiFxBnA.jpg" )}),// +x
    new THREE.MeshLambertMaterial({
    	side:THREE.DoubleSide,
    	map: right = 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
  ];
  var material = new THREE.MultiMaterial(faceTexture);
	var headMesh = new THREE.Mesh(new THREE.CubeGeometry(96,58,56),material);
  
  var skin = new THREE.MeshLambertMaterial({
  	map: loader.load('https://i.imgur.com/ZSklu60.jpg')});
  
    var 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')})
    ];
    
    
  var bodyMaterial = new THREE.MultiMaterial(bodyTexture);
  //var bodyMesh = new THREE.Mesh(new THREE.CubeGeometry(12, 16, 8),bodyMaterial);
  
  var bodyMesh = new THREE.Mesh(new THREE.CubeGeometry(48, 64, 32),bodyMaterial);
  headMesh.position.y = 32;
  head = new THREE.Object3D();
  head.add(headMesh)
  head.position.y = 30;
  bodyMesh.add(head);
 
  
  
  //leftjoint = new THREE.Mesh(new THREE.CylinderGeometry(2, 2, 4, 32, 1, false, Math.PI/2, Math.PI), skin);
  leftjoint...