Three.js
Introduction

What Three.js
Can Do?

What WebGL
Can Do?

What is webGL?

  • Javascript API
  • Based on openGL
  • Draw 2D/3D via canvas
  • Web browser 3D standard

What Three.js
Can Do?

  • Based on WebGL
  • Just like jquery vs js

WebGL - init position

WebGL - Draw

<body onload="main()">
    <canvas id="webgl" width="400" height="400">
        Please use a browser that supports "canvas"
    </canvas>
</body>

WebGL - Draw 

function main() {
    var canvas = document.getElementById('webgl');
    // init WebGL
    var gl = getWebGLContext(canvas);
    if (!gl) {
        console.log('Failed to get the rendering context for WebGL');
        return;
    }
    // init shaders
    if (!initShaders(gl, VSHADER_SOURCE, FSHADER_SOURCE)) {
        console.log('Failed to intialize shaders.');
        return;
    }
    // get a_Position 
    var a_Position = gl.getAttribLocation(gl.program, 'a_Position');
    if (a_Position < 0) {
        console.log('Failed to get the storage location of a_Position');
        return;
    }
    // mouse event register
    canvas.onmousedown = function(ev) {
        click(ev, gl, canvas, a_Position);
    };

    // set canvas background color
    gl.clearColor(0.0, 0.0, 0.0, 1.0);

    // clear canvas
    gl.clear(gl.COLOR_BUFFER_BIT);
}

Shaders

create shaders

1.gl.createShader
2.gl.shaderSource
3.gl.compileShader
4.gl.createProgram
5.gl.attachShader
6.gl.linkProgram
7.gl.useProgram

transform WebGL
Position

function click(ev, gl, canvas, a_Position) {
        var x = ev.clientX; // 滑鼠 x 座標
        var y = ev.clientY; // 滑鼠 y 座標
        var rect = ev.target.getBoundingClientRect();

        x = ((x - rect.left) - canvas.width / 2) / (canvas.width / 2);// 處理得到相對應的 canvas x 座標
        y = (canvas.height / 2 - (y - rect.top)) / (canvas.height / 2);// 處理得到相對應的 canvas y 座標
        g_points.push(x);
        g_points.push(y);

        gl.clear(gl.COLOR_BUFFER_BIT);

        var len = g_points.length;
        for (var i = 0; i < len; i += 2) {
            // 將所有點位傳給 a_Position
            gl.vertexAttrib3f(a_Position, g_points[i], g_points[i + 1], 0.0);

            // draw
            gl.drawArrays(gl.POINTS, 0, 1);
        }
    }

WebGL Demo

Three.js

Three.js Sitemap

Three.js Sitemap

Main Func

  • Scene
  • Camera
  • Render

Initialising Scene and Camera

this.scene = new THREE.Scene();
    this.camera = new THREE.PerspectiveCamera(75, width / height,    0.1, 1000);
initializeCamera() {
    this.camera.position.x = 0;
    this.camera.position.y = 0;
    this.camera.position.z = 5;
}

Initialise Renderer and Append to Canvas

this.renderer = new THREE.WebGLRenderer({ antialias: true });
this.renderer.setSize(width, height);
this.mount.appendChild(this.renderer.domElement);

Set Orbit Controls

const OrbitControls = require("three-orbit-controls")(THREE);
this.controls = new OrbitControls(this.camera,    this.renderer.domElement);
initializeOrbits() {
    this.controls.rotateSpeed = 1.0;
    this.controls.zoomSpeed = 1.2;
    this.controls.panSpeed = 0.8;
}

Add Our 3D Object

const geometry = new THREE.BoxGeometry( 1, 1, 1 ); 
const material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } ); 
const cube = new THREE.Mesh( geometry, material ); 
scene.add( cube );

Render Loop

animate() {
    this.frameId = window.requestAnimationFrame(this.animate);
    this.renderer.render(this.scene, this.camera);
}

React Three.js
Demo

Made with Slides.com