/
index.html
114 lines (95 loc) · 2.85 KB
/
index.html
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
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<title>DONUTS</title>
<link rel="shortcut icon" type="image/png" href="images/donut.png"/>
<style>
body { margin: 0; }
.button {
background: pink;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 1.4rem;
left: 50%;
top: 50%;
outline: none;
padding: 1rem 3rem;
position: absolute;
transform: translate(-50%, -50%);
transition: background .2s linear;
}
.button:hover {
background: hotpink;
transition: background .2s linear;
}
</style>
</head>
<body>
<button class="button">Create donut</button>
<canvas id="myCanvas"></canvas>
<script src="js/three.js"></script>
<script>
var renderer = new THREE.WebGLRenderer({ canvas: document.getElementById('myCanvas'), antialias: true });
// RENDER
renderer.setClearColor('#'+Math.floor(Math.random()*16777215).toString(16));
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
// CAMERA
var camera = new THREE.PerspectiveCamera(35, window.innerWidth / window.innerHeight, 0.1, 10000);
camera.position.set(0, 0, 0);
// SCENE
var scene = new THREE.Scene();
// LIGHTS
var light = new THREE.AmbientLight(0xffffff, 0.5);
scene.add(light);
var light2 = new THREE.DirectionalLight(0xffffff, .5);
light2.position.set(-250, 500, 150);
scene.add(light2);
var light3 = new THREE.PointLight(0xffffff, .5);
light3.position.set(-250, -150, 50);
scene.add(light3);
var light4 = new THREE.PointLight(0xffffff, 1);
light4.position.set(1000, 1000, 100);
scene.add(light4);
// GEOMETRY
function donut(color, posX, posY, posZ) {
var donut = new THREE.TorusGeometry(200, 100, 100, 100);
donutMaterial = new THREE.MeshPhysicalMaterial( {
map: null,
color: color,
metalness: 0.0,
roughness: 0,
opacity: 1,
transparent: false,
envMapIntensity: 5,
premultipliedAlpha: true,
clearCoat: 1.0,
reflectivity: 1
} );
var donutMesh = new THREE.Mesh(donut, donutMaterial);
donutMesh.position.set(posX, posY, posZ);
// ADD TO SCENE
scene.add(donutMesh);
// RENDER LOOP
requestAnimationFrame(render);
function render() {
donutMesh.rotation.x += 0.01;
donutMesh.rotation.y += 0.01;
renderer.render(scene, camera);
requestAnimationFrame(render);
}
}
// GENERATE DONUT
const button = document.querySelector('.button');
button.addEventListener('click', function() {
let color = '#'+Math.floor(Math.random()*16777215).toString(16);
let posX = Math.floor((Math.random() * 1999) - 999);
let posY = Math.floor((Math.random() * 1999) - 999);
let posZ = Math.floor((Math.random() * -2000) - 1000);
donut(color, posX, posY, posZ);
});
</script>
</body>
</html>