Swivelling Cone

Three.js +Orbit

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

//... based on am original JS Fiddle by WestLangley.
var camera, scene, renderer;
var time=0, dt=0;

init();
animate();
//======================================================================

function init() {

    scene = new THREE.Scene();
    scene.add(new THREE.AmbientLight(0x222222));

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

    //AMBIENT LIGHT

	var ambientlight111 = new THREE.AmbientLight(0xaaaaaa);
	scene.add( ambientlight111 );		

    //SPHERES
    var t_Geometry = new THREE.SphereGeometry(10, 20, 20);
    var t_Material = new THREE.MeshLambertMaterial({color: 0xffffff , opacity: 0.8});
    t_Material.transparent = true;
    target = new THREE.Mesh(t_Geometry, t_Material);
    scene.add( target );	
    
    var s_Geometry = new THREE.SphereGeometry(15, 20, 20);
    var s1_Material = new THREE.MeshLambertMaterial({color: 0xff0000 });
    var s2_Material = new THREE.MeshLambertMaterial({color: 0x00ff00 });
    var s3_Material = new THREE.MeshLambertMaterial({color: 0x0000ff });
    var s4_Material = new THREE.MeshLambertMaterial({color: 0xffff00 });
   
    s1 = new THREE.Mesh(s_Geometry, s1_Material);
    s2 = new THREE.Mesh(s_Geometry, s2_Material);
    s3 = new THREE.Mesh(s_Geometry, s3_Material);
    s4 = new THREE.Mesh(s_Geometry, s4_Material);
    s1.position.set (-140, -80, -120);
    s2.position.set (-80,  80, -120);
    s3.position.set ( 80,  80, -120);
    s4.position.set ( 140, -80, -120);
    scene.add(s1);
    scene.add(s2);
    scene.add(s3);
    scene.add(s4);
    
    //s_Geometry.dynamic = true; //... not neccesary

    //CONE
    c_geometry = new THREE.CylinderGeometry(3, 40, 120, 40, 10, false);
    //... Following mod is as rec by WestLangley's answer at:-
    //... http://stackoverflow.com/questions/13757483/three-js-lookat-seems-to-be-flipped
  ...