three.js testbed

with orbitControls, XZgrid, info

by chuby0307

HTML

<audio id="collisionsound" style="display:none">
<source src="sounds/collision3.wav" type='audio/wav'>
</audio>

<audio id="soundtrack" autoplay loop style="display:none">
<source src="sounds/KennyG.mp3" type='audio/mp3'>
</audio>

<script src="http://jyunming-chen.github.io/tutsplus/js/three.min.js"></script>
<script src="http://jyunming-chen.github.io/tutsplus/js/OrbitControls.js"></script>

CSS

#info {
		position: absolute;
		top: 0px; width: 100%;
		font-family: Monospace;
		font-size: 20px;
		padding: 5px;
		text-align: center;
		color: #003333
	}
	a {color: purple}

JavaScript

var scene, renderer, camera;
var controls;
var clock = new THREE.Clock();
//var pos,vel,mesh;

var pos = new THREE.Vector3(0, 6, 0);
var vel = new THREE.Vector3(-10, 0, 0);
var mesh;
var vel2=new THREE.Vector3(10, 0, 10);


var collisionSound, soundTrack;
var isPaused = false, soundVal = 1.0, sign = 1.0;

var cube;
var puck = {
	pos: new THREE.Vector3(),
	vel: new THREE.Vector3(),
	mesh: new THREE.Object3D()
};


init();
animate();

function toggle() {
	isPaused = !isPaused;
	sign = isPaused ? -1 : 1;
	console.log (isPaused);
}

function init()
{
	collisionSound = document.getElementById ('collisionsound');
	soundTrack = document.getElementById ('soundtrack');
	
	renderer = new THREE.WebGLRenderer( {antialias:true} );
	var width = window.innerWidth;
	var height = window.innerHeight;
	renderer.setSize (width, height);
	renderer.setClearColor (0xeeeeee);
	document.body.appendChild (renderer.domElement);

	scene = new THREE.Scene();
	
	//debugger;
	puck.mesh = new THREE.Mesh (new THREE.CylinderGeometry (6,6,4,20,20), new THREE.MeshLambertMaterial ({color:0xff0000}));
	puck.pos = new THREE.Vector3 (0,2,0);
	puck.vel = new THREE.Vector3 (30,0,40);
	//scene.add (puck.mesh);
    
var geom = new THREE.Geometry();
var v1 = new THREE.Vector3(-10,0,0);
var v2 = new THREE.Vector3(10,0,-5);
var v3 = new THREE.Vector3(10,0,5);


console.log(geom.vertices)
geom.vertices.push( v1 );
geom.vertices.push( v2 );
geom.vertices.push( v3 );

geom.faces.push( new THREE.Face3( 0, 1, 2 ) );
geom.computeFaceNormals();

    mesh= new THREE.Mesh( geom, new THREE.MeshNormalMaterial() );
    mesh.rotation.x=Math.PI;
    //mesh.position.set(0,6,0);
    
    pos = new THREE.Vector3(0, 6, 0);
    vel = new THREE.Vector3(-10, 0, 0);
    scene.add(mesh);    

    
    
    
    
    
    
	
	var cubeGeometry = new THREE.BoxGeometry (100,6,100);
	var cubeMaterial = new THREE.MeshLambertMaterial ({color: 0x888888});
	cube = new THREE.Mesh (cubeGeometry, cubeMaterial);
	cube.position.set...