HW2
buttons
by YouTingKuo
HTML
<div id="info">HW2<br/></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r70/three.min.js"></script>
<script src="https://dl.dropboxusercontent.com/u/3587259/Code/Threejs/OrbitControls.js"></script>
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/dat-gui/0.5.1/dat.gui.js"></script>
CSS
#info {
position: absolute;
top: 2%;
width: 100%;
padding: 10px;
text-align: center;
color: #ffff00
}
body {
overflow: hidden;
}
JavaScript
var scene, renderer, camera;
var controls;
var leftLeg, rightLeg, body, head;
var frontSkirt, backSkirt, leftSkirt, rightSkirt;
var angle = 0;
init();
animate();
function init() {
scene = new THREE.Scene();
renderer = new THREE.WebGLRenderer();
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(180, 50, 300);
controls = new THREE.OrbitControls(camera, renderer.domElement);
//light
var light = new THREE.PointLight(0xffffff, 1);
light.position.set(200, 500, 700);
scene.add(light);
var light2 = new THREE.PointLight(0xffffff, 1);
light2.position.set(200, 500, -700);
scene.add(light2);
THREE.ImageUtils.crossOrigin = '';
texture = THREE.ImageUtils.loadTexture('http://i.imgur.com/JWnJnZ8.jpg');
var headMaterialArray = [];
headMaterialArray.push(new THREE.MeshLambertMaterial({
map: THREE.ImageUtils.loadTexture('http://i.imgur.com/r5VHA5C.jpg'), side:THREE.DoubleSide}));
headMaterialArray.push(new THREE.MeshLambertMaterial({
map: THREE.ImageUtils.loadTexture('http://i.imgur.com/u2mdVuf.jpg'), side:THREE.DoubleSide}));
headMaterialArray.push(new THREE.MeshLambertMaterial({
map: THREE.ImageUtils.loadTexture('http://i.imgur.com/FxfinQG.jpg'), side:THREE.DoubleSide}));
headMaterialArray.push(new THREE.MeshLambertMaterial({visible: false}));
headMaterialArray.push(new THREE.MeshLambertMaterial({
map: THREE.ImageUtils.loadTexture('http://i.imgur.com/wZCPkNO.png'), side:THREE.DoubleSide}));
headMaterialArray.push(new THREE.MeshLambertMaterial({
map: THREE.ImageUtils.loadTexture('http://i.imgur.com/cKwkXx9.jpg'), side:THREE.DoubleSide}));
var bodyMaterialArray = [];
bodyMaterialArray.push(new THREE.MeshLambertMaterial({map: texture, side:THREE.DoubleSide}));
bodyMaterialArray.push(new...