tomardern/flower.js

## flower.js
<!DOCTYPE html>
<html>
	<head>
		<title>My first three.js app</title>
		<style>
			body { margin: 0; }
			canvas { width: 100%; height: 100% }
		</style>
	</head>
	<body>
    <script src="https://ajax.googleapis.com/ajax/libs/threejs/r84/three.min.js"></script>
    <script src="http://threejs.org/examples/js/loaders/SVGLoader.js"?></script>
    <script src="OrbitControls.js"></script>
		<script>
      /* ================================
      Init
      ================================ */
			var scene = new THREE.Scene();
			var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 );

      scene.background = new THREE.Color(  0xffffff );
			var renderer = new THREE.WebGLRenderer({ alpha: true });
			renderer.setSize( window.innerWidth, window.innerHeight );
			document.body.appendChild( renderer.domElement );

      var size = 10;
      var divisions = 10;

      var gridHelper = new THREE.GridHelper( size, divisions );
      scene.add( gridHelper );


      /* ================================
      Controls
      ================================ */
      var controls = new THREE.OrbitControls( camera );
      controls.enableZoom = false;
      controls.addEventListener( 'change', render ); // remove when using animation loop

      window.getCamera = function(){
        vector = camera.getWorldDirection();
        console.log("vector", vector);
      }

      camera.position.set(5, 5, 12 );
      controls.update();

      camera.zoom = 3;
      camera.updateProjectionMatrix();


    var image = document.createElement('img');
    var texture = new THREE.Texture(image);

    image.addEventListener( 'load', function ( event ) {
        texture.needsUpdate = true;
        render();
    });

    image.src = 'flower3.svg';

    var material = new THREE.MeshBasicMaterial({
      map: texture,
      transparent: true,
      side: THREE.DoubleSide,
    });


    plane = new THREE.Mesh(new THREE.PlaneGeometry( 1, 2), material);
    plane.material.side = THREE.DoubleSide;
    plane.position.y = 1;
    plane.position.x = -0.25;
    scene.add(plane);


			function render() {
				renderer.render( scene, camera );
			}

      render();
		</script>
	</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>My first three.js app</title>
	<style>
	body { margin: 0; }
	canvas { width: 100%; height: 100% }
	</style>
	</head>
	<body>
	<script src="https://ajax.googleapis.com/ajax/libs/threejs/r84/three.min.js"></script>
	<script src="http://threejs.org/examples/js/loaders/SVGLoader.js"?></script>
	<script src="OrbitControls.js"></script>
	<script>
	/* ================================
	Init
	================================ */
	var scene = new THREE.Scene();
	var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 );

	scene.background = new THREE.Color( 0xffffff );
	var renderer = new THREE.WebGLRenderer({ alpha: true });
	renderer.setSize( window.innerWidth, window.innerHeight );
	document.body.appendChild( renderer.domElement );

	var size = 10;
	var divisions = 10;

	var gridHelper = new THREE.GridHelper( size, divisions );
	scene.add( gridHelper );


	/* ================================
	Controls
	================================ */
	var controls = new THREE.OrbitControls( camera );
	controls.enableZoom = false;
	controls.addEventListener( 'change', render ); // remove when using animation loop

	window.getCamera = function(){
	vector = camera.getWorldDirection();
	console.log("vector", vector);
	}

	camera.position.set(5, 5, 12 );
	controls.update();

	camera.zoom = 3;
	camera.updateProjectionMatrix();



	var image = document.createElement('img');
	var texture = new THREE.Texture(image);

	image.addEventListener( 'load', function ( event ) {
	texture.needsUpdate = true;
	render();
	});

	image.src = 'flower3.svg';

	var material = new THREE.MeshBasicMaterial({
	map: texture,
	transparent: true,
	side: THREE.DoubleSide,
	});


	plane = new THREE.Mesh(new THREE.PlaneGeometry( 1, 2), material);
	plane.material.side = THREE.DoubleSide;
	plane.position.y = 1;
	plane.position.x = -0.25;
	scene.add(plane);


	function render() {
	renderer.render( scene, camera );
	}

	render();
	</script>
	</body>
	</html>