Geometry

with orbitControls, XZgrid, info

by KUO YOU-TING

HTML

<div id="info">Geometry</div>
<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>

CSS

#info {
    position: absolute;
    top: 0px;
    width: 100%;
    padding: 10px;
    text-align: center;
    color: #ffff00
}
body {
    overflow: hidden;
}

JavaScript

var camera, scene, renderer, geometry, material, mesh, light, controls, frame;
var angle = 0;

var Mesh = function (geom, x, z) {
 	// properties ...
    this.geom = geom;
    this.x = x*Math.PI;
    this.z = z*Math.PI;
    material = new THREE.MeshLambertMaterial({color: 0x9010ff});
	this.mesh = new THREE.Mesh (this.geom, material);
    this.mesh.position.set(60*Math.cos(this.x),0,60*Math.sin(this.z));
    frame.add (this.mesh);
};

init();
animate();

function init() {
    scene = new THREE.Scene();

    camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 1, 1000);
    camera.position.z = 300;
    camera.position.y = 100;
    scene.add(camera);
	
    frame = new THREE.Object3D();
    
    Geom1 = new THREE.BoxGeometry(10, 10, 10);
    Geom2 = new THREE.CircleGeometry(10, 32);
    Geom3 = new THREE.CylinderGeometry(10, 10, 10, 32);
    Geom4 = new THREE.DodecahedronGeometry(10, 0);
    Geom5 = new THREE.IcosahedronGeometry(10, 0);
    Geom6 = new THREE.OctahedronGeometry(10, 0);
    Geom7 = new THREE.PlaneGeometry(10, 10, 32);
    Geom8 = new THREE.RingGeometry(5, 10, 32);
    Geom9 = new THREE.SphereGeometry(10, 32, 32);
    Geom10 = new THREE.TetrahedronGeometry(10, 0);
    Geom11 = new THREE.TorusGeometry(10, 3, 16, 100);
    Geom12 = new THREE.TorusKnotGeometry(10, 3, 64, 8);
	
    mesh1 = new Mesh(Geom1, 0, 0);
    mesh2 = new Mesh(Geom1, 1/6, -1/6);
    mesh3 = new Mesh(Geom2, 1/3, -1/3);
    mesh4 = new Mesh(Geom3, 1/2, -1/2);
    mesh5 = new Mesh(Geom4, 2/3, -2/3);
    mesh6 = new Mesh(Geom5, 5/6, -5/6);
    mesh7 = new Mesh(Geom6, 1, -1);
    mesh8 = new Mesh(Geom7, 5/6, 5/6);
    mesh9 = new Mesh(Geom8, 2/3, 2/3);
    mesh10 = new Mesh(Geom9, 1/2, 1/2);
    mesh11 = new Mesh(Geom10, 1/3, 1/3);
    mesh12 = new Mesh(Geom11, 1/6, 1/6);
    
	scene.add(frame);

    light = new THREE.PointLight(0xffffff);
    light.position.set(100, 300, 200);
    scene.add(light);

    var gridXZ = new THREE.GridHelper(100, 10);
   ...