THREE--demo4

效果

源码

import * as T from 'three'
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
import { useEffect, useRef } from 'react'
import Stats from 'stats.js'
import { GUI } from 'dat.gui'

const Demo4 = () => {
    let stats, scene, camera, renderer, orbitControls

    useEffect(() => {
        init()
    }, [])

    const ThreeContainer = useRef()

    // 检测动画运行的帧频
    const initStats = () => {
        stats = new Stats()
        stats.showPanel(1)
        ThreeContainer.current.append(stats.dom) 
    }

    // 场景，作为容器，保存并跟踪所有渲染的物体
    const initScene = () => {
        scene = new T.Scene()
    }

    // 相机
    const initCamera = () => {
        // 透视相机，参数：视场，长宽比，近面，远面
        camera = new T.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000)
        camera.position.set(-30, 40, 30)
        camera.lookAt(scene.position)
    }

    // 渲染器，计算指定相机角度下，浏览器中scene的样子
    const initRenderer = () => {
        renderer = new T.WebGLRenderer()
        renderer.setClearColor(0xeeeeee)
        renderer.setSize(window.innerWidth, window.innerHeight)
        // 将render的输出挂载到HTML页面框架中的元素上
        ThreeContainer.current.append(renderer.domElement)
    }

    // 轨道控制器
    const initOrbitControls = () => {
        orbitControls = new OrbitControls(camera, renderer.domElement)
    }

    // 创建粒子, sprite
    const createSprites = () => {
        for(let i = -5; i < 5; i++) {
            for(let j = -5; j < 5; j++) {
                for(let k = 0; k < 3; k++) {
                    // 精灵材质
                    const material = new T.SpriteMaterial({
                        color: Math.random() * 0xffffff
                    })
                    const sprite = new T.Sprite(material)
                    sprite.position.set(i * 10, j * 10, k * 10)
                    scene.add(sprite)
                }
            }
        }
    }

    // 创建点云，points
    const createPoints = () => {
        const geometry = new T.BufferGeometry()
        const positions = []
        const colors = []
        for(let i = -5; i < 5; i++) {
            for(let j = -5; j < 5; j++) {
                for(let k = 0; k < 3; k++) {
                    positions.push(i * 10, j * 10, 40 + k * 10)
					colors.push(Math.random(), Math.random(), Math.random())
                }
            }
        }
        geometry.setAttribute('position', new T.Float32BufferAttribute(positions, 3))
        geometry.setAttribute('color', new T.Float32BufferAttribute(colors, 3))
        
        const material = new T.PointsMaterial({
            // 点的大小
            size: 10,
            // 指定点的大小是否因相机深度而衰减，仅限透视摄像头
            sizeAttenuation: true,
            // 是否使用顶点着色
            vertexColors: true
        })
        const points = new T.Points(geometry, material)
        scene.add(points)
    }

    // 渲染场景
    const renderScene = () => {
        stats.update()

        // 以一定的时间间隔进行渲染
        requestAnimationFrame(renderScene)
        renderer.render(scene, camera)
    }

    const resize = () => {
        window.addEventListener('resize', () => {
            camera.aspect = window.innerWidth / window.innerHeight
            camera.updateProjectionMatrix()
            renderer.setSize(window.innerWidth, window.innerHeight)
        }, false)
    }

    // 初始化
    const init = () => {
        initStats()
        initScene()
        initCamera()
        initRenderer()
        createSprites()
        createPoints()
        initOrbitControls()
        renderScene()
        resize()
    }

    return (
        

    )
}

export default Demo4

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
118
119
120
121
122
123
124
125
126
127
128
129
130
131