案例: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.BufferGeometryLoader();
38
    loader.load('/js/threejs/bufferGeometry.json',function (geometry) {
39
      // 控制台查看加载放回的threejs对象结构
40
      console.log(geometry);
41
      var material = new THREE.MeshLambertMaterial({
42
        color: 0x0000ff,
43
      }); //材质对象Material
44
      var mesh = new THREE.Mesh(geometry, material); //网格模型对象Mesh
45
      scene.add(mesh); //网格模型添加到场景中
46
    })
47
      
48