three.js testbed

with orbitControls, XZgrid, info

by chuby0307

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/three.js/r70/three.min.js"></script>
<script src="https://dl.dropboxusercontent.com/u/3587259/Code/Threejs/OrbitControls.js"></script>
<script src="http://jyunming-chen.github.io/tutsplus/js/KeyboardState.js"></script>
<script src="http://jyunming-chen.github.io/tutsplus/lineUtil.js"></script>
<script src="http://jyunming-chen.github.io/tutsplus/js/Detector.js"></script>
<script src="http://jyunming-chen.github.io/tutsplus/js/OrbitControls.js
"></script>
<script>
    document.oncontextmenu = function() {
        return false;
    }
</script>

CSS

body {
    background-color: #fff;
    color: #111;
    margin: 0px;
    overflow: hidden;
    font-family: Monospace;
    font-size: 20px;
    position: absolute;
}
#info {
    position: absolute;
    top: 0px;
    width: 100%;
    padding: 5px;
    text-align: center;
    color: #444400
}
#info2 {
    position: absolute;
    bottom: 50px;
    width: 100%;
    text-align: center;
    color: #444400
}
a {
    color: 0x005500
}

JavaScript

var scene, renderer, camera;
var plane, cyl;
var mouse = new THREE.Vector2();
var keyboard = new KeyboardState();

var line;

var nolineyet = true;
//var contour = "3 1 1 2 3 3 0";



var zero = (0, 0, 0);

var xx = [];
var yy = [];
var zz = 0;



var mesh;
var vel = new THREE.Vector3(-10, 0, 0);
var vel1 = new THREE.Vector3(-10, 0, 10);
var vel2 = new THREE.Vector3(-10, 0, 10);



init();
animate();


function init() {
    var width = window.innerWidth;
    var height = window.innerHeight;

    renderer = new THREE.WebGLRenderer({
        antialias: true
    });
    renderer.setSize(width, height);
    renderer.setClearColor(0xeeeeee);

    document.body.appendChild(renderer.domElement);

    scene = new THREE.Scene();

    camera = new THREE.OrthographicCamera(-15, 15, 15, -15, 1, 1000);

    camera.position.x = 0;
    camera.position.y = 50;
    camera.position.z = 0;
    camera.up.set(0, 0, -1);
    camera.lookAt(new THREE.Vector3(0, 0, 0));
    //scene.add(camera);

    var gridXZ = new THREE.GridHelper(10, 1);
    gridXZ.setColors(new THREE.Color(0xff0000), new THREE.Color(0x999999));
    //gridXZ.rotation.x = Math.PI/2;
    scene.add(gridXZ);

    //readContour();

    var cyl_geom = new THREE.CylinderGeometry(1, 1, 6, 32);
    var cyl_mat = new THREE.MeshLambertMaterial({
        color: 0x11ff11
    });
    cyl = new THREE.Mesh(cyl_geom, cyl_mat);
    cyl.position.set(10, 0, 0);
    cyl.name = "leftB";
    scene.add(cyl);

    /////////////////////////////////////////////////////////////////

    var geom = new THREE.Geometry();
    var v1 = new THREE.Vector3(-1, 0, 0);
    var v2 = new THREE.Vector3(1, 0, -.5);
    var v3 = new THREE.Vector3(1, 0, .5);


    console.log(geom.vertices)
    geom.vertices.push(v1);
    geom.vertices.push(v2);
    geom.vertices.push(v3);

    geom.faces.push(new THREE.Face3(0, 1, 2));
    geom.computeFaceNormals();

    mesh = new THREE.Mesh(geom, new THREE.MeshNormalMaterial());
    mesh.rotation.x = Math.PI;
   ...