threejs-example/flat.html at main · fvn-manhtd/threejs-example · 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
118
119
120
121
122
123
124
125
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
        <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
		<title>My first three.js app</title>
		<style>
			body { margin: 0; background: #000; }
            canvas { width: 100%; height: 100% }
		</style>
	</head>
	<body>
        <script src='https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js'></script>
        <script src="https://assets.codepen.io/127738/MeshSurfaceSampler_20210711.js"></script>
        <script src="js/obj.js"></script>
        <script src="js/mtl.js"></script>
        <script src="https://assets.codepen.io/127738/OrbitControls.js"></script>
		<script>
			console.clear();

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

            const renderer = new THREE.WebGLRenderer({
            antialias: true,
            alpha: true
            });
            renderer.setSize(window.innerWidth, window.innerHeight);
            document.body.appendChild(renderer.domElement);

            camera.position.z = 200;
            camera.position.y = 80;

            const controls = new THREE.OrbitControls(camera, renderer.domElement);

            const group = new THREE.Group();
            scene.add(group);

            /* Store each particle coordinates & color */
            const vertices = [];
            const colors = [];
            /* The geometry of the points */
            const sparklesGeometry = new THREE.BufferGeometry();
            /* The material of the points */
            const sparklesMaterial = new THREE.PointsMaterial({
                size: 0.5,
                alphaTest: 0.2,
                vertexColors: true // Let Three.js knows that each point has a different color
            });
            /* Create a Points object */
            const points = new THREE.Points(sparklesGeometry, sparklesMaterial);
            /* Add the points into the scene */
            group.add(points);

            let sampler = null;
            let elephant = null;
            new THREE.OBJLoader().load(
            "obj/flat.obj",
            (obj) => {
                elephant = obj.children[0];
                elephant.material = new THREE.MeshBasicMaterial({
                wireframe: true,
                color: 0x000000,
                transparent: true,
                opacity: 0.05
                });
                group.add(obj);

                sampler = new THREE.MeshSurfaceSampler(elephant).build();

                renderer.setAnimationLoop(render);
            },
            (xhr) => console.log((xhr.loaded / xhr.total) * 100 + "% loaded"),
            (err) => console.error(err)
            );

            /* Define the colors we want */
            const palette = [new THREE.Color("#FAAD80"), new THREE.Color("#FF6767"), new THREE.Color("#FF3D68"), new THREE.Color("#A73489")];
            /* Vector to sample the new point */
            const tempPosition = new THREE.Vector3();

            function addPoint() {
                /* Sample a new point */
                sampler.sample(tempPosition);
                /* Push the point coordinates */
                vertices.push(tempPosition.x, tempPosition.y, tempPosition.z);
                /* Update the position attribute with the new coordinates */
                sparklesGeometry.setAttribute("position", new THREE.Float32BufferAttribute(vertices, 3)  );

                /* Get a random color from the palette */
                const color = palette[Math.floor(Math.random() * palette.length)];
                /* Push the picked color */
                colors.push(color.r, color.g, color.b);
                /* Update the color attribute with the new colors */
                sparklesGeometry.setAttribute("color", new THREE.Float32BufferAttribute(colors, 3));
            }

            function render(a) {
                group.rotation.y += 0.002;

                /* If there are less than 10,000 points, add a new one*/
                if (vertices.length < 30000) {
                    addPoint();
                }

                controls.update();
                renderer.render(scene, camera);
            }

            window.addEventListener("resize", onWindowResize, false);

            function onWindowResize() {
                camera.aspect = window.innerWidth / window.innerHeight;
                camera.updateProjectionMatrix();
                renderer.setSize(window.innerWidth, window.innerHeight);
            }

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