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 = posvar material = new THREE.PointsMaterial({color: 0xff1133,size: 1.0 //点对象像素尺寸});//点模型对象var points = new THREE.Points(geometry.center(), material);scene.add(points);var onwheelNum = 1const 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.1points.scale.set(onwheelNum, onwheelNum, onwheelNum);render();} else if (delta < 0) {//缩小onwheelNum -= 0.1points.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控制器编写如下

<?phpnamespace 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↓           ↓          ↓

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

html中引入txt文件,如何导入放置在txt文件中的.html文件中的代码？
所以,我想要的是这个.我有一个HTML文件,我想从代码加载文本文件.因此,浏览器应该从该文本文件中获取代码并将其作为HTML代码的一部分进行阅读.这里有一个例子:如何导入放置在txt文件中的.html ...
matlab 将txt导入excel,[转载]MATLAB 批量导入excel和txt文件的方法
将一个文件目录下所有的文件名字全部倒入到一个文件中,除了使用ls函数以外,还可以使用 file=dir('C:UsersAdministratorDesktopMATLAB数据的导入导出以及试验的数据 ...
matlab 批量导入excel,MATLAB 批量导入excel和txt文件的方法
将一个文件目录下所有的文件名字全部倒入到一个文件中,除了使用ls函数以外,还可以使用 file=dir('C:\Users\Administrator\Desktop\MATLAB数据的导入导出以及试 ...
[转载] js 读取和输出txt文件
https://www.jb51.net/article/46712.htm ActiveXObject is not defined,ActiveXObject是IE浏览器独有支持的插件,其他浏览器 ...
three.js加载3D模型,在网页上展示3D模型（.glb.gltf.fbx格式）
Three.js是一款开源的主流3D绘图JS引擎,简单点,可以将它理解为three+js就可以了,three表示3D,js表示JavaScript的意思. 结构 .glb.gltf文件最好放在服务器上 ...
89 Three.js 导入dae格式的骨骼绑定动画模型
简介上一节,我们导入了一个官方的FBX格式的骨骼模型,实现了动画效果.这一节,更换了dae格式的模型导入,主要是这个模型返回的数据和FBX的返回格式有一些区别,下面我们将在案例中解析中间的区别. 实 ...
js和java导出txt文件怎么打开文件_JS本地文件操作，JS读写txt文件
/** * object.OpenTextFile(filename[, iomode[, create[, format]]]) * * 参数: * object 必选项.object 应为 Fil ...
用three.js在网页实现3D模型的展示
作者 | 林智超__ 来源 | https://www.jianshu.com/p/0798a76121af 最近在做一个在网页端展示3D模型的项目,现在简单介绍一下怎么实现功能. 首先,下载thre ...
three.js实现3D模型展示
开头说明下文章是转载我同事一个哥们的.怕自己以后会用拿过来方便以后使用 three.js实现3D模型展示由于项目需要展示3d模型,所以对three做了点研究,分享出来希望能帮到大家 ...

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

1.安装three.js

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

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

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

5.Loader控制器编写如下

6.txt文件中的格式

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

最新文章

热门文章