ThreeExample.js/Chapter7/7.3.2.html at master · WebGameLinux/ThreeExample.js · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>
        <script type="text/javascript" src="../lib/three.js"></script>
        <script type="text/javascript" src="../lib/MTLLoader.js"></script>
        <script type="text/javascript" src="../lib/OBJLoader.js"></script>

        <script type="text/javascript">
            var scene = null;
            var camera = null;
            var renderer = null;

            var mesh = null;
            var id = null;

            function init() {
                renderer = new THREE.WebGLRenderer({
                    canvas: document.getElementById('mainCanvas')
                });
                renderer.setClearColor(0x000000);
                scene = new THREE.Scene();

                camera = new THREE.OrthographicCamera(-5, 5, 3.75, -3.75, 0.1, 100);
                camera.position.set(15, 25, 25);
                camera.lookAt(new THREE.Vector3(0, 2, 0));
                scene.add(camera);

                // material loader
                var mtlLoader = new THREE.MTLLoader();
                mtlLoader.setPath('../lib/');
                mtlLoader.load('port.mtl', function(materials) {
                    materials.preload();

                    // model loader
                    var objLoader = new THREE.OBJLoader();
                    objLoader.setMaterials(materials);
                    objLoader.setPath('../lib/');
                    objLoader.load('port.obj', function ( object ) {
                        object.position.y = - 95;
                        // if has object, add to scene
                        if (object.children.length > 0) {
                            scene.add( object.children[0] );
                        }
                    });
                });

                var light = new THREE.DirectionalLight(0xffffff);
                light.position.set(20, 10, 5);
                scene.add(light);

                id = setInterval(draw, 20);
            }

            function draw() {
                renderer.render(scene, camera);
            }
        </script>
    </head>

    <body onload="init()">
        <canvas id="mainCanvas" width="400px" height="300px" ></canvas>
    </body>
</html>