案例:Three 同时加载外部纹理     状态:可编辑再运行    进入竖版
 运行结果 
x
 
1
<!DOCTYPE html>
2
<html>
3
4
<head>
5
  <meta charset="UTF-8">
6
  <title>Three 同时加载外部纹理</title>
7
  <style>
8
    body {
9
      margin: 0;
10
      overflow: hidden;
11
      /* 隐藏body窗口区域滚动条 */
12
    }
13
  </style>
14
  <script src="https://www.w3xue.com/js/threejs/threer92.js"></script>
15
  <script src="https://www.w3xue.com/example/threejs/solarsystem/files/OrbitControls.js"></script>
16
  <script src="https://www.w3xue.com/js/threejs/OBJLoader.js"></script>
17
  <script src="https://www.w3xue.com/js/threejs/MTLLoader.js"></script>
18
</head>
19
20
<body>
21
    <div id="app">
22
23
    </div>
24
    
25
  <script>
26
    /**
27
     * 创建场景对象Scene
28
     */
29
    var scene = new THREE.Scene();
30
31
      
32
/**
33
 * OBJ和材质文件mtl加载
34
 */
35
var OBJLoader = new THREE.OBJLoader(); //obj加载器
36
var MTLLoader = new THREE.MTLLoader(); //材质文件加载器
37
MTLLoader.load('/js/threejs/material.mtl', function(materials) {
38
  // 返回一个包含材质的对象MaterialCreator
39
  console.log(materials);
40
  //obj的模型会和MaterialCreator包含的材质对应起来
41
  OBJLoader.setMaterials(materials);
42
  OBJLoader.load('/js/threejs/model.obj', function(obj) {
43
    console.log(obj);
44
    scene.add(obj); //返回的组对象插入场景中
45
    // 加载后操作
46
    obj.children[0].scale.set(2, 2, 2); //缩放球体网格模型
47
    // 通过调节参数,地球表面的凹凸感更强
48
    obj.children[0].material.normalScale.set(3, 3);