Homework9

by omgazero

HTML

<div id="info">
  homework9
</div>
<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://cdnjs.cloudflare.com/ajax/libs/stats.js/r16/Stats.min.js"></script>

CSS

#info {
  position: absolute;
  top: 0px;
  width: 100%;
  padding: 10px;
  text-align: center;
  color: #ffff00;
}

body {
  overflow: hidden;
}

JavaScript

var frame, scene, light, camera, renderer, controls, stats;
var path = 'https://i.imgur.com/DrvlmNW.jpg';
init();
animate();

function init() {
  renderer = new THREE.WebGLRenderer();
  renderer.setSize(window.innerWidth, window.innerHeight);
  renderer.setClearColor(0x888888);
  document.body.appendChild(renderer.domElement);

  scene = new THREE.Scene();

  camera = new THREE.PerspectiveCamera(30, window.innerWidth / window.innerHeight, 1, 10000);
  camera.position.y = 150;
  camera.position.z = 200;

  controls = new THREE.OrbitControls(camera, renderer.domElement);

  stats = new Stats();
  stats.showPanel(0);
  stats.domElement.style.position = 'absolute';
  stats.domElement.style.left = '0px';
  stats.domElement.style.top = '0px';
  document.body.appendChild(stats.domElement);


  light = new THREE.PointLight(0xffffff);
  light.position.set(100, 300, 200);
  scene.add(light);

  
  frame = createPlank();
  scene.add( frame );
}

function animate() {

  stats.begin();
  controls.update();
  
  frame.rotation.y += 0.01;
  
  stats.end();
  requestAnimationFrame(animate);
  render();
}

function render() {

  renderer.render(scene, camera);
}

function createPlank(){
  let plank = new THREE.Object3D();
  
	let basegeometry = new THREE.BoxGeometry(60, 20, 60 );
  
  let loader = new THREE.TextureLoader();
  loader.crossOrigin = '';
  texture = loader.load(path);		//  上下方貼圖
  textureB = loader.load(path);		//	側面貼圖
  textureB.repeat.set(1, 0.5);
  textureB.wrapS = THREE.RepeatWrapping;
  textureB.wrapT = THREE.RepeatWrapping;
  
  alpha = loader.load('https://i.imgur.com/pYpcBHY.png');
	let texMat = new THREE.MeshPhongMaterial({
    map: texture,
    alphaMap: alpha,
    transparent: true,
    side: THREE.DoubleSide
  });
  
  let matArray = [];
  
  matArray.push( new THREE.MeshPhongMaterial({ map: textureB}) );
  matArray.push( new THREE.MeshPhongMaterial({ map: textureB }) );
  matArray.push( new THREE.MeshPhongMaterial({ map: texture, alphaMap:...