Jump to content
  • Advertisement

Introduction to THREE.js

Awoken

392 views

Time to introduce just how awesome THREE.js is. 
With the following three files you too can begin building content with THREE.js that will work in any browser that supports WebGL.The files include the latest and greatest minified version of THREE.js.
three.min.js

Out of the box code to begin this project.

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

init();
animate();

function init() {

	camera = new THREE.PerspectiveCamera( 70, 1024 / 768 , 0.01, 10 );
	camera.position.z = 1;

	scene = new THREE.Scene();

	geometry = new THREE.BoxGeometry( 0.2, 0.2, 0.2 );
	material = new THREE.MeshNormalMaterial();

	mesh = new THREE.Mesh( geometry, material );
	scene.add( mesh );

	renderer = new THREE.WebGLRenderer( { antialias: true } );
	renderer.setSize( 1024 , 768 );
	document.body.appendChild( renderer.domElement );

}

function animate() {

	requestAnimationFrame( animate );

	mesh.rotation.x += 0.01;
	mesh.rotation.y += 0.02;

	renderer.render( scene, camera );

}

shapesTD.js

And a basic html file which references both THREE.js and the basic code for starting this project.

<html>
	<head>

    	<title>Shapes TD</title>

	</head>
	<body oncontextmenu="return false;">

		<script src='three.min.js'></script>
		<script src='shapesTD.js'></script>

	</body>
</html>

ShapesTD.html
 

Once you click on the html file with both of the other files in the same directory you should see a spinning cube.
cube.png.18d4ba2681dec815fab1f1e01c01cbb6.png

If not, check to see if you have WebGL support enabled on the browser you are using.  


This will be my starting base.  I figured I'd throw in the code as well so that if any beginner wants to have a shot at an extremely easy language, JavaScript, and a well documented API, then these files are for you.

 



3 Comments


Recommended Comments

Thanks for posting! :) I've never used WebGL before, and even had to turn down a client project at one time because they wanted a 3D JavaScript application. This is something on my bucket list to learn in the future.

Share this comment


Link to comment

I've heard good things about three.js, looks relatively simple!

Share this comment


Link to comment

Hi,

I rewrote your example in TypeScript.

Playground

intro-to-threejs.zip

Program.ts

import { MyScene } from "./MyScene";

export class Program
{
    public static main()
    {
        let scene = new MyScene();
        scene.Init();
        scene.Animate();
    }
}

Program.main();

MyScene.ts

import * as THREE from "three";

export class MyScene
{
    private _camera: THREE.PerspectiveCamera;
    private _scene: THREE.Scene;
    private _mesh: THREE.Mesh;
    private _renderer: THREE.WebGLRenderer;

    public constructor()
    {
        this._camera = new THREE.PerspectiveCamera(
            70, window.innerWidth / window.innerHeight, 0.01, 10);
        this._scene = new THREE.Scene();

        let geometry = new THREE.BoxGeometry(0.2, 0.2, 0.2);
        let material = new THREE.MeshNormalMaterial();
        this._mesh = new THREE.Mesh(geometry, material);

        this._renderer = new THREE.WebGLRenderer({ antialias: true });
    }

    public Animate(): void
    {
        requestAnimationFrame(() => this.Animate());

        this._mesh.rotation.x += 0.01;
        this._mesh.rotation.y += 0.01;

        this._renderer.render(this._scene, this._camera);
    }
    public Init(): void
    {
        this._camera.position.z = 1;
        this._scene.add(this._mesh);
        this._renderer.setSize(window.innerWidth, window.innerHeight);
        document.body.appendChild(this._renderer.domElement);
    }
}

 

Edited by 8Observer8

Share this comment


Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Advertisement
×

Important Information

By using GameDev.net, you agree to our community Guidelines, Terms of Use, and Privacy Policy.

Participate in the game development conversation and more when you create an account on GameDev.net!

Sign me up!