three.js基础学习的基础代码

思来想去，我还是决定把基础代码放到一个地方，供大家参考，每次说复制上一节的代码，感觉比较麻烦。

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
<!DOCTYPE html>
    <html>
        <head>
            <title>three.js学习</title>
            <meta name="keywords" content="">
            <meta name="description" content="">
            <meta charset="utf8" />
            <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
            <!-- <script src="https://cdn.bootcdn.net/ajax/libs/three.js/r122/three.min.js"></script> -->
            <script src="./js/three.min.js"></script>
            <style>
                html,body{
                    height: 100%;
                    margin: 0;
                }
                #three{
                    display: block;
                    width: 100%;
                    height: 100%;
                }
            </style>
        </head>
        <body>
            <canvas id="three"></canvas>
            <script>
                function getSearchObj (key) {
                    const search = window.location.search.replace('?', '')
                    const list = search.split('&')
                    const obj = {}
                    for (let i = 0; i < list.length; i++) {
                        const eachList = list[i].split('=')
                        obj[eachList[0]] = eachList[1]
                    }
                    return obj[key]
                }
                async function main () {    
                    const search = location.search                
                    const canvas = document.querySelector('#three')
                    const renderer = new THREE.WebGLRenderer({canvas})
                    const fov = 75;
                    const aspect = 2;
                    const near = 0.1;
                    const far = 200;

                    const camera = new THREE.PerspectiveCamera(fov, aspect, near, far)

                    const group = new THREE.Group()
                    group.position.z = -10
                    
                    
                    // 在这里写学习的的demo代码
                    
                    
                    
                    
                    
                    const scene = new THREE.Scene()
                    
                    {
                        const lightColor = 0xffffff; // 灯光颜色
                        const intensity = 1; // 灯光强度
                        const light = new THREE.DirectionalLight(lightColor, intensity);
                        light.position.set(10,1,20);
                        light.castShadow = true;

                       
                        scene.add(light);

                    }
                    scene.add(group)

                    function resizeRenderSizeToDisplaySize () {
                        const pixelRatio = window.devicePixelRatio;
                        const displayWidth = canvas.clientWidth * pixelRatio 
                        const displayHeight = canvas.clientHeight * pixelRatio
                        const renderWidth = canvas.width;
                        const renderHeight = canvas.height;
                        const needResize = displayWidth !== renderWidth || displayHeight !== renderHeight
                        return needResize
                    }
                    function render (time) {
                        if (resizeRenderSizeToDisplaySize()) {
                            const pixelRatio = window.devicePixelRatio;
                            const width = canvas.clientWidth * pixelRatio
                            const height = canvas.clientHeight * pixelRatio
                            renderer.setSize(width, height, false)
                            camera.aspect = canvas.clientWidth  / canvas.clientHeight;
                            camera.updateProjectionMatrix();
                        }

                        time *= 0.001
                        group['children'].forEach((each, index) => {
                           if (index !== 1) {
                            each.rotation.x = -time
                            each.rotation.y = -time
                           }
                        })

                        renderer.render(scene, camera)
                        requestAnimationFrame(render)
                    }
                    requestAnimationFrame(render)
                    // render()
                }  
                main()
        </script>
        </body>
    </html>