homework9

by Millieyan

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/107/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>

JavaScript

var camera, scene, renderer, stats, loader;
var angle = 0.0, box, woodPlank;

window.addEventListener('resize',onWindowResize,false);

init();
animate();

function buildBox(){
	let texture = loader.load("https://i.imgur.com/DrvlmNW.jpg");
  let sideTexture = loader.load("https://i.imgur.com/DrvlmNW.jpg");
  sideTexture.repeat.set(1,1.0/3.0);
  let alpha = loader.load("https://i.imgur.com/pYpcBHY.png");

	let matArray = [];
    matArray.push(new THREE.MeshPhongMaterial({
    	map: sideTexture
    }));
    matArray.push(new THREE.MeshPhongMaterial({
    	map: sideTexture
    }));
    matArray.push(new THREE.MeshPhongMaterial({
    	map: texture,
        alphaMap: alpha,
        transparent: true
    }));
    matArray.push(new THREE.MeshPhongMaterial({
    	map: texture
    }));
    matArray.push(new THREE.MeshPhongMaterial({
    	map: sideTexture
    }));
    matArray.push(new THREE.MeshPhongMaterial({
    	map: sideTexture
    }));
    
    let allMaterial = new THREE.MultiMaterial(matArray);
    let box = new THREE.Mesh(new THREE.BoxGeometry(60,20,60),allMaterial);
    
    return box;
}

function buildCylinder(){
	let texture = loader.load("https://i.imgur.com/DrvlmNW.jpg");
    
    let cylinder = new THREE.Mesh(new THREE.CylinderGeometry(10,10,40,40),new THREE.MeshPhongMaterial({
    	map: texture,
        side: THREE.BackSide
    }));
    
    return cylinder;
}

function init() {
    scene = new THREE.Scene();
    stats = new Stats();
    stats.domElement.style.position = 'absolute';
    stats.domElement.style.top = '0px';
    stats.domElement.style.zIndex = 100;
    document.body.appendChild(stats.domElement);

    camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 1, 1000);
    camera.position.set(0,0,140);
    camera.lookAt(new THREE.Vector3());
    scene.add(camera);


    renderer = new THREE.WebGLRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);
    renderer.setClearColor(0x888888);

    controls =...