案例:Three 加载外部JSON组     状态:可编辑再运行    进入竖版
 运行结果 
x
 
1
<!DOCTYPE html>
2
<html lang="en">
3
4
<head>
5
  <meta charset="UTF-8">
6
  <title>Three 加载外部JSON组</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/vue2.5.16.js"></script>
17
      <!-- 引入样式 -->
18
    <link rel="stylesheet" href="https://www.w3xue.com/js/threejs/vueui2.15.6.css">
19
     <!-- 引入组件库 -->
20
    <script src="https://www.w3xue.com/js/threejs/vueui2.15.6.js"></script>
21
</head>
22
23
<body>
24
      <div id="app">
25
    <div class="block" style="display:inline;width:500px">
26
      <el-slider v-model="time" show-input :max=1 :step=0.01></el-slider>
27
    </div>
28
  </div>
29
    
30
  <script>
31
    /**
32
     * 创建场景对象Scene
33
     */
34
    var scene = new THREE.Scene();
35
      
36
      
37
    var loader = new THREE.ObjectLoader();
38
    loader.load('/js/threejs/group.json', function(obj) {
39
        console.log(obj);
40
        console.log(obj.type);
41
        scene.add(obj)
42
    })
43
      
44
    
45
    //三维坐标系辅助显示
46
    var AxesHelper = new THREE.AxesHelper(600);
47
    scene.add(AxesHelper);
48
    /**