案例: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 geometry = new THREE.BoxGeometry(100, 100, 100); //创建一个立方体几何对象Geometry
38
    console.log(geometry);
39
    console.log(geometry.toJSON());
40
    // JSON对象转化为字符串
41
    console.log(JSON.stringify(geometry.toJSON()));
42
    // JSON.stringify()方法内部会自动调用参数的toJSON()方法
43
    console.log(JSON.stringify(geometry));
44
    alert("几何体toJSON方法:\n"+JSON.stringify(geometry.toJSON()));
45
    alert("几何体直接方法:\n"+JSON.stringify(geometry));
46
      
47
    var material = new THREE.MeshLambertMaterial({
48
      color: 0x0000ff,