three.js dev template
HTML
<script src="https://rawgit.com/mrdoob/three.js/dev/build/three.js"></script>
<script src="https://rawgit.com/mrdoob/three.js/dev/examples/js/controls/OrbitControls.js"></script>
CSS
body {
background-color: #000;
margin: 0px;
overflow: hidden;
}
JavaScript
// Simple three.js example
var renderer, scene, camera, controls, alpha, boxMesh, curve, startTime;
init();
animate();
function init() {
var vertexShader = [
'void main()',
'{',
'mat4 myModelView = modelViewMatrix;',
'myModelView[0][0] = 1.0;',
'myModelView[0][1] = 0.0;',
'myModelView[0][2] = 0.0;',
'myModelView[1][0] = 0.0;',
'myModelView[1][1] = 1.0;',
'myModelView[1][2] = 0.0;',
'myModelView[2][0] = 0.0;',
'myModelView[2][1] = 0.0;',
'myModelView[2][2] = 1.0;',
'vec4 modelViewPosition = myModelView * vec4(position, 1.0);',
'gl_Position = projectionMatrix * modelViewPosition;',
'}',
].join('\n');
var fragmentShader = [
'void main()',
'{',
'gl_FragColor = vec4(1.0,0.0,0.0,1.0);',
'}',
].join('\n');
// renderer
renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
// scene
scene = new THREE.Scene();
// camera
camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 10000 );
camera.position.set(0, 0, 40);
// controls
controls = new THREE.OrbitControls( camera );
var planeGeo = new THREE.PlaneGeometry(10,10);
var planeMeshStatic = new THREE.Mesh(planeGeo);
planeMeshStatic.position.set(15,0,0);
var shaderMaterial = new THREE.ShaderMaterial({
vertexShader: vertexShader,
fragmentShader: fragmentShader
});
console.log(vertexShader)
console.log(fragmentShader)
var planeMeshBillboard = new THREE.Mesh(planeGeo,shaderMaterial);
planeMeshBillboard.position.set(-15,0,0);
scene.add(planeMeshStatic,planeMeshBillboard);
}
function animate() {
requestAnimationFrame( animate );
renderer.render( scene, camera );
}