tomardern · November 2, 2017 23:39
diff --git a/multiple_flowers.js b/multiple_flowers.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 addFlower = function(angle){
        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,
          alphaTest: 0.5,
          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;
        plane.rotateY(angle);
        scene.add(plane);
      }

      var flowers = 10;
      var degees = 360 / flowers;
      for(var i = 0; i < flowers; i++){
        addFlower(i * degees);
      }




 			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 addFlower = function(angle){
	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,
	alphaTest: 0.5,
	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;
	plane.rotateY(angle);
	scene.add(plane);
	}

	var flowers = 10;
	var degees = 360 / flowers;
	for(var i = 0; i < flowers; i++){
	addFlower(i * degees);
	}




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

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