Boxes

3JS simple (no OrbitControls)

by steveow

HTML

<!--- Uses the latest THREE.js (r70+) -->
<script src="http://threejs.org/build/three.min.js"></script>

<h1 id="title_A">Boxes</h1>

<input type="submit" id="byBtn" value="Move Camera" onclick="F_change()" />

<input type="text" id="myTextField" value="to the LEFT" />

CSS

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

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.CubeGeometry(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 light = new THREE.PointLight(0xffffff);
    //light.position.set(0, 200, 400);

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

    //RENDERER
    
    renderer = new...