-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
143 lines (109 loc) · 3.56 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
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
html, body {
margin: 0;
height: 100%;
}
canvas {
display: block;
}
</style>
</head>
<body>
<script src="js/requestAnimationFrame.js"></script>
<script src="js/performance.js"></script>
<script src="js/typedarray.js"></script>
<script src="js/WebGL.js"></script>
<script src="js/three.js"></script>
<script src="js/CanvasRenderer.js"></script>
<script src="js/SVGRenderer.js"></script>
<script src="js/Projector.js"></script>
<script src="js/OrbitControls.js"></script>
<script>
var renderer;
function initRender() {
renderer = WEBGL.isWebGLAvailable() ? new THREE.WebGLRenderer() : new THREE.CanvasRenderer();
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setClearColor(new THREE.Color(0xEEEEEE, 1.0)); //设置背景颜色
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
}
var camera;
function initCamera() {
camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 10000);
camera.position.set(90, 0, 0);
}
var scene;
function initScene() {
scene = new THREE.Scene();
}
var light;
function initLight() {
}
function initModel() {
//声明一个球体
var geometry = new THREE.SphereBufferGeometry( 500, 60, 40 );
// 反转X轴上的几何图形，使所有的面点向内。
geometry.scale( - 1, 1, 1 );
//声明球体纹理
var material = new THREE.MeshBasicMaterial( {
map: new THREE.TextureLoader().load( 'textures/diving_hall.jpg' ) //加载一整张纹理图片
});
//使得CanvasRenderer不显示线框
material.overdraw = 0.5;
mesh = new THREE.Mesh( geometry, material );
scene.add( mesh );
}
//用户交互插件 鼠标左键按住旋转，右键按住平移，滚轮缩放
var controls;
function initControls() {
controls = new THREE.OrbitControls(camera, renderer.domElement);
// 如果使用animate方法时，将此函数删除
//controls.addEventListener( 'change', render );
// 使动画循环使用时阻尼或自转 意思是否有惯性
controls.enableDamping = true;
//动态阻尼系数 就是鼠标拖拽旋转灵敏度
//controls.dampingFactor = 0.25;
//是否可以缩放
controls.enableZoom = true;
//是否自动旋转
controls.autoRotate = false;
//设置相机距离原点的最远距离
controls.minDistance = 10;
//设置相机距离原点的最远距离
controls.maxDistance = 300;
//是否开启右键拖拽
controls.enablePan = true;
}
function render() {
renderer.render(scene, camera);
}
//窗口变动触发的函数
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
render();
renderer.setSize(window.innerWidth, window.innerHeight);
}
function animate() {
//更新控制器
controls.update();
render();
requestAnimationFrame(animate);
}
initRender();
initScene();
initCamera();
initLight();
initModel();
initControls();
// initGui();
animate();
window.onresize = onWindowResize;
</script>
</body>
</html>