Petal Cone

three.js orbitControls

by steveow

HTML

<script src="http://threejs.org/build/three.min.js"></script>
<script src="http://threejs.org/examples/js/controls/OrbitControls.js"></script>

CSS

body {
    background-color: #000;
    margin: 0px;
    overflow: hidden;
}

JavaScript

var camera, scene, renderer;
var lpos_x=-60,lpos_y=20, lpos_z=100;
var RotationAngleRadians = 0;
var sign = 1;//... controls sense of petal dynamic rotation
var oRad = 5; //... of polygon circumcircle
var height = 5;//... of petal triangle
var numPetals = 7;
var dAng = Math.PI*2/numPetals;//... angle between polygon vertices from centre
var hBase = oRad * Math.sin (0.5 * dAng);//... length of half-base of petal triangle
var base =  hBase * 2;//... length of base of petal triangle
var iRad = Math.sqrt(oRad*oRad - hBase*hBase);//... distance centre to mid-base of petal, equals radius of polygon inscribed circle.
var petals = [];
//console.log ( "hBase,cDist,oRad =" + hBase,cDist,oRad);

var pPos = new THREE.Vector3();

//--------------------------------------------------------------------
//--------------------------------------------------------------------

F_init();
F_PetalMaker();
//console.log ( "hBase,inner Radius, outer Radius =" + hBase, iRad, oRad);
F_animate();

//--------------------------------------------------------------------
//--------------------------------------------------------------------

function F_init() 
{
    scene = new THREE.Scene();
    scene.add(new THREE.AmbientLight(0xaaaaaa));

	  camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 10000); 
    camera.position.x = 0; 
    camera.position.y = 0; 
    camera.position.z = 100;
    scene.add( camera );

    var terrainGeo      = new THREE.PlaneGeometry(15, 25);
    var terrainMaterial = new THREE.MeshLambertMaterial({
        color:  0x1ec876, side: THREE.DoubleSide
    });
    var terrain = new THREE.Mesh(terrainGeo, terrainMaterial);
    terrain.position.set (0,0,-10); // CHANGED
    scene.add(terrain);

    //light = new THREE.DirectionalLight(0xffffff, 1);
    //light.position.set(lpos_x, lpos_y, lpos_z);   
    //scene.add(light);

//... Axis Helper
	var Helper_axes = new THREE.AxisHelper( 1 ); //... initial length for all three axes.
	scene.add(...