-
Notifications
You must be signed in to change notification settings - Fork 154
/
vizicube.html
55 lines (40 loc) · 1.45 KB
/
vizicube.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
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Programming 3D Applications in HTML5 and WebGL — A Simple Vizi Example</title>
<link rel="stylesheet" href="../css/main.css" />
<div id="container" style="width:98%; height:98%; position:absolute;background-color:black">
</div>
<script src="../libs/jquery-1.9.1/jquery-1.9.1.js"></script>
<script src="../libs/vizi/vizi.js"></script>
<script type="text/javascript">
$(document).ready(function() {
// Create the Vizi application object
var container = document.getElementById("container");
var app = new Vizi.Application({ container : container });
// Create a phong-shaded, texture-mapped cube
var cube = new Vizi.Object;
var visual = new Vizi.Visual(
{ geometry: new THREE.CubeGeometry(2, 2, 2),
material: new THREE.MeshPhongMaterial({map:THREE.ImageUtils.loadTexture("../images/webgl-logo-256.jpg")})
});
cube.addComponent(visual);
// Add a rotate behavior to give the cube some life
var rotator = new Vizi.RotateBehavior({autoStart:true});
cube.addComponent(rotator);
// Rotate the cube toward the viewer to show off the 3D
cube.transform.rotation.x = Math.PI / 5;
// Add a light to show shading
var light = new Vizi.Object;
light.addComponent(new Vizi.DirectionalLight);
// Add the cube and light to the scene
app.addObject(cube);
app.addObject(light);
// Run it
app.run();
}
);
</script>
</head>
<body>
</html>