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 clock = new THREE.Clock();

var line;
var to = false;
var to2 = false;

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(0, 0, 0);
var vel2 = new THREE.Vector3(-10, 0, 10);


///////////////////////////////////
var z0 = new THREE.Vector3(10, 0, -10);
var z1 = new THREE.Vector3(-10, 0, -10);
var z2 = new THREE.Vector3(-10, 0, 10);
var z3 = new THREE.Vector3(10, 0, 10);

var poss = new THREE.Vector3(0, 0, 0);
var change=new THREE.Vector3(0, 0, 0);
var dt =0;

var objects = [], plane;
//var mouse = new THREE.Vector2();
var offset = new THREE.Vector3();
var INTERSECTED, SELECTED;

var container;


var raycaster;

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);

    container = document.createElement ('div'); //***
	document.body.appendChild (container);  //***
    container.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);

    plane = new THREE.Mesh(
		new THREE.PlaneBufferGeometry( 20, 20, 8, 8 ),
		new THREE.MeshBasicMaterial( { color: 0xff0000, opacity: 0.25, transparent: true } )
	);
	plane.rotation.x = -Math.PI/2;
	//plane.visible = false;
    plane.position.set(0,-1,0);
	//scene.add( plane );
    
    
    
    var gridXZ = new THREE.GridHelper(10, 1);
   ...