案例:Three 加载外部stl文件     状态:可编辑再运行    进入竖版
 运行结果 
x
 
1
<!DOCTYPE html>
2
<html lang="en">
3
4
<head>
5
  <meta charset="UTF-8">
6
  <title>Three 加载外部stl文件</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/STLLoader.js"></script>
17
</head>
18
19
<body>
20
      <div id="app">
21
    <div class="block" style="display:inline;width:500px">
22
      <el-slider v-model="time" show-input :max=1 :step=0.01></el-slider>
23
    </div>
24
  </div>
25
    
26
  <script>
27
    /**
28
     * 创建场景对象Scene
29
     */
30
    var scene = new THREE.Scene();
31
32
      
33
/**
34
 * stl数据加载
35
 */
36
var loader = new THREE.STLLoader();
37
// 立方体默认尺寸长宽高各200
38
loader.load('/js/threejs/立方体.stl',function (geometry) {
39
  // 控制台查看加载放回的threejs对象结构
40
  console.log(geometry);
41
  // 查看顶点数,一个立方体6个矩形面,每个矩形面至少2个三角面,每个三角面3个顶点,
42
  // 如果没有索引index复用顶点,就是说一个立方体至少36个顶点
43
  console.log(geometry.attributes.position.count);
44
  // 缩放几何体
45
  // geometry.scale(0.5,0.5,0.5);
46
  // 几何体居中
47
  // geometry.center();
48
  // 平移立方体