forked from mushuying/Mythree
-
Notifications
You must be signed in to change notification settings - Fork 0
/
demo1.html
65 lines (60 loc) · 1.88 KB
/
demo1.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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Examples</title>
<style>
body{background: #000000;}
#mainCanvas{width:100%;height:500px;}
</style>
<script type="text/javascript" src="http://sandbox.runjs.cn/uploads/rs/340/p1qwizuy/three.min.js"></script>
<script type="text/javascript" src="stats.js"></script>
<script>
var camera, scene, renderer;
var lon = 90, lat = 0;
var phi = 0, theta = 0;
var target = new THREE.Vector3();
function init(){
// 创建渲染器
renderer = new THREE.WebGLRenderer({
canvas: document.getElementById('mainCanvas')
})
renderer.setClearColor(0x000000);
// 场景
scene = new THREE.Scene();
// 相机
camera = new THREE.OrthographicCamera(-5, 5, 3.75, -3.75, 0.1, 100);
camera.position.set(25, 25, 25);
camera.lookAt(new THREE.Vector3(0, 0, 0));
scene.add(camera);
var cube = new THREE.Mesh(
new THREE.CubeGeometry(1, 2, 3, 2, 2, 3),
new THREE.MeshBasicMaterial({
color: 0xffff00,
wireframe: true
})
);
scene.add(cube);
}
function animate() {
requestAnimationFrame( animate );
lon += 1;
lat = Math.max( - 85, Math.min( 85, lat ) );
phi = THREE.Math.degToRad( 90 - lat );
theta = THREE.Math.degToRad( lon );
target.x = Math.sin( phi ) * Math.cos( theta );
target.y = Math.cos( phi );
target.z = Math.sin( phi ) * Math.sin( theta );
camera.lookAt( target );
renderer.render( scene, camera );
}
window.onload=function(){
init();
animate();
}
</script>
</head>
<body>
<canvas id="mainCanvas"></canvas>
</body>
</html>