learningThreeJS/c01_04-animation.html at master · sqlcn/learningThreeJS · 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
108
109
110
111
112
113
114
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>chapter01 04 animation</title>
    <script src="libs/three.js"></script>
    <script src="libs/stats.js"></script>
    <style>
        body {
            margin: 0;
            overflow: hidden;
        }
    </style>
</head>

<body>
    <div id="WebGL-output"></div>
    <div id="Stats-output"></div>

    <script>
        function initStats() {
            var stats = new Stats();
            stats.setMode(0);
            stats.domElement.style.position = 'absolute';
            stats.domElement.style.left = '0px';
            stats.domElement.style.top = '0px';
            document.getElementById("Stats-output").appendChild(stats.domElement);
            return stats;
        }

        function init() {
            var stats = initStats();

            var scene = new THREE.Scene();
            var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);

            var renderer = new THREE.WebGLRenderer();
            renderer.setClearColor(0xEEEEEE);
            renderer.setSize(window.innerWidth, window.innerHeight);
            renderer.shadowMapEnabled = true;

            var axes = new THREE.AxisHelper(10);
            scene.add(axes);

            var planeGeometry = new THREE.PlaneGeometry(60, 20, 1, 1);
            var planeMaterial = new THREE.MeshLambertMaterial({ color: 0xcccccc });
            var plane = new THREE.Mesh(planeGeometry, planeMaterial);

            plane.rotation.x = -0.5 * Math.PI;
            plane.position.x = 15;
            plane.position.y = 0;
            plane.position.z = 0;
            plane.receiveShadow = true;

            scene.add(plane);

            var cubeGeometry = new THREE.BoxGeometry(4, 4, 4);
            var cubeMaterial = new THREE.MeshLambertMaterial({ color: 0xff0000 });
            var cube = new THREE.Mesh(cubeGeometry, cubeMaterial);

            cube.position.x = -4;
            cube.position.y = 3;
            cube.position.z = 0;
            cube.castShadow = true;

            scene.add(cube);

            var sphereGeometry = new THREE.SphereGeometry(4, 16, 16)
            var sphereMaterial = new THREE.MeshLambertMaterial({ color: 0x7777ff });
            var sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);

            sphere.position.x = 20;
            sphere.position.y = 4;
            sphere.position.z = 2;
            sphere.castShadow = true;

            scene.add(sphere);

            var spotLight = new THREE.SpotLight(0xffffff);
            spotLight.position.set(-40, 60, -10);
            spotLight.castShadow = true

            scene.add(spotLight);

            camera.position.x = -30;
            camera.position.y = 40;
            camera.position.z = 30
            camera.lookAt(scene.position);

            document.getElementById("WebGL-output").appendChild(renderer.domElement);

            var step = 0;
            function renderScene() {
                stats.update();
                requestAnimationFrame(renderScene);
                renderer.render(scene, camera);

                cube.rotation.x += 0.02;
                cube.rotation.y += 0.02;
                cube.rotation.z += 0.02;

                step += 0.04;
                sphere.position.x = 20 + (10 * (Math.cos(step)));
                sphere.position.y = 2 + (10 * Math.abs(Math.sin(step)));

            }
            renderScene();
        };
        window.onload = init;
    </script>
</body>

</html>