Three.js

Hello! Below are 3 experiment done by me using Three.js. By changing different variable, I managed to create these geometry and animation using GUI & editor respectively. Check them out by clicking their title.

1.  The Underwater

It made out of this shape:
Object1_Gui

As it is made from the geometry of torus, I simply make the radius larger and make it more 3D shaped by increasing the tube variable. By setting fast movement to the geometry, the depth of space in this animation was created and that’s how its inspired me to give such title.Here is the code.

<!DOCTYPE html><html>
<head>
<meta charset=”utf-8″>
<style>
body {
background-color: #ffffff;
margin: 0;
overflow: hidden;
}
</style>
</head>
<body>http://threejsplaygnd.brangerbriz.net/js/three.min.js
http://threejsplaygnd.brangerbriz.net/js/Detector.js

if ( ! Detector.webgl ) Detector.addGetWebGLMessage();

var camera, scene, renderer;
var geometry, material, mesh;

function setup() {

var W = window.innerWidth, H = window.innerHeight;
renderer = new THREE.WebGLRenderer();
renderer = new THREE.WebGLRenderer( { preserveDrawingBuffer: true } );
renderer.autoClearColor = false;
renderer.setSize( W, H );
document.body.appendChild( renderer.domElement );

camera = new THREE.PerspectiveCamera( 50, W/H, 1, 10000 );
camera.position.z = 500;

scene = new THREE.Scene();

geometry = new THREE.TorusGeometry(100, 31.2, 20, 11, 18.85);
material = new THREE.MeshNormalMaterial({shading: THREE.FlatShading});
mesh = new THREE.Mesh(geometry, material);
mesh.scale.x = mesh.scale.y = mesh.scale.z = 0.73;
mesh.rotation.x = 200;
scene.add(mesh);

}

function draw() {

requestAnimationFrame( draw );

mesh.position.x = Math.sin( Date.now() * 0.02 ) * 500;
mesh.rotation.z = Date.now() * 0.0005;

// experiment with code from the snippets menu here

/* ————————————–
to see this in action add motion to your
object, add the code below to your draw()
————————————– */

mesh.position.y = Math.sin( Date.now() * 0.0002 ) * 300;

renderer.render( scene, camera );

}

setup();
draw();

</body>
</html>

2. The Roundust

It made out of this shape:
Object3_Gui

For me, this is my favorite Three.js experiment output because it is very amusing. Underestimating the motion, I realized that the animation and the trails left by the knot geometry really shown an unique texture and mesh.Here is the code.

<!DOCTYPE html><html>
<head>
<meta charset=”utf-8″>
<style>
body {
background-color: #121f22;
margin: 0;
overflow: hidden;
}
</style>
</head>
<body>http://threejsplaygnd.brangerbriz.net/js/three.min.js
http://threejsplaygnd.brangerbriz.net/js/Detector.js

if ( ! Detector.webgl ) Detector.addGetWebGLMessage();

var camera, scene, renderer;
var geometry, material, mesh;

function setup() {

var W = window.innerWidth, H = window.innerHeight;
renderer = new THREE.WebGLRenderer();
renderer = new THREE.WebGLRenderer( { preserveDrawingBuffer: true } );
renderer.autoClearColor = false;
renderer.setSize( W, H );
document.body.appendChild( renderer.domElement );

camera = new THREE.PerspectiveCamera( 50, W/H, 1, 10000 );
camera.position.z = 500;

scene = new THREE.Scene();

// paste your code from the geometryGUI here

geometry = new THREE.TorusKnotGeometry(50.61, 7.47, 35, 49, 6.46, 4.49, 7.68);
material = new THREE.MeshNormalMaterial({shading: THREE.SmoothShading});
mesh = new THREE.Mesh(geometry, material);
mesh.scale.x = mesh.scale.y = mesh.scale.z = 0.94;
scene.add( mesh );
}

function draw() {

requestAnimationFrame( draw );

mesh.rotation.x = Date.now() * 0.0005;
mesh.rotation.y = Date.now() * 0.0002;
mesh.rotation.z = Date.now() * 0.001;

renderer.render( scene, camera );

}

setup();
draw();

</body>
</html>

3. The Focus

It made out of this shape:
Object2_Gui

For this one, I used the same geometry with The Underwater. I changed the geometry by reducing the tube size and number of edges to the geometry. For the animation, it contribute a lot in naming the title for this experiment. Here is the code.

<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″>
<style>
body {
background-color: #27012f;
margin: 0;
overflow: hidden;
}
</style>
</head>
<body>http://threejsplaygnd.brangerbriz.net/js/three.min.js
http://threejsplaygnd.brangerbriz.net/js/Detector.js

if ( ! Detector.webgl ) Detector.addGetWebGLMessage();

var camera, scene, renderer;
var geometry, material, mesh;

function setup() {

var W = window.innerWidth, H = window.innerHeight;
renderer = new THREE.WebGLRenderer();
renderer.setSize( W, H );
document.body.appendChild( renderer.domElement );

camera = new THREE.PerspectiveCamera( 50, W/H, 1, 10000 );
camera.position.z = 500;

scene = new THREE.Scene();

// paste your code from the geometryGUI here

for ( var i = 0; i

</body>
</html>

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s