Html网页threejs显示obj,ply三维图像实例

程序示例精选
Html网页threejs显示obj,ply三维图像实例
如需安装运行环境或远程调试,见文章底部个人QQ名片,由专业技术人员远程协助!

前言

这篇博客针对《Html网页threejs显示obj,ply三维图像实例》编写代码,代码整洁,规则,易读。 学习与应用推荐首选。


运行结果

在这里插入图片描述


文章目录

一、所需工具软件
二、使用步骤
       1. 主要代码
       2. 运行结果
三、在线协助

一、所需工具软件

       1. VS2019, Qt
       2. C++

二、使用步骤

代码如下(示例):

<!DOCTYPE html>
<html lang="en">
	<head>
		<title>three.js webgl - loaders - OBJ MTL loader</title>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
		<style>
			body {
				font-family: Monospace;
				background-color: #000;
				color: #fff;
				margin: 0px;
				overflow: hidden;
			}
			#info {
				color: #fff;
				position: absolute;
				top: 10px;
				width: 100%;
				text-align: center;
				z-index: 100;
				display:block;
			}
			#info a, .button { color: #f00; font-weight: bold; text-decoration: underline; cursor: pointer }
		</style>
	</head>
	<body>
		<div id="info">
		<a href="http://threejs.org" target="_blank">three.js</a> - OBJMTLLoader test
		</div>
		<script src="js/three.min.js"></script>
		<script src="js/MTLLoader.js"></script>
		<script src="js/OBJMTLLoader.js"></script>
		<script>
			var container, stats;
			var camera, scene, renderer;
			var mouseX = 0, mouseY = 0;
			init();
			animate();
			function init() {
				container = document.createElement( 'div' );
				document.body.appendChild( container );

				camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 2000 );
				camera.position.z = 1.5;                //̹��40
				// scene
				scene = new THREE.Scene();
				var ambien = new THREE.AmbientLight( 0x444444 );
THREE.DirectionalLight( 0xffeedd );
				directionalLight.position.set( 0, 0, 1 ).normalize();
				scene.add( directionalLight );

				// model

				var onProgress = function ( xhr ) {
					if ( xhr.lengthComputable ) {
						var percentComplete = xhr.loaded / xhr.total * 100;
						console.log( Math.round(percentComplete, 2) + '% downloaded' );
					}
				};
				var onError = function ( xhr ) {
				};
				var loader = new THREE.OBJMTLLoader();
				loader.load('js/LQ.obj', 'js/LQ.mtl', function (object) {
				    object.position.y = -0.4;                //   0 ̹��tank     -0.6  ����LQ
				    scene.add(object);
				    var start = new Date().getTime(), delta;
				}, onProgress, onError );
				//
			function onWindowResize() {
				windowHalfX = window.innerWidth / 2;
				windowHalfY = window.innerHeight / 2;

				camera.aspect = window.innerWidth / window.innerHeight;
				camera.updateProjectionMatrix();
				renderer.setSize( window.innerWidth, window.innerHeight );
			}
			//
			function animate() {
				requestAnimationFrame( animate );
				render();
			}
		</script>
	</body>
</html>


运行结果

在这里插入图片描述
在这里插入图片描述

三、在线协助:

如需安装运行环境或远程调试,见文章底部个人 QQ 名片,由专业技术人员远程协助!

1)远程安装运行环境,代码调试
2)Visual Studio, Qt, C++, Python编程语言入门指导
3)界面美化
4)软件制作
5)云服务器申请
6)网站制作

当前文章连接:https://blog.csdn.net/alicema1111/article/details/132666851
个人博客主页:https://blog.csdn.net/alicema1111?type=blog
博主所有文章点这里:https://blog.csdn.net/alicema1111?type=blog

博主推荐:
Python人脸识别考勤打卡系统:
https://blog.csdn.net/alicema1111/article/details/133434445
Python果树水果识别:https://blog.csdn.net/alicema1111/article/details/130862842
Python+Yolov8+Deepsort入口人流量统计:https://blog.csdn.net/alicema1111/article/details/130454430
Python+Qt人脸识别门禁管理系统:https://blog.csdn.net/alicema1111/article/details/130353433
Python+Qt指纹录入识别考勤系统:https://blog.csdn.net/alicema1111/article/details/129338432
Python Yolov5火焰烟雾识别源码分享:https://blog.csdn.net/alicema1111/article/details/128420453
Python+Yolov8路面桥梁墙体裂缝识别:https://blog.csdn.net/alicema1111/article/details/133434445

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/200551.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Linux:可视化管理工具Webmin的安装

