tire (hw3)

texture (cutout, bumpMap)

by Wai Ting Chen

HTML

<div id="info">hw3 helper <br/> (no bump yet)</div>
<script src="http://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>

CSS

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

JavaScript

var camera, scene, renderer, light, controls;
var tire, tire2;
var tireSideGeom, tireSideMaterial, tireWheelGeom, tireWheelMaterial;
var tireSideMesh, tireSideMesh, tireWheelMesh;
var platForm;
var baseGeom, baseMarte, pillarGeom, pillarMarte; 
var rHandleGeom, rHandleMarte, lHandleGeom, lHandleMarte, crossBarGeom, crossBarMarte;
var baseMash, pillerMash, crossBarMash, rHandleMesh, lHandleMash;
init();
animate();

function init() {

    scene = new THREE.Scene();

    camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 1, 10000);
    camera.position.z = 200;
    scene.add(camera);

    THREE.ImageUtils.crossOrigin = '';
    var tireSideMap = THREE.ImageUtils.loadTexture('http://jyunming-chen.github.io/tutsplus/images/tire-side.png');
    var tireWheelMap = THREE.ImageUtils.loadTexture('http://jyunming-chen.github.io/tutsplus/images/tire-wheel.jpg');

    
    tire = new THREE.Object3D(); //tire frame
    platForm = new THREE.Object3D();
    
    
    ////////////////struct tire//////////////////////
    //tire-side
    tireSideGeom = new THREE.CircleGeometry(25, 20);
    tireSideMaterial = new THREE.MeshPhongMaterial({
        map: tireSideMap,
        transparent: true,  // for cut-out texture
        side: THREE.DoubleSide
    });  
    tireSideMesh = new THREE.Mesh(tireSideGeom, tireSideMaterial);
    
    
    //tire wheel
    tireWheelMap.wrapS = tireWheelMap.wrapT = THREE.RepeatWrapping; 
	tireWheelMap.repeat.set( 10, 1 );
    tireWheelGeom = new THREE.TorusGeometry( 25, 5, 50 ,50);
    tireWheelMaterial = new THREE.MeshPhongMaterial({
        map: tireWheelMap,
        side: THREE.DoubleSide
    });
    tireWheelMesh = new THREE.Mesh(tireWheelGeom, tireWheelMaterial);

    //tireWheelMesh.rotation.x = Math.PI / 2;
    tireSideMesh.position.set(0, 0, 5);
    tireSideMesh2 = tireSideMesh.clone();
    tireSideMesh2.position.set(0, 0, -5);
    tireSideMesh2.rotation.y = Math.PI;
    
    tire.add (tireSideMesh);
   ...