3.1.2 formal code structure & ORBIT CONTROLS plug (orbit control)

Explanation

This section belongs to insert a section, "Three.js Getting Started Guide" book, simply introduce some of the concepts, is an entry-level book basis.

In practice, in the learning process, I found that both the official, or Daniel's article, this is not to the structure of the code words. Confusion, not easy to manage and maintain.

Therefore, in order to continue after study, as well as a variety of benefits, it is necessary here, good to familiarize yourself with such good code structure.

In addition, previous learning, not difficult to find, we can not drag the mouse to better observe our performance in order to achieve this goal, we learn in advance about the track control. We first learn to control ORBIT track as a starting point.

Others are also similar, to learn when you can get started straight. Meanwhile, the Three.js provide us with a variety of different orbit control. The Orbit is the most commonly used.

Preview

Before the official start, a look at the effect to be realized.

We can use the mouse to be zoom, rotation, movement.

The complete code architecture <! DOCTYPE html>

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        html,
        body {
            margin: 0;
            height: 100%;
        }
        
        canvas {
            display: block;
        }
    </style>
</head>

<body onload="draw();">

</body>
<! - introduced Three.js ->
<script src="./three.js"></script>
<! - introduced OrbitControls controller js libraries ->
<script src="./OrbitControls.js"></script>
<script>
    // define variables renderer
    was renderer;

    // define initialization renderer
    function initRender() {
        renderer = new THREE.WebGLRenderer({
            antialias: true // turn on anti-aliasing
        });
        renderer.setSize (window.innerWidth, window.innerHeight); // set the size of the canvas Canvas
        document.body.appendChild (renderer.domElement); // canvas renderer dom bound to the new node;
    }

    // define the camera
    each camera;

    // initialize the camera
    function initCamera() {
        camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 10000);
        camera.position.set(0, 0, 400);
    }

    // define the scene
    var scene;

    // Initialize the scene
    function initScene() {
        scene = new THREE.Scene();
    }

    // definition of source
    was light;
    // initialization light source
    function initLight() {
        scene.add (new THREE.AmbientLight (0x404040)); // Add ambient light
        light = new THREE.DirectionalLight (0xffffff); // Add the parallel light
        light.position.set (1, 1, 1); // set the position of the light source
        scene.add (light); // needs to be added to the scene light sources
    }

    // define the model initialization function, the point is made, and the base model
    function initModel() {
        var map = new THREE.TextureLoader().load("./jay.jpg"); //皮肤
        var material = new THREE.MeshLambertMaterial({ //材质
            map: map
        });
        // define the base model, and paste the above definition of material
        var cube = new THREE.Mesh(new THREE.BoxGeometry(100, 100, 100, 1, 1, 1), material);
        scene.add(cube);
    }

    // definition of track for interactive controller
    var controls; // variables defined controller

    function initControls() {
        // define the core controller            
        controls = new THREE.OrbitControls(camera, renderer.domElement);

        // If you use animate method, this function deleted
        // controls.addEventListener('change', render);
        // The following are designed to meet the diverse needs of various controllers configuration parameters
        controls.enableDampling = true; // damping rotation animation or recycled if mean inertia
        controls.enableZoom = false; // whether to allow zooming
        controls.enablePan = false; // whether to turn right mouse button drag
        controls.autoRotate = true; // whether to allow automatic rotation
        controls.dampingFactor = 0.25; // dynamic damping: rotary drag the mouse sensitivity is
        controls.minDistance = 200; // set the camera nearest distance from the origin;
        controls.maxDistance = 600; // set the maximum distance from the origin of the camera;
    }

    function animate() {
        // update controller
        controls.update();
        render();
        requestAnimationFrame(animate);
    }

    // define the function trigger rendering
    function render() {
        renderer.render(scene, camera);
    }

    // window function changes triggered
    function onWindowResize() {
        camera.aspect = window.innerWidth / window.innerHeight;
        camere.updateProjectionMatrix();
        render();
        renderer.setSize(window.innerWidth, window.innerHeight);
    }

    All // method entry
    function draw() {
        initRender ();
        initScene();
        initCamera();
        initModel();
        initLight();
        initControls ();

        animate();
        window.onresize = onWindowResize;
    }
</script>

</html>

Not difficult to find, this code structure is very clear, easy to maintain and modify.

Meanwhile, here is the definition of Orbit way controller, you need to pay attention to it is that we need to introduce ORBIT CONTROLS js library plug (orbit control) alone: OrbitControls.js

"Three.js Getting Started Guide" 3.1.2 - a tidy structure of the code and the use of ORBIT CONTROLS plug (orbit control) implementation model control

3.1.2 formal code structure & ORBIT CONTROLS plug (orbit control)

Explanation

Preview

The complete code architecture <! DOCTYPE html>

Guess you like