3DGraphics/cube.html at master · voodarkdoo/3DGraphics · 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
!DOCTYPE html>
<html>
	<head>
		<title>Cube</title>
		<style>
			body { margin: 0; }
		</style>
	</head>
	<body>
		<script src="lib/three.js"></script>
		<script>
			const scene = new THREE.Scene();
			const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );

			const renderer = new THREE.WebGLRenderer();
			renderer.setSize( window.innerWidth, window.innerHeight );
			document.body.appendChild( renderer.domElement );

            var material, geometry, mesh;
            material = new THREE.MeshBasicMaterial({
                vertexColors: THREE.FaceColors,
                side: THREE.DoubleSide
            });
            geometry = new THREE.Geometry();
            geometry.vertices.push(
            new THREE.Vector3(1, 2, 0), //0
            new THREE.Vector3(1, 1, 0), //1
            new THREE.Vector3(2, 1, 0), //2
            new THREE.Vector3(2, 2, 0), //3

            new THREE.Vector3(1, 2, 1), //4
            new THREE.Vector3(1, 1, 1), //5
            new THREE.Vector3(2, 1, 1), //6
            new THREE.Vector3(2, 2, 1), //7
            );

            geometry.faces.push(
            new THREE.Face3(0, 1, 2),
            new THREE.Face3(0, 2, 3),

            new THREE.Face3(4, 5, 6),
            new THREE.Face3(4, 6, 7),

            new THREE.Face3(0, 4, 1),
            new THREE.Face3(1, 5, 4),

            new THREE.Face3(0, 4, 7),
            new THREE.Face3(0, 3, 7),

            new THREE.Face3(1, 2, 5),
            new THREE.Face3(5, 6, 2),

            new THREE.Face3(3, 2, 6),
            new THREE.Face3(7, 6, 3),
            );


            geometry.faces[0].color = geometry.faces[1].color = new THREE.Color('red');
            geometry.faces[2].color = geometry.faces[3].color = new THREE.Color('yellow');
            geometry.faces[4].color = geometry.faces[5].color = new THREE.Color('green');
            geometry.faces[6].color = geometry.faces[7].color = new THREE.Color('cyan');
            geometry.faces[8].color = geometry.faces[9].color = new THREE.Color('blue');
            geometry.faces[10].color = geometry.faces[11].color = new THREE.Color('magenta');


            mesh = new THREE.Mesh(geometry, material);
            scene.add(mesh);

			camera.position.z = 5;

			const animate = function () {
				requestAnimationFrame( animate );

                mesh.rotation.y += 0.01;


				renderer.render( scene, camera );
			};

			animate();
		</script>
	</body>
</html>