Homework9

by Nally

HTML

<div id="title">Homework9 Demo</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

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

body {
    overflow: hidden
}

JavaScript

var camera, scene, renderer, stats, loader;
var angle = 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,10,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);

    /*var gridXZ = new THREE.GridHelper(200, 20, 'red', 'white');
    scene.add(gridXZ);*/

    renderer = new THREE.WebGLRenderer();
   ...