billboard
HTML
<div id="info">Billboard</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
body {
background-color: #fff;
color: #111;
margin: 0px;
overflow: hidden;
font-family: Monospace;
font-size: 20px;
position: absolute;
}
#info {
position: absolute;
top: 0px;
width: 100%;
padding: 5px;
text-align: center;
color: #ffff00
}
JavaScript
var scene, renderer, camera, controls;
var tree, tree2;
init();
animate();
function init() {
var width = window.innerWidth;
var height = window.innerHeight;
renderer = new THREE.WebGLRenderer({
antialias: true
});
renderer.setSize(width, height);
renderer.setClearColor(0x888888);
document.body.appendChild(renderer.domElement);
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera(45, width / height, 1, 10000);
camera.position.y = 160;
camera.position.z = 400;
camera.lookAt(new THREE.Vector3(0, 0, 0));
controls = new THREE.OrbitControls(camera, renderer.domElement);
var gridXZ = new THREE.GridHelper(100, 10);
gridXZ.setColors(new THREE.Color(0xff0000), new THREE.Color(0xffffff));
scene.add(gridXZ);
var pointLight = new THREE.PointLight(0xffffff);
pointLight.position.set(0, 300, 200);
scene.add(pointLight);
var ambientLight = new THREE.AmbientLight(0x111111);
scene.add(ambientLight);
//////////////////////////////////////////////////////////////////////////////
THREE.ImageUtils.crossOrigin = '';
material = new THREE.MeshBasicMaterial({
side: THREE.DoubleSide,
transparent: true, // key to cutout texture
map: THREE.ImageUtils.loadTexture('http://i.imgur.com/ltrHUSu.png')
});
tree = new THREE.Mesh (new THREE.PlaneGeometry (40,40), material);
scene.add(tree);
tree2 = tree.clone();
scene.add (tree2);
}
function animate() {
requestAnimationFrame(animate);
controls.update();
/////////////////////////////////////////////////////////////////////////////
tree.position.set (50,20,0);
rotateBillboard (tree);
tree2.position.set (-30,20,20);
rotateBillboard (tree2);
/////////////////////////////////////////////////////////////////////////////
render();
}
function render() {
renderer.render(scene, camera);
}
function rotateBillboard (mesh)
{
var b =...