-
Notifications
You must be signed in to change notification settings - Fork 0
/
index1.html
65 lines (49 loc) · 1.54 KB
/
index1.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
<head>
<link
href="https://fonts.googleapis.com/css2?family=Baloo+Tamma+2&display=swap"
rel="stylesheet"
/>
<script src="//cdn.rawgit.com/mrdoob/three.js/master/build/three.js"></script>
<script src="//cdn.rawgit.com/mrdoob/three.js/master/examples/js/controls/OrbitControls.js"></script>
</head>
<body>
<script>
// Question Reference: discourse.threejs.org/...
let camera, scene, renderer, controls, mesh;
const createWorld = () => {
mesh = new THREE.Mesh(
new THREE.BoxBufferGeometry(2, 2, 2),
new THREE.MeshStandardMaterial({ color: 0xff9999 })
);
scene.add(mesh);
camera.lookAt(mesh.position);
setInterval(() => {
mesh.rotateY(0.001);
}, 1 / 60);
};
const init = () => {
camera = new THREE.PerspectiveCamera(
60,
window.innerWidth / window.innerHeight,
0.1,
1000.0
);
camera.position.set(-5, 5, 7);
scene = new THREE.Scene();
scene.background = new THREE.Color(0x333333);
scene.add(new THREE.HemisphereLight(0xffffcc, 0x19bbdc, 1));
renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
controls = new THREE.OrbitControls(camera, renderer.domElement);
createWorld();
};
const animate = () => {
requestAnimationFrame(animate);
controls.update();
renderer.render(scene, camera);
};
init();
animate();
</script>
</body>