Three.js加载PLY文件

原创

已于 2024-02-23 17:32:06 修改

· 1.5k 阅读

12 ·

版权

文章标签：

#javascript #前端 #开发语言

于 2024-02-23 17:24:58 首次发布

文章描述了作者在Vue3应用中尝试使用three.js的PLYLoader加载点云数据遇到的问题，发现ply文件需放在public目录下才能显示，同时展示了如何设置场景、相机和光照，以及如何监听用户交互以实时渲染。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

这是官方的例子

three.js webgl - PLY

我在Vue3中使用，测试了好久始终不显示点云数据。在网上查询后发现ply文件要放置在public目录下才行

			<el-row>
				<el-button type="primary" class="el-btn" @click="IniThree1">PLY</el-button>


				<div id="my-three" style="height:600px;width:100%"></div>

			</el-row>


<script setup lang="ts" name="Camera3DScan">
import { ref, onMounted, watch } from 'vue'
import axios from 'axios'
import { ElMessage } from 'element-plus';
import * as THREE from "three";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
import {