-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathobj.html
76 lines (70 loc) · 2.33 KB
/
obj.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo</title>
<script>
if (WEBGL.isWebGLAvailable()) {
// Initiate function or other initializations here
animate();
} else {
alert("您的浏览器不支持webGL，首页的图片可能会出现模型渲染错误");
}
</script>
<script src="其他/three.js-master-87/build/three.js"></script>
<script src="其他/three.js-master-87/examples/js/loaders/OBJLoader.js"></script>
<script src="其他/three.js-master-87/examples/js/loaders/MTLLoader.js"></script>
<!--<script src="其他/three.js-master-87/examples/js/controls/OrbitControls.js"></script>-->
<script src="其他/obj.js"></script>
<style>
body, html {
height: 900px;
margin: 0;
background-color: #424242;
}
#three-frame {
margin-top: 10px;
width: 100%;
height: 100%;
}
</style>
<script>
var myThree;
//自适应尺寸
function onResize() {
myThree.camera.aspect = (window.innerWidth / 1.8) / (window.innerHeight / 1.8);
myThree.camera.updateProjectionMatrix();
myThree.renderer.setSize((window.innerWidth / 1.8), (window.innerHeight / 1.8));
}
//入口
function threeStart() {
myThree = new MyThree();
console.log(myThree)
myThree.initThree(document.getElementById('three-frame'))
myThree.initCamera(8, 900, 1200, 1000);
myThree.initLight(0xFFFFFF);
myThree.loadObj('其他/obj/', '1.obj', '1.mtl');
//基础线
myThree.initGrid(0, 0);
animation();
window.addEventListener('resize', onResize, false);
}
//动作
function animation() {
myThree.elements.forEach(x => {
x.model.rotateY(0.003);
})
//刷新页面
myThree.renderer.render(myThree.scene, myThree.camera);
//var controls = new THREE.OrbitControls(myThree.camera);
//controls.enableZoom = false;
//controls.enablePan= false;
//controls.rotateSpeed = 0.01;
requestAnimationFrame(animation);
}
</script>
</head>
<body onload="threeStart();">
<div id="three-frame"></div>
</body>
</html>