test

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 box;
var gcontrols;
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(80,200,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);*/
  loader.setCrossOrigin (''); 
  var floor = new THREE.Mesh(new THREE.PlaneGeometry(640,380),new THREE.MeshBasicMaterial({
  map:loader.load("https://i.imgur.com/3RUoApc.png"),
  side:THREE.DoubleSide}));
  floor.rotation.x = Math.PI/2;
  scene.add(floor);
 
  gcontrol = {
    x: 0,
    y: 0,
    z: 0,
  };
  
  var gui = new dat.GUI();
  gui.domElement.id = 'gui';
  gui.remember(gcontrol);
  
  gui.add(gcontrol, 'x', 0, 2*Math.PI);
  gui.add(gcontrol, 'y', 0, 2*Math.PI);
  gui.add(gcontrol, 'z', 0, 2*Math.PI);

	box = new THREE.Mesh(new THREE.CubeGeometry(40,80,20),new THREE.MeshNormalMaterial());
  box.position.y = 60;
  scene.add(box);
  window.addEventListener('resize', onWindowResize, false); //事件處理器
}

function onWindowResize() {
  var width = window.innerWidth;
  var height = window.innerHeight;
  camera.aspect = width / height;
  camera.updateProjectionMatrix();
  renderer.setSize(width, height);
}
function animate() {

  box.rotation.x = gcontrol.x;
  box.rotation.y = gcontrol.y;
  box.rotation.z = gcontrol.z;
  
  
 ...