/
测试旋转.html
157 lines (136 loc) · 4.34 KB
/
测试旋转.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
144
145
146
147
148
149
150
151
152
153
154
155
156
157
<!DOCTYPE html>
<html lang="en">
<head>
<title>three.js webgl - 3MF</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<style>
body {
font-family: Monospace;
background-color: #000000;
margin: 0px;
overflow: hidden;
}
#info {
color: #fff;
position: absolute;
top: 10px;
width: 100%;
text-align: center;
z-index: 100;
display:block;
}
a { color: skyblue }
.button { background:#999; color:#eee; padding:0.2em 0.5em; cursor:pointer }
.highlight { background:orange; color:#fff; }
span {
display: inline-block;
width: 60px;
float: left;
text-align: center;
}
</style>
</head>
<body>
<div id="info">
<div>loader test ||外部文件测试2.obj </div>
</div>
<?
//OrbitControls.js控制物体轨迹移动
?>
<script src="js/three.js"></script>
<script src="js/OBJLoader.js"></script>
<script src="js/Detector.js"></script>
<script src="js/OrbitControls.js"></script>
<script src="js/jszip.min.js"></script>
<script>
if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
var camera, scene, renderer;
init();
function init() {
//创建场景
scene = new THREE.Scene();
//创建光效果：
scene.add( new THREE.AmbientLight( 0x999999 ) );
var pointLight = new THREE.PointLight( 0xffffff, 0.6 );
pointLight.position.set( 80, 90, 150 );
scene.add( pointLight );
//创建照相机：透视照相机，调节near：far比例可以产生视觉上的拉远
camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 2000 );
// Z is up for objects intended to be 3D printed.
//坑爹的一句，带上就不能正常转了。。。。（doge
//camera.up.set( 0, 0, 1 );
//camera.position.set( -200, -230, 150 );
camera.position.set( 0, 0, 700 );
//x-，y-，都为0时也就不用变化了，就是看向（0,0,0）
//camera.lookAt(0,0,0);
camera.add( new THREE.PointLight( 0xffffff, 1 ) );
scene.add( camera );
//创建渲染器
renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setClearColor( 0x000000 );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
//加载器，先创建3个参数
var manager = new THREE.LoadingManager();
manager.onProgress = function ( item, loaded, total ) {
console.log( item, loaded, total );
};
var texture=new THREE.Texture();
var onProgress = function ( xhr ) {
if ( xhr.lengthComputable ) {
var percentComplete = xhr.loaded / xhr.total * 100;
console.log( Math.round(percentComplete, 2) + '% downloaded' );
}
};
var onError = function ( xhr ) {
};
var loader = new THREE.ImageLoader( manager );
//加载纹理
loader.load( 'texture/2_0.jpg', function ( image ) {
texture.image = image;
texture.needsUpdate = true;
} );
//加载外部文件
var loader = new THREE.OBJLoader( manager );
loader.load( 'obj/2.obj', function ( object ) {
object.traverse( function ( child ) {
if ( child instanceof THREE.Mesh ) {
child.material.map = texture;
}
} );
//置于原点就好了，不用改了。
//object.position.y = -20;
scene.add( object );
render();
}, onProgress, onError );
/*原来的函数文件代码
var loader = new THREE.ThreeMFLoader();
loader.load( 'obj/cube_2.obj', function ( object ) {
scene.add( object );
render();
} );
*/
var controls = new THREE.OrbitControls( camera, renderer.domElement );
controls.addEventListener( 'change', render );
//controls.target.set( 80, 65, 35 );
controls.target.set( 0, 1, 0 );
//controls.target.set( 16, 13, 7 );
controls.update();
window.addEventListener( 'resize', onWindowResize, false );
}
//窗口恢复
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
render();
}
//执行渲染
function render() {
renderer.render( scene, camera );
}
</script>
</body>
</html>