test2

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>

CSS

body {
  overflow: hidden;
}

JavaScript

var renderer, camera, controls, scene, axes, stats;
var toaster,toast,toggle = false;
var loader = new THREE.TextureLoader();
var pos1,pos2,pos3,pos4,pos5,alpha = 0;;
init();
animate();

function init() {
  renderer = new THREE.WebGLRenderer({
    antialias: true
  });
  renderer.setSize(window.innerWidth, window.innerHeight); //設置畫面大小
  renderer.setClearColor(0x888888);
  document.body.appendChild(renderer.domElement);



  camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 1, 1000);
  camera.position.set(0,100,100); // important
  //camera.lookAt (new THREE.Vector3(0,0,0));
  controls = new THREE.OrbitControls(camera, renderer.domElement);

  scene = new THREE.Scene();


  let gridXZ = new THREE.GridHelper(100, 10, 'red', 'white');

  scene.add(gridXZ);

  stats = new Stats();
  stats.domElement.style.position = 'absolute';
  stats.domElement.style.top = '0px';
  stats.domElement.style.zIndex = 100;
  document.body.appendChild(stats.domElement);
var AmbientLight = new THREE.AmbientLight(0x888888,1.4); // soft white light
  scene.add(AmbientLight);
	toaster = new THREE.Mesh(new THREE.CubeGeometry(30,20,15),new THREE.MeshNormalMaterial());
  toaster.position.y = 10;
  scene.add(toaster);
  
  loader.setCrossOrigin (''); 
  var  part1 = loader.load( "https://i.imgur.com/GpK00ZR.jpg" );
  var  part2 = loader.load( "https://i.imgur.com/Pn3bWAF.jpg" );
  var texture = [
    new THREE.MeshLambertMaterial({map: part2}),// +x
    new THREE.MeshLambertMaterial({map: part2}),// -x
    new THREE.MeshLambertMaterial({map: part2}),// +y
    new THREE.MeshLambertMaterial({map: part1}),// -Y
    new THREE.MeshLambertMaterial({map: part1}),// +z
    new THREE.MeshLambertMaterial({map: part1})// -Z
  ];
  var material = new THREE.MultiMaterial(texture);
  toast =  new THREE.Mesh(new THREE.CubeGeometry(20,18,3),material);
 toast.position.set(0, 40,-2);
   scene.add(toast);
  pos1 = new THREE.Vector3(0,40,-2);
  pos2 = new THREE.Vector3(0,26,-2);

 ...