fastadmin使用three.js，导入xyz的txt文件，展示3D模型

1.安装three.js

bower install three --save  

2.在require-backend.js引入three.js

我是在后台展示所以在require-backend中引入

3.在需要展示的模块的js文件使用three.js

我是写的接口 使用ajax调用，也可以在控制器中操作文件转为数组，js读取

define(['jquery', 'bootstrap', 'backend', 'addtabs', 'three', 'echarts', 'echarts-theme', 'template'], function ($, undefined, Backend, Datatable, THREE, Echarts, undefined, Template) {
    var Controller = {
        index: function () {
	         $.ajax({
		         //请求方式
		          type: 'POST',
		          //服务器返回的数据类型
		          dataType: 'json',
		          url: 'IP地址/index.php/api/loader/xyz',
		          data: {
		              url: 'IP地址/assets/data/result1.txt',
		          },
		          success: function (data) {
		              var array = data.data.array;
		              var numArray = [];
		              for (let i = 0; i < array.length; i++) {
		                  numArray.push(parseFloat(array[i]))
		
		              }
		              let scene = new THREE.Scene();
		              // 2.第二步:将数组转换成类型化数组
		              const vertices = new Float32Array(numArray)
		              // 3.第三步
		              const geometry = new THREE.BufferGeometry() // 声明一个缓冲几何体对象
		              const pos = new THREE.BufferAttribute(vertices, 3)
		              geometry.attributes.position = pos
		              var material = new THREE.PointsMaterial({
		                  color: 0xff1133,
		                  size: 1.0 //点对象像素尺寸
		              });
		              //点模型对象
		              var points = new THREE.Points(geometry.center(), material);
		              scene.add(points);
		              var onwheelNum = 1
		              const ambientLight = new THREE.AmbientLight(0xffffff, 0.1); // 创建环境光
		              scene.add(ambientLight); // 将环境光添加到场景
		              const spotLight = new THREE.SpotLight(0xffffff); // 创建聚光灯
		              spotLight.position.set(50, 50, 50);
		              spotLight.castShadow = true;
		              scene.add(spotLight);
		              const element = document.getElementById("3dpanel");
		              const width = element.clientWidth; // 窗口宽度
		              const height = element.clientHeight; // 窗口高度
		              const k = width / height; // 窗口宽高比
		              let camera = new THREE.PerspectiveCamera(45, k, 0.1, 1000);
		              camera.position.set(20, 20, 400); // 设置相机位置
		              camera.lookAt(new THREE.Vector3(10, 40, 0)); // 设置相机方向
		              scene.add(camera);
		              let renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
		              renderer.setSize(width, height); // 设置渲染区域尺寸
		              renderer.shadowMap.enabled = true; // 显示阴影
		              renderer.shadowMap.type = THREE.PCFSoftShadowMap;
		              renderer.setClearColor(0x000000, 1); // 设置背景颜色
		              element.appendChild(renderer.domElement);
		              function render() {
		                  renderer.render(scene, camera);
		              }
		              render();
		              element.onwheel = (e) => {
		                  let delta = (e.wheelDelta && (e.wheelDelta > 0 ? 1 : -1))
		                  if (delta > 0) {//放大
		                      onwheelNum += 0.1
		                      points.scale.set(onwheelNum, onwheelNum, onwheelNum);
		                      render();
		                  } else if (delta < 0) {//缩小
		                      onwheelNum -= 0.1
		                      points.scale.set(onwheelNum, onwheelNum, onwheelNum);
		                      render();
		                  }
		              }
		              element.addEventListener('mousedown', onMouseDown, false);
		              element.addEventListener('mouseup', onMouseup, false);
		              var rotateStart;
		              rotateStart = new THREE.Vector2();
		              function onMouseDown(event) {
		                  event.preventDefault();
		                  mouseDown = true;
		                  mouseX = event.clientX;//出发事件时的鼠标指针的水平坐标
		                  mouseY = event.clientY;//出发事件时的鼠标指针的水平坐标
		                  rotateStart.set(event.clientX, event.clientY);
		                  document.addEventListener('mousemove', onMouseMove2, false);
		              }
		              function onMouseup(event) {
		                  mouseDown = false;
		                  document.removeEventListener("mousemove", onMouseMove2);
		              }
		
		              function onMouseMove2(event) {
		                  if (!mouseDown) {
		                      return;
		                  }
		                  var deltaX = event.clientX - mouseX;
		                  var deltaY = event.clientY - mouseY;
		                  mouseX = event.clientX;
		                  mouseY = event.clientY;
		                  rotateScene(deltaX, deltaY);
		              }
		              //设置模型旋转速度，可以根据自己的需要调整
		              function rotateScene(deltaX, deltaY) {
		                  //设置旋转方向和移动方向相反，所以加了个负号
		                  var ydeg = deltaX / 279;
		                  var xdeg = deltaY / 279;
		                  //deg 设置模型旋转的弧度
		                  points.rotation.y += ydeg;
		                  points.rotation.x += xdeg;
		                  render();
		              }
		          },
                  error: function (jqXHR) {
                      //请求失败函数内容
                  }
              })
           }
      	}
      return Controller
});

4.在api下的控制器中创建Loader.php

5.Loader控制器编写如下

namespace app\api\controller;
use app\common\controller\Api;

class Loader extends Api
{

    //如果$noNeedLogin为空表示所有接口都需要登录才能请求
    //如果$noNeedRight为空表示所有接口都需要验证权限才能请求
    //如果接口已经设置无需登录,那也就无需鉴权了
    //
    // 无需登录的接口,*表示全部
    protected $noNeedLogin = ['*'];
    // 无需鉴权的接口,*表示全部
    protected $noNeedRight = ['*'];

    /**
     * 测试方法
     *
     * @ApiTitle    (接口名字)
     * @ApiSummary  (描述信息)
     * @ApiMethod   (POST)
     * @ApiRoute    (/api/loader/xyz/)
     */
    public function xyz()
    {
        $file = $this->request->post("url");

        $content = file_get_contents($file);    //文件内容读入字符串
        if (empty($content)) {
            $this->error('文件内容为空');
        } else {
            $content = mb_convert_encoding($content, 'UTF-8', 'ASCII,UTF-8,GB2312,GBK,BIG5'); //转换字符编码为utf-8
            $content = str_replace("\r\n",",",$content);
            $content = str_replace("\t",",",$content);
            $array = explode(",", $content); //转换成数组
            $this->success('返回成功',['array' => $array]);
        }
    }
}

6.txt文件中的格式

		X          Y          Z
		↓		   ↓		  ↓