-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
86 lines (69 loc) · 2.72 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>WebGL Demo</title>
<style type="text/css">
body, html { margin: 0; padding: 0; }
body { background-color: #000; }
div { width: 1000px; height: 500px; position: absolute; left: 50%; top: 50%; margin-left: -500px; margin-top: -250px; }
</style>
</head>
<body>
<div id="stage"></div>
<script type="text/javascript" src="three.js"></script>
<script type="text/javascript" src="primitives.js"></script>
<script type="text/javascript">
var camera, scene, material, cube, renderer, light, rotpos, drag, dragStart, dragCurrent;
// Initialize some vars
drag = false;
rotpos = [0, 0];
// Create the camera and give it a z position to use
camera = new THREE.PerspectiveCamera(45, 1000 / 500, 1, 10000);
camera.position.z = 300;
// Create a scene
scene = new THREE.Scene();
// Create a material
material = new THREE.MeshLambertMaterial({
color: 0xCC0000
});
// Create a cube with the material
cube = new THREE.Mesh(
new THREE.CubeGeometry(100, 100, 100),
material);
// Adds the cube to the scene
scene.add(cube);
// Render the webgl
renderer = new THREE.WebGLRenderer();
renderer.setSize(1000, 500);
// Create a point light
light = new THREE.PointLight(0xFFFFFF);
light.position.x = 200;
light.position.y = 200;
light.position.z = 1000;
// Add the light to the scene
scene.add(light);
document.getElementById('stage').appendChild(renderer.domElement);
function render() {
camera.lookAt(cube.position);
renderer.render(scene, camera);
requestAnimationFrame(render);
};
render();
window.addEventListener('mousedown', function(e) {
drag = true;
dragStart = [e.y + (cube.rotation.x * 1000) , e.x + (cube.rotation.y * 1000)];
});
window.addEventListener('mouseup', function(e) {
drag = false;
});
window.addEventListener('mousemove', function(e) {
if(drag === true) {
var diff = [dragStart[0] - e.y, dragStart[1] - e.x];
cube.rotation.x = (diff[0] / 1000);
cube.rotation.y = (diff[1] / 1000);
}
});
</script>
</body>
</html>