-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
100 lines (75 loc) · 2.7 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
<!DOCTYPE html>
<html>
<head>
<title>TriPAS</title>
<script type="text/javascript" src="lib/three.min.js"></script>
<script type="text/javascript" src="lib/jquery.js"></script>
<script type="text/javascript" src="lib/jquery-ui.js"></script>
<link rel="stylesheet" href="lib/jquery-ui.css" />
<link rel="stylesheet" href="lib/jquery-ui.theme.css" />
</head>
<body>
<div id="here" style="width:640px; height:520px; margin: 100px auto">
<div>
<button id="red" type="button">Red</button>
<button id="green" type="button">Green</button>
<button id="blue" type="button">Blue</button>
<span id="slider" style="width: 300px;display:inline-block"></span>
</div>
<div id="gl" style="width:640px; height:480px; margin: 0"></div>
</div>
<script type="text/javascript">
function material_for_color(col) {
return new THREE.MeshPhongMaterial( { ambient: col, color: col, specular: 0xffffff, shininess: 30, shading: THREE.FlatShading } );
}
$(function() {
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(75, 640/480, 0.1, 1000);
var light1 = new THREE.AmbientLight( 0x202020 ); // soft white light
scene.add( light1 );
var light2 = new THREE.PointLight( 0xffffff, 1, 100 );
light2.position.set( 10, 10, 10 );
scene.add( light2 );
var renderer = new THREE.WebGLRenderer();
renderer.setSize(640, 480);
document.getElementById("gl").appendChild(renderer.domElement);
var geometry = new THREE.BoxGeometry(1,1,1);
// var geometry = new THREE.Geometry();
// geometry.vertices.push(
// new THREE.Vector3( -1, 1, 0 ),
// new THREE.Vector3( -1, -1, 0 ),
// new THREE.Vector3( 1, -1, 0 )
// );
geometry.faces.push( new THREE.Face3( 0, 1, 2 ) );
geometry.computeBoundingSphere();
//var material = new THREE.MeshBasicMaterial({color: 0x4444aa});
var cube = new THREE.Mesh(geometry, material_for_color(0xdddddd));
scene.add(cube);
camera.position.z = 5;
$("#red").button().click(function(e) { cube.material = material_for_color(0xff0000); });
$("#green").button().click(function(e) { cube.material = material_for_color(0x00ff00); });
$("#blue").button().click(function(e) { cube.material = material_for_color(0x0000ff); });
var speed = 5;
var changeSpeed = function(e) {
speed = $("#slider").slider("value");
}
$( "#slider" ).slider({
orientation: "horizontal",
range: "min",
max: 10,
value: 5,
slide: changeSpeed,
change: changeSpeed
});
// $("#slider").values = [1,2,3,4,5];
var render = function () {
requestAnimationFrame(render);
cube.rotation.x += speed * 0.01;
cube.rotation.y += speed * 0.01;
renderer.render(scene, camera);
};
render();
});
</script>
</body>
</html>