案例:Three 加载.obj和材质(心脏)     状态:可编辑再运行    进入竖版
 运行结果 
x
 
1
<!DOCTYPE html>
2
<html>
3
4
<head>
5
  <meta charset="UTF-8">
6
  <title>Three 加载.obj和材质(心脏)</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
  <!-- 引入obj模型加载库OBJLoader.js -->
17
  <script src="/js/threejs/OBJLoader.js"></script>
18
  <!-- 引入obj模型材质加载库MTLLoader.js -->
19
  <script src="/js/threejs/MTLLoader.js"></script>
20
</head>
21
22
<body>
23
    <div id="app">
24
25
    </div>
26
    
27
  <script>
28
    /**
29
     * 创建场景对象Scene
30
     */
31
    var scene = new THREE.Scene();
32
33
    /**
34
     * OBJ文件加载  只加载obj文件中的几何信息,不加载材质文件.mtl
35
     */
36
    var loader = new THREE.OBJLoader();
37
    // 没有材质文件,系统自动设置Phong网格材质
38
    var mesh = null; //声明一个网格模型变量
39
    loader.load('/js/threejs/heart.obj', function(obj) {
40
      // 控制台查看返回结构:包含一个网格模型Mesh的组Group
41
      console.log(obj);
42
      scene.add(obj);
43
      mesh = obj.children[0]; //获得心脏网格模型
44
      mesh.scale.set(10, 10, 10); //网格模型缩放
45
      // 创建一个纹理加载器
46
      var textureLoader = new THREE.TextureLoader();
47
48
      // // 加载颜色纹理