soolx.github.io/index.jade at master · soolx/soolx.github.io · 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
115
116
117
doctype html
html(lang='en')
    head
        meta(charset='utf-8')
        meta(http-equiv='X-UA-Compatible', content='IE=edge')
        meta(name='viewport', content='width=device-width, initial-scale=1')
        meta(name='author', content='soolx')

        title Soolx
        // Bootstrap core CSS
        link(href='https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css', rel='stylesheet')

        link(href='css/main.min.css', rel='stylesheet')
        //Jquery
        script(src='https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js')
        // Bootstrap core JavaScript
        script(src='https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js')
    body
        nav.navbar.navbar-default.navbar-fixed-top
            div.container
                div.navbar-header
                    button.navbar-toggle.collapsed(type='button', data-toggle='collapse', data-target='#navbar',
                        aria-expanded='false', aria-controls='navbar')
                        span.sr-only Toggle navigation
                        span.icon-bar
                        span.icon-bar
                        span.icon-bar
                    a#title.navbar-brand(href='/') Soolx
                div#navbar.navbar-collapse.collapse
                    ul.nav.navbar-nav
                        //li.active
                        //    a(href='/') Home
                        li
                            a(href='http://blog.soolx.top', target='_blank') Blog
                        li
                            a(href='/react-music-player', target='_blank') Music Player
                        li
                            a(href='https://github.com/soolx', target='_blank') GitHub
                        li
                            a(href='mailto:soolxcode@gmail.com', target='_blank') Email

        //div.container-fluid
        //    div.row
        div#threejs

        script(src="https://cdn.bootcss.com/three.js/r83/three.min.js")
        script(src="public/lib/threejs/renderers/Projector.js")
        script(src="public/lib/threejs/renderers/CanvasRenderer.js")
        script.
            var container;
            var camera, scene, renderer;
            var group;
            var mouseX = 0, mouseY = 0;
            var windowHalfX = window.innerWidth / 2;
            var windowHalfY = (window.innerHeight - 30) / 2;
            document.addEventListener( 'mousemove', onDocumentMouseMove, false );
            init();
            animate();
            function init() {
                container = document.createElement('div');
                //document.body.appendChild( container );
                $("#threejs").append(container);
                camera = new THREE.PerspectiveCamera( 60, window.innerWidth / (window.innerHeight - 30), 1, 10000 );
                camera.position.z = 500;
                scene = new THREE.Scene();
                var geometry = new THREE.BoxGeometry( 100, 100, 100 );
                var material = new THREE.MeshNormalMaterial( { overdraw: 0.5 } );
                group = new THREE.Group();
                for ( var i = 0; i < 200; i ++ ) {
                    var mesh = new THREE.Mesh( geometry, material );
                    mesh.position.x = Math.random() * 2000 - 1000;
                    mesh.position.y = Math.random() * 2000 - 1000;
                    mesh.position.z = Math.random() * 2000 - 1000;
                    mesh.rotation.x = Math.random() * 2 * Math.PI;
                    mesh.rotation.y = Math.random() * 2 * Math.PI;
                    mesh.matrixAutoUpdate = false;
                    mesh.updateMatrix();
                    group.add( mesh );
                }
                scene.add( group );
                renderer = new THREE.CanvasRenderer();
                renderer.setClearColor( 0xffffff );
                renderer.setPixelRatio( window.devicePixelRatio );
                renderer.setSize( window.innerWidth, (window.innerHeight - 30) );
                container.appendChild( renderer.domElement );
                //stats = new Stats();
                //container.appendChild( stats.dom );
                //
                window.addEventListener( 'resize', onWindowResize, false );
            }
            function onWindowResize() {
                windowHalfX = window.innerWidth / 2;
                windowHalfY = (window.innerHeight - 30)/ 2;
                camera.aspect = window.innerWidth / (window.innerHeight - 30);
                camera.updateProjectionMatrix();
                renderer.setSize( window.innerWidth, (window.innerHeight - 30) );
            }
            function onDocumentMouseMove(event) {
                mouseX = ( event.clientX - windowHalfX ) * 10;
                mouseY = ( event.clientY - windowHalfY ) * 10;
            }
            //
            function animate() {
                requestAnimationFrame(animate);
                render();
                //stats.update();
            }
            function render() {
                camera.position.x += ( mouseX - camera.position.x ) * .05;
                camera.position.y += ( - mouseY - camera.position.y ) * .05;
                camera.lookAt( scene.position );
                var currentSeconds = Date.now();
                group.rotation.x = Math.sin( currentSeconds * 0.0007 ) * 0.5;
                group.rotation.y = Math.sin( currentSeconds * 0.0003 ) * 0.5;
                group.rotation.z = Math.sin( currentSeconds * 0.0002 ) * 0.5;
                renderer.render( scene, camera );
            }