Toggle OrbitControls

3JS OrbitControls

by steveow

HTML

<!--- Using latest THREE.js (r70+) -->

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


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


<h1 id="title_A">Toggle OrbitControls</h1>


<input type="submit" id="byBtn" value="TOGGLE OrbitControls" onclick="F_change()" />

<input type="text" id="myTextField" value="Using_OrbitControls" />

<div id="container"></div>

CSS

#container 
{
    width: 400px;
    height: 400px;
    border: 1px solid black;
    margin: 10px auto;
    padding: 0px;
	background-color: #0000ff;
}

body 
{
    font-family: Monospace;
    font-weight: bold;
    background-color: #cccc55;
	
    margin: 0px;
    overflow: hidden;
    padding:0
}

JavaScript

// MAIN //

//... Global variables.
var camera, scene, renderer, geometry, material, 
mybox, mybox2, mybox3;

var renderer_width, renderer_height;

init();
animate();

//-------------------------------------------------------------
function F_change() 
{

    var L_or_R = document.getElementById('myTextField').value;

    if (L_or_R == "to the LEFT") 
    {
        L_or_R = "to the RIGHT";
        camera.position.set(-180,1350,500);
     } 
    else 
    {
        L_or_R = "to the LEFT";
        camera.position.set(180,1350,500);
    }
    document.getElementById('myTextField').value = L_or_R;
}
//-------------------------------------------------------------
function init() {

    scene = new THREE.Scene();

    camera = new THREE.PerspectiveCamera
                (50, 0.5*window.innerWidth / window.innerHeight, 1, 10000);

    camera.position.set(0,1350,500);

    scene.add(camera);

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

    // 3 BOXES
    var myboxGeometry = new THREE.BoxGeometry(50, 50, 50);
    var myboxMaterial = new THREE.MeshLambertMaterial({
        color: 0x00aaff,
        side: THREE.DoubleSide });

    var mybox2Geometry = new THREE.CubeGeometry(150, 150, 150);
    var mybox2Material = new THREE.MeshNormalMaterial();
    
    var mybox3Geometry = new THREE.CubeGeometry(50, 100, 50);
    var mybox3Material = new THREE.MeshNormalMaterial();

    mybox = new THREE.Mesh(myboxGeometry, myboxMaterial);
    mybox.position.set(0, 70, 0);
    scene.add(mybox);

    mybox2 = new THREE.Mesh(mybox2Geometry, mybox2Material);
    scene.add(mybox2);
    mybox2.position.set(0, -50, 0);
    
    mybox3 = new THREE.Mesh(mybox3Geometry, mybox3Material);
    scene.add(mybox3);
    mybox3.position.set(150, -50, 0);

    // LIGHT
    var light1 = new THREE.PointLight(0xffffff);
    light1.position.set(0, 200, 400);

    var light2 = new THREE.AmbientLight(0xffffff);
    scene.add(light2);

    //RENDERER
    
    renderer = new...