JSFiddle - React, Tailwind, and code Playground
by bizamajig
CSS
body {
margin: 0px;
background-color: #fff;
overflow: hidden;
}
JavaScript
var camera;
var scene;
var renderer;
var mesh;
init();
animate();
function init() {
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 1000);
var light = new THREE.DirectionalLight( 0xffffff );
light.position.set( 0, 1, 1 ).normalize();
scene.add(light);
var geometry = new THREE.Geometry();
geometry.vertices.push(
new THREE.Vector3(0,1,10),//vertex0
new THREE.Vector3(1,0,10),//1
new THREE.Vector3(1,1,10),//2
new THREE.Vector3(0,0,10)//3
);
geometry.faces.push(
new THREE.Face3(2,1,0),//use vertices of rank 2,1,0
new THREE.Face3(1,1,2)//vertices[3],1,2...
);
var texture = THREE.ImageUtils.loadTexture('http://s15.postimg.org/9nc85zv57/03032122.png', {}, function() {
renderer.render(scene, camera);
})
var material = new THREE.MeshBasicMaterial({map: texture, transparent: true })
mesh = new THREE.Mesh(geometry, material );
mesh.position.z = -50;
scene.add( mesh );
renderer = new THREE.WebGLRenderer({ alpha: true });
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.setClearColor( 0xffffff, 1);
document.body.appendChild( renderer.domElement );
window.addEventListener( 'resize', onWindowResize, false );
render();
}
function animate() {
//mesh.geometry.vertices[1].set(0,1,0);
/*mesh.geometry.vertices[10].x+=1.49;
mesh.geometry.vertices[20].x+=1.49;
mesh.geometry.vertices[30].x+=1.49;
mesh.geometry.vertices[40].x+=1.49*/
//mesh.geometry.vertices[1].y+=.019;
//mesh.geometry.verticesNeedUpdate=true;
//mesh.scale.set(0.1,0.1,0);
render();
requestAnimationFrame( animate );
}
function render() {
renderer.render( scene, camera );
}
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
...