threeJsLoadJSONFileFromBlenderSampleStudy/main.html at master · scott1028/threeJsLoadJSONFileFromBlenderSampleStudy · 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
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
<!doctype html>
<html lang="zh-TW">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <!--
    <script src="jquery-1.10.2.min.js"></script>
    <script src="three.min.js"></script>
    -->
    <script src="https://code.jquery.com/jquery-2.1.4.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r66/three.js"></script>
</head>
<body>
    <div id="container" style="display:block;width:100%;height:100%;"></div>
    <script>
        'strict';

        var scene = new THREE.Scene();                  // 建立場景
        var camera = new THREE.PerspectiveCamera(       // 設定設視點
            75,
            window.innerWidth/window.innerHeight,
            1,
            1000
        );
        camera.position.z = 5;

        var renderer = new THREE.WebGLRenderer({antialias:true});       // 建立依照 "視點" 來渲染 "場景、物件" 的渲染器( 3D WebGL )
        // var renderer = new THREE.CanvasRenderer();                   // 建立依照 "視點" 來渲染 "場景、物件" 的渲染器( 2D Canvas )

        renderer.setSize(window.innerWidth, window.innerHeight);                            // Renderer 的相關參數
        document.body.appendChild(renderer.domElement);

        // var geometry = new THREE.CubeGeometry(2,2,2);                                    // 建立幾何物件
        // var geometry = new THREE.SphereGeometry(1, 10, 10);                              // 建立幾何物件
        var material = new THREE.MeshBasicMaterial( { color: 0x505050 } );                  // 純色材質
        // var material = new THREE.MeshLambertMaterial( { color: 0x505050 } );             // 純色材質
        var material = new THREE.MeshLambertMaterial({
            map: THREE.ImageUtils.loadTexture("01_-_Default1noCulling.JPG"),
            map: THREE.ImageUtils.loadTexture("02_-_Default1noCulling.JPG"),
            map: THREE.ImageUtils.loadTexture("03_-_Default1noCulling.JPG"),
        });                                                                                 // 使用圖片材質

        // 建立 Mesh 物件
        // var cube = new THREE.Mesh( geometry );
        // var cube = new THREE.Mesh( geometry, material );
        // scene.add( cube );

        var loader=new THREE.JSONLoader();
        var mesh;

        var obj=2
        switch(obj){
            case 1:
                loader.load( "knight.js", function( geometry ) {
                    window.mesh = new THREE.Mesh( geometry, material );
                    mesh.scale.set(.3, .3, .3);
                    mesh.position.set(0, -2, 0);
                    scene.add(mesh);
                });
                break;
            case 2: /*From Google SketchUp Lib*/
                loader.load( "female.js", function( geometry ) {
                    window.mesh = new THREE.Mesh( geometry, material );
                    mesh.scale.set(.03, .03, .03);
                    mesh.position.set(0, -2, 0);
                    scene.add(mesh);
                });
                break;
            case 3:
                loader.load( "cube.js", function( geometry ) {
                    window.mesh = new THREE.Mesh( geometry, material );
                    mesh.scale.set(1, 1, 1);
                    mesh.position.set(0, -2, 0);
                    scene.add(mesh);
                });
                break;
            case 4: /*From ZBrush to Blender to ThreeJS*/
                loader.load( "animal.js", function( geometry ) {
                    window.mesh = new THREE.Mesh( geometry );
                    // window.mesh = new THREE.Mesh( geometry, material );
                    mesh.scale.set(2, 2, 2);
                    mesh.position.set(0, 0, 0);
                    scene.add(mesh);
                });
                break;
        }

        // // 加入環境光
        var ambientLight = new THREE.AmbientLight(0x555555);
        scene.add(ambientLight);

        // // 加入方向光
        var directionalLight = new THREE.DirectionalLight(0xffffff);
        directionalLight.position.set(1, 1, 1).normalize();
        scene.add(directionalLight);

        function render() {
            requestAnimationFrame(render);
            renderer.render(scene, camera);
            if(mesh) mesh.rotation.y+=.01;
        }
        render();


    </script>
</body>
</html>