一、下载 地址&#xff1a;Webmin官网 我这里下载的是1.700-1版本 二、安装 1、在虚拟机上新建目录并安装软件 mkdir /opt/webmin rpm -ivh webmin-1.700-1.noarch.rpm2、修改webmin的root密码 /usr/libexec/webmin/changepass.pl /etc/webmin root 1234563、修改端口(可…

手写VUE后台管理系统5 - 整合状态管理组件pinia

整合状态管理组件 安装整合创建实例挂载使用 pinia 是一个拥有组合式 API 的 Vue 状态管理库。 pinia 官方文档&#xff1a;https://pinia.vuejs.org/zh/introduction.html 安装 yarn add pinia整合 所有与状态相关的文件都放置于项目 src/store 目录下&#xff0c;方便管理 在…

linux磁盘已满,查看哪个文件占用多

使用df -h查看磁盘空间占用情况 使用sudo du -s -h /* | sort -nr命令查看那个目录占用空间大 然后那个目录占用多 再通过sudo du -s -h /var/* | sort -nr 一层层排查&#xff0c;找到占用文件多的地方 如果通过以上方法没有找到问题所在&#xff0c;那么可以使用 lsof |…

win10下安装 Anaconda + Cuda + Cudnn + Pycharm + Pytorch

1.安装Anaconda &#xff08;1-1&#xff09;下载Ananconda, Anaconda官网 选择windows版本&#xff1b; &#xff08;1-2&#xff09;安装Anaconda,一般选择【Just Me】 &#xff08;1-3&#xff09;建议不要装在C盘&#xff0c;后期多环境的python环境和各种库文件会占用很多…

报表生成器FastReport .Net用户指南:报告继承

我们经常会有许多数据相同的报告&#xff0c;例如&#xff0c;带有公司徽标和一些数据&#xff08;电子邮件、地址等&#xff09;的页眉/页脚。现在设想一下&#xff0c;您需要更改一些公司数据&#xff0c;例如电子邮件。您必须在每个报告中都这样做&#xff01;为了避免这种情…

服务器修复

服务器修复 主要服务器漏洞展示未禁用sync、shutdown、halt默认账户。未创建系统管理员、审计管理员、安全管理员账户设置系统管理员设置安全管理员 设置审计管理员配置PASS_MAX_DAYS 99999、PASS_MIN_LEN 5未配置TMOUT值配置HISTSIZE0未配置登录失败/密码复杂度策略umask值022…

高效的将两个文件夹中多余的文件删除

高效的将两个文件夹中多余的文件删除 解决方案 之前使用的是这个方法&#xff0c;但是图像太多&#xff0c;需要删除的有70W张&#xff0c;得删10多天。。 将两个文件夹中重复的图象删除 解决方案 先将image图像复制一份&#xff0c;然后改名为txt import osdef change_file…

智慧环保:视频监控平台EasyCVR与AI智能分析在环保领域的应用

人工智能&#xff08;AI&#xff09;视频分析技术在环保领域有着广泛的应用&#xff0c;通过智能识别和跟踪技术&#xff0c;AI视频分析可以实时监测空气质量、水质和噪音等环境指标&#xff0c;帮助环保部门及时发现污染源并进行有效治理&#xff0c;提高监测、管理和保护环境…

【古月居《ros入门21讲》学习笔记】10_话题消息的定义与使用

目录 说明&#xff1a; 1. 话题模型 2. 实现过程&#xff08;C&#xff09; 自定义话题消息 Person.msg文件内容 Person.msg文件内容说明 编译配置 在package.xml文件中添加功能包依赖 在CMakeLists.txt中添加编译选项 编译生成语言相关文件 创建发布者代码&#xff…

wifi8 Multi-AP介绍

作为一种结构&#xff0c;multi-AP最早在wifi7的草案中被提出。 但是wifi7估计不会加入。 现在变成了wifi8的路线。 比如下面是一种设想。总体是以若干BSS为单位。 每个BSS的信息都可以在CC处得到。这样就是一种基于CC的总控的MAP。 总控分为两个TDMA&#xff0c; 第一个TD…

数据结构算法-分支定界算法

引言 应该记得这一张图片&#xff0c;在A星算法里面说过 那么现在说的是换一种方式实现 如何实现&#xff1f; 之前不撞南墙不回头的方法-深度优先搜索 的方式 广度优先搜索方式 广度优先搜索&#xff1a;就是说按照顺序入队 并且搜索扩展节点 探测四面八方&#xff0c;如此循环…

Redis面试题:分片集群相关问题

目录 面试官&#xff1a;redis的分片集群有什么作用 面试官&#xff1a;Redis分片集群中数据是怎么存储和读取的&#xff1f; 面试官&#xff1a;redis的分片集群有什么作用 候选人&#xff1a;分片集群主要解决的是&#xff0c;海量数据存储的问题&#xff0c;集群中有多个m…

java第20章节

一.线程简介 二.创建线程 1.继承Thread类 Thread类中常用的两个构造方法如下&#xff1a; public Thread():创建一个新的线程对象。 public Thread(String threadName):创建一个名称为threadName的线程对象。 继承Thread类创建一个新的线程的语法如下&#xff1a; public c…

Vue拖拽div移动位置

<div id"TestDiv" mousedown"OnMouseDown"></div> css #TestDiv { position: absolute;left: 50%;top: 50%;width: 100px;height: 100px;z-index: 999;background-color: red; } 处理函数 const OnMouseDown(e:any)> {let videoBox:any…

游戏缺少d3dx9_43.dll修复方法分享,快速解决dll缺失问题

在计算机使用过程中&#xff0c;我们常常会遇到一些错误提示&#xff0c;其中之一就是“找不到d3dx9_43.dll文件”。这个错误通常出现在运行某些游戏或应用程序时&#xff0c;d3dx9_43.dll是一个动态链接库文件&#xff0c;它是DirectX 9的一部分&#xff0c;用于支持游戏中的3…

建筑行业有哪些好用的项目管理软件或者OA系统?

建筑行业有哪些好用的项目管理软件或者OA系统&#xff1f; 在现代社会中&#xff0c;系统已经成为了企业人事信息化、项目管理等方面必不可少的工具。尤其是对于建筑行业的工程项目管理和人事OA而言&#xff0c;借助系统进行协同、计划、控制等方面的工作&#xff0c;已经成为…

新手小白必看!一文带你了解跨境电商独立站

对于很多新手跨境电商来说&#xff0c;或许你对亚马逊、ebay、速卖通这些跨境电商平台已经有所了解&#xff0c;那你知道跨境电商独立站吗&#xff1f;应该也有不少朋友对跨境电商独立站感兴趣&#xff0c;特别是现在各大跨境电商平台越来越卷&#xff0c;很多跨境卖家都开始通…

手把手教你通过CODESYS V3进行PLC编程(三)

教程背景 通过之前的教程&#xff0c;我们已经为大家演示了宏集MC-Prime控制器的连接、试运行和CODESYS的安装&#xff0c;并创建了一个计数器项目。在本期教程中&#xff0c;我们将进一步深入&#xff0c;教大家如何使用CODESYS的可视化界面。 一、两种可视化方式 在CODESYS…

代码混淆的原理和方法详解

代码混淆的原理和方法详解摘要移动App的广泛使用带来了安全隐患&#xff0c;为了保护个人信息和数据安全&#xff0c;开发人员通常会采用代码混淆技术。本文将详细介绍代码混淆的原理和方法&#xff0c;并探讨其在移动应用开发中的重要性。 引言随着移动应用的普及&#xff0c;…

C语言数组的距离(ZZULIOJ1200:数组的距离)

题目描述 已知元素从小到大排列的两个数组x[]和y[]&#xff0c; 请写出一个程序算出两个数组彼此之间差的绝对值中最小的一个&#xff0c;这叫做数组的距离 。 输入&#xff1a;第一行为两个整数m, n(1≤m, n≤1000)&#xff0c;分别代表数组f[], g[]的长度。第二行有m个元素&a…