/
example34.html
124 lines (98 loc) · 3.65 KB
/
example34.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
<!DOCTYPE html>
<html>
<head>
<title>Example 34 - Load OBJ and MTL model</title>
<style>
body{
margin: 0;
overflow: hidden;
}
#stats { /* Align stats top-left */
position: absolute;
left: 0px;
top: 0px;
}
</style>
</head>
<body>
<!-- JavaScript libraries -->
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/three.js/r67/three.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/stats.js/r11/Stats.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.5/dat.gui.min.js"></script>
<script src="assets/libs/TrackballControls.js"></script>
<script type="text/javascript" src="assets/libs/OBJLoader.js"></script>
<script type="text/javascript" src="assets/libs/MTLLoader.js"></script>
<script type="text/javascript" src="assets/libs/OBJMTLLoader.js"></script>
<!-- Javascript code that runs our Three.js examples -->
<script>
// once everything is loaded, we run our Three.js stuff.
$(function () {
var stats = initStats();
// create a scene, that will hold all our elements such as objects, cameras and lights.
var scene = new THREE.Scene();
// create a camera, which defines where we're looking at.
var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
// create trackball controls
var trackballControls = new THREE.TrackballControls(camera);
// create a render and set the size
var webGLRenderer = new THREE.WebGLRenderer();
webGLRenderer.setClearColor(new THREE.Color(0xaaaaff, 1.0));
webGLRenderer.setSize(window.innerWidth, window.innerHeight);
webGLRenderer.shadowMapEnabled = true;
// position and point the camera to the center of the scene
camera.position.set(-30,40,50);
camera.lookAt(new THREE.Vector3(0, 10, 0));
// add spotlight for the shadows
var spotLight = new THREE.SpotLight(0xffffff);
spotLight.position.set(0, 40, 30);
spotLight.intensity = 2;
scene.add(spotLight);
// add the output of the renderer to the html element
$('body').append(webGLRenderer.domElement);
// call the render function
var step = 0;
// setup the control gui
var controls = new function () {};
var gui = new dat.GUI();
var mesh;
var loader = new THREE.OBJMTLLoader();
loader.addEventListener('load', function (event) {
var object = event.content;
var wing2 = object.children[5].children[0];
var wing1 = object.children[4].children[0];
wing1.material.alphaTest = 0.5;
wing1.material.opacity = 0.6;
wing1.material.transparent = true;
wing2.material.alphaTest = 0.4;
wing2.material.opacity = 0.7;
wing2.material.transparent = true;
object.scale.set(140, 140, 140);
mesh = object;
scene.add(mesh);
object.rotation.x = 0.2;
object.rotation.y = -1.3;
});
loader.load(
'assets/models/butterfly.obj',
'assets/models/butterfly.mtl',
{side: THREE.DoubleSide}
);
render();
function render() {
stats.update();
trackballControls.update();
// render using requestAnimationFrame
requestAnimationFrame(render);
webGLRenderer.render(scene, camera);
}
function initStats() {
var stats = new Stats();
stats.setMode(0); // 0: fps, 1: ms
$('body').append(stats.domElement);
return stats;
}
});
</script>
</body>
</html>