Engine Three.js WEB3D

Untuk pembuataan Cube :

putaran cube ke atas bawah

function render() {

plane.rotation.z = cube.rotation.x += ( targetRotation - cube.rotation.x ) * 0.05;

renderer.render( scene, camera );

}

Pembentukan sisi cube

cube = new THREE.Mesh( new THREE.CubeGeometry( 300, 300, 300, 1, 0, 0, materials ), new THREE.MeshFaceMaterial() );

Pembentukan warna cube jadi random                                                

var materials = [];

for ( var i = 0; i < 6; i ++ ) {materials.push( [ new THREE.MeshBasicMaterial( { color:Math.random() *0xffff00 } ) ] );

 

Line
Membuat titik dan warnanya

var PI2 = Math.PI * 2;

var material = new THREE.ParticleCanvasMaterial( {

color: 0xff00ff,

program: function ( context ) {

context.beginPath();

context.arc( 1, 0, 1, 0, PI2, true );

context.closePath();

context.fill();

                                                                                }

                                                                } );

Pembuatan garis dan wana

var line = new THREE.Line( geometry, new THREE.LineBasicMaterial( { color: 0xffff00, opacity: 0.5 } ) );

 scene.addObject( line );

Line sambung

Pembuatan titik dan warna

var PI2 = Math.PI * 2;

var material = new THREE.ParticleCanvasMaterial( {

color: 0xff00ff,

                                                                               program: function ( context ) {

                                                                                                context.beginPath();

                                                                                                context.arc( 0, 0, 1, 0, PI2, true );

                                                                                                context.closePath();

                                                                                                context.fill();

Penyambungan line

var geometry = new THREE.Geometry();

 for ( var i = 0; i < 1; i ++ ) {

                                                                       

                                                                                particle = new THREE.Particle( material );

                                                                                particle.position.x = 0 * 2;

                                                                                particle.position.y = 10 * 2;

                                                                                particle.position.z = 0 * 2;

                                                                                particle.position.normalize();

                                                                                particle.position.multiplyScalar( Math.random() * 10 +80 );

                                                                                particle.scale.x = particle.scale.y = 1;

                                                                                scene.addObject( particle );

                                                                                geometry.vertices.push( new THREE.Vertex( particle.position ) );

                                                                               

                                                                                particle = new THREE.Particle( material );

                                                                                particle.position.x = 100 * 2;

                                                                                particle.position.y = 10 * 2;

                                                                                particle.position.z = -5 * 2;

                                                                                particle.position.normalize();

                                                                                particle.position.multiplyScalar( Math.random() * 10 + 80 );

                                                                                particle.scale.x = particle.scale.y = 1;

                                                                                scene.addObject( particle );

                                                                                geometry.vertices.push( new THREE.Vertex( particle.position ) );

                                                                               

                                                                                particle = new THREE.Particle( material );

                                                                                particle.position.x = -2 * 2;

                                                                                particle.position.y = 100 * 2;

                                                                                particle.position.z = -5 * 2;

                                                                                particle.position.normalize();

                                                                                particle.position.multiplyScalar( Math.random() * 10 + 80 );

                                                                                particle.scale.x = particle.scale.y = 1;

                                                                                scene.addObject( particle );

                                                                                geometry.vertices.push( new THREE.Vertex( particle.position ) );

                                                                               

                                                                               

                                                                                particle = new THREE.Particle( material );

                                                                                particle.position.x = 5 * 2;

                                                                                particle.position.y = 25 * 2 ;

                                                                                particle.position.z = -5 * 2 ;

                                                                                particle.position.normalize();

                                                                                particle.position.multiplyScalar( Math.random() * 10 + 80 );

                                                                                particle.scale.x = particle.scale.y = 1;

                                                                                scene.addObject( particle );

                                                                                geometry.vertices.push( new THREE.Vertex( particle.position ) );

                                                                               

                                                                                particle = new THREE.Particle( material );

                                                                                particle.position.x = -5 * 2;

                                                                                particle.position.y = 25 * 2 ;

                                                                                particle.position.z = -5 * 2 ;

                                                                                particle.position.normalize();

                                                                                particle.position.multiplyScalar( Math.random() * 10 + 80 );

                                                                                particle.scale.x = particle.scale.y = 1;

                                                                                scene.addObject( particle );

                                                                                geometry.vertices.push( new THREE.Vertex( particle.position ) );

particle = new THREE.Particle( material );

                                                                                particle.position.x = -10 * 2;

                                                                                particle.position.y = 12 * 2 ;

                                                                                particle.position.z = 0 * 2 ;

                                                                                particle.position.normalize();

                                                                                particle.position.multiplyScalar( Math.random() * 10 + 80 );

                                                                                particle.scale.x = particle.scale.y = 1;

                                                                                scene.addObject( particle );

                                                                                geometry.vertices.push( new THREE.Vertex( particle.position ) );

particle = new THREE.Particle( material );

                                                                                particle.position.x = 0 * 2;

                                                                                particle.position.y = 0 * 2 ;

                                                                                particle.position.z = 0 * 2 ;

                                                                                particle.position.normalize();

                                                                                particle.position.multiplyScalar( Math.random() * 10 + 80 );

                                                                                particle.scale.x = particle.scale.y = 1;

                                                                                scene.addObject( particle );

                                                                                geometry.vertices.push( new THREE.Vertex( particle.position ) );

pembuatan line

var line = new THREE.Line( geometry, new THREE.LineBasicMaterial( { color: 0xffffff, opacity: 0.5 } ) );

scene.addObject( line );

                                                                document.addEventListener( 'mousemove', onDocumentMouseMove, false );

                                                                document.addEventListener( 'touchstart', onDocumentTouchStart, false );

                                                                document.addEventListener( 'touchmove', onDocumentTouchMove, false );

                                                                                }

                                                                } );