-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathFBX_model.html
176 lines (134 loc) · 4.57 KB
/
FBX_model.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
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>FBX Model</title>
</head>
<body>
<script src="three.js"></script>
<script src="js/FBXLoader.js"></script>
<script src="js/inflate.min.js"></script>
<script src="js/OrbitControls.js"></script>
<script src="js/stats.min.js"></script>
<script src="js/dat.gui.min.js"></script>
<script>
var width, height
var scene
function initScene() {
scene = new THREE.Scene()
}
var camera
function initCamera() {
camera = new THREE.PerspectiveCamera(45, width / height, 0.1, 1000)
camera.position.set(0, 100, 100)
camera.lookAt(new THREE.Vector3(0, 0, 0))
}
var renderer
function initRenderer() {
renderer = new THREE.WebGLRenderer({
antialias: true
})
renderer.setSize(width, height)
// 1.告诉渲染器需要渲染阴影
renderer.shadowMap.enabled = true
renderer.shadowMap.type = THREE.PCFSoftShadowMap //比默认的清晰
document.body.appendChild(renderer.domElement)
}
var light
function initLight() {
light = new THREE.SpotLight(0xffffff)
light.position.set(60, 30, 0)
// 2.设置光源开启阴影投射
light.castShadow = true
scene.add(light)
scene.add(new THREE.AmbientLight(0x333333))
}
var model
function initModel() {
//外部加载 fbx 模型
var fbx_loader = new THREE.FBXLoader()
fbx_loader.load('./models/robot.fbx', function(object) {
model = object.children[3]
model.position.set(0, 10, 0)
model.scale.multiplyScalar(.1) // 模型缩放大小
scene.add(model)
})
//辅助工具
var helper = new THREE.AxesHelper(10)
scene.add(helper)
// 地板
var planeGeometry = new THREE.PlaneGeometry(100, 100)
var planeMaterial = new THREE.MeshStandardMaterial({
color: 0xaaaaaa
})
var plane = new THREE.Mesh(planeGeometry, planeMaterial)
plane.rotation.x = -0.5 * Math.PI
plane.position.set(0, 0, 0)
// 4.告诉地面需要接受阴影
plane.receiveShadow = true
scene.add(plane)
}
// 插件
//初始化性能插件
var stats
function initStats() {
stats = new Stats()
document.body.appendChild(stats.dom)
}
// 用户交互插件，鼠标按住旋转， 鼠标右键按住平移，滚轮缩放
var controls
function initControls() {
controls = new THREE.OrbitControls(camera, renderer.domElement)
// 旋转速度
controls.rotateSpeed = 5
// 变焦速度
controls.zoomSpeed = 3
//是否开启右键拖拽
controls.enablePan = true
// 平移速度
controls.panSpeed = 1.8
// 是否不变焦
controls.enableZoom = false
// 是否开启移动惯性
controls.enablestaticMoving = false
// 动态阻尼系数（灵敏度）
controls.dampingFactor = 0.3
//是否可以缩放
controls.enableZoom = true
//是否自动旋转
controls.autoRotate = false
//设置相机距离原点的最远距离
controls.minDistance = 100
//设置相机距离原点的最远距离
controls.maxDistance = 200
// controls.addEventListener('change', render)
}
function render() {
renderer.render(scene, camera)
}
function animate() {
render()
//更新性能插件
stats.update()
//更新控制器
controls.update()
requestAnimationFrame(animate)
}
function draw() {
width = window.innerWidth
height = window.innerHeight
initScene()
initCamera()
initRenderer()
initLight()
initModel()
initStats()
initControls()
animate()
}
draw()
</script>
</body>
</html>