Html+threejs数字孪生三维场景实现

程序示例精选
Html+threejs数字孪生三维场景实现
如需安装运行环境或远程调试，见文章底部个人QQ名片，由专业技术人员远程协助！

前言

这篇博客针对《Html+threejs数字孪生三维场景实现》编写代码，代码整洁，规则，易读。 学习与应用推荐首选。

运行结果

文章目录

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

一、所需工具软件

       1. Html
       2. Python

二、使用步骤

代码如下（示例）：

<!DOCTYPE html>
<html>
<head includeDefault="true"><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"><title>3D库孪生场景</title><style>body {margin: 0;overflow: hidden;}#label {position: absolute;padding: 10px;background: rgba(255, 255, 255, 0.6);line-height: 1;border-radius: 5px;}#video {position: absolute;width: 0;height: 0;}</style></head><body><div id="label"></div><div id="container"></div><video id="video" autoplay loop muted></video><script>var stats = initStats();var scene, camera, renderer, controls, light, composer,transformControls, options;var matArrayA = []; var matArrayB = []; var group = new THREE.Group();function initScene() {scene = new THREE.Scene();}function initCamera() {camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 10000);camera.position.set(0, 50, 200);}function initLight() {var directionalLight = new THREE.DirectionalLight(0xffffff, 0.3); directionalLight.color.setHSL(0.1, 1, 0.95);directionalLight.position.set(0, 200, 0).normalize();scene.add(directionalLight);var ambient = new THREE.AmbientLight(0xffffff, 1); ambient.position.set(0, 0, 0);scene.add(ambient);}function initStats() {var stats = new Stats();stats.domElement.style.position = 'absolute';stats.domElement.style.left = '0px';stats.domElement.style.top = '0px';document.body.appendChild(stats.domElement);return stats;}function initRenderer() {renderer = new THREE.WebGLRenderer({antialias: true});renderer.setSize(window.innerWidth, window.innerHeight);renderer.setClearColor(0x4682B4, 1.0);document.body.appendChild(renderer.domElement);}function createFloor() {var loader = new THREE.TextureLoader();loader.load("./ThreeJs/images/floor3.png", function(texture) {texture.wrapS = texture.wrapT = THREE.RepeatWrapping;texture.repeat.set(10, 10);var floorGeometry = new THREE.BoxGeometry(2600, 1400, 1);var floorMaterial = new THREE.MeshBasicMaterial({map: texture,});var floor = new THREE.Mesh(floorGeometry, floorMaterial);floor.rotation.x = -Math.PI / 2;scene.add(floor);});}function createCubeWall(width, height, depth, angle, material, x, y, z, name) {var cubeGeometry = new THREE.BoxGeometry(width, height, depth);var cube = new THREE.Mesh(cubeGeometry, material);cube.position.x = x;cube.position.y = y;cube.position.z = z;cube.rotation.y += angle * Math.PI; cube.name = name;scene.add(cube);}function createDoor_left(width, height, depth, angle, x, y, z, name) {var loader = new THREE.TextureLoader();loader.load("./ThreeJs/images/door_left.png", function(texture) {var doorgeometry = new THREE.BoxGeometry(width, height, depth);doorgeometry.translate(50, 0, 0);var doormaterial = new THREE.MeshBasicMaterial({map: texture,color: 0xffffff});doormaterial.opacity = 1.0;doormaterial.transparent = true;var door = new THREE.Mesh(doorgeometry, doormaterial);door.position.set(x, y, z);door.rotation.y += angle * Math.PI; door.name = name;scene.add(door);});}function createDoor_right(width, height, depth, angle, x, y, z, name) {var loader = new THREE.TextureLoader();loader.load("./ThreeJs/images/door_right.png", function(texture) {var doorgeometry = new THREE.BoxGeometry(width, height, depth);doorgeometry.translate(-50, 0, 0);var doormaterial = new THREE.MeshBasicMaterial({map: texture,color: 0xffffff});doormaterial.opacity = 1.0;doormaterial.transparent = true;var door = new THREE.Mesh(doorgeometry, doormaterial);door.position.set(x, y, z);door.rotation.y += angle * Math.PI;door.name = name;scene.add(door);});}function createWindow(width, height, depth, angle, x, y, z, name) {var loader = new THREE.TextureLoader();loader.load("./ThreeJs/images/window.png", function(texture) {var windowgeometry = new THREE.BoxGeometry(width, height, depth);var windowmaterial = new THREE.MeshBasicMaterial({map: texture,color: 0xffffff});windowmaterial.opacity = 1.0;windowmaterial.transparent = true;var window = new THREE.Mesh(windowgeometry, windowmaterial);window.position.set(x, y, z);window.rotation.y += angle * Math.PI;针window.name = name;scene.add(window);});}function returnWallObject(width, height, depth, angle, material, x, y, z, name) {var cubeGeometry = new THREE.BoxGeometry(width, height, depth);var cube = new THREE.Mesh(cubeGeometry, material);cube.position.x = x;cube.position.y = y;cube.position.z = z;cube.rotation.y += angle * Math.PI;cube.name = name;return cube;function initContent() {createFloor();createWallMaterail();createCubeWall(80, 200, 1500, 0, matArrayB, -1295, 100, 0, "墙面");createCubeWall(80, 200, 1500, 1, matArrayB, 1295, 100, 0, "墙面");createCubeWall(80, 200, 2700, 1.5, matArrayB, 0, 100, -700, "墙面");var wall =          returnWallObject(2600, 200, 80, 0, matArrayB, 0, 100, 700, "墙面");var door_cube1 =    returnWallObject(200, 180, 80, 0, matArrayB, -600, 90, 700, "前门1");var door_cube2 =    returnWallObject(200, 180, 80, 0, matArrayB, 600, 90, 700, "前门2");var window_cube1 =  returnWallObject(100, 100, 80, 0, matArrayB, -900, 90, 700, "窗户1");var window_cube2 =  returnWallObject(100, 100, 80, 0, matArrayB, 900, 90, 700, "窗户2");var window_cube3 =  returnWallObject(100, 100, 80, 0, matArrayB, -200, 90, 700, "窗户3");var window_cube4 =  returnWallObject(100, 100, 80, 0, matArrayB, 200, 90, 700, "窗户4");var objects_cube = [];objects_cube.push(door_cube1);objects_cube.push(door_cube2);objects_cube.push(window_cube1);objects_cube.push(window_cube2);objects_cube.push(window_cube3);objects_cube.push(window_cube4);createResultBsp(wall, objects_cube);}function initControls() {controls = new THREE.OrbitControls(camera, renderer.domElement);controls.enableDamping = true;controls.dampingFactor = 0.5;controls.maxPolarAngle = Math.PI / 2.2;controls.target = new THREE.Vector3(50,50,0);}</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

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

第十四届蓝桥杯省赛真题 Java 研究生 组【原卷】

第十四届蓝桥杯省赛真题 Java 研究生 组【原卷】

文章目录 发现宝藏【考生须知】试题 A: 特殊日期试题 B: 与或异或试题 C: 棋盘试题 D: 子矩阵试题 E : \mathrm{E}: E: 互质数的个数试题 F: 小蓝的旅行计划试题 G: 奇怪的数试题 H: 太阳试题 I: 高塔试题 J \mathrm{J} J : 反异或 01 串 发现宝藏 前些天发现了一个巨牛的人…
阅读更多...
讲述微信小程序宿主环境

讲述微信小程序宿主环境

上文 科普编程中 宿主环境(host environment) 基础概念 带大家科普了一下宿主环境的基本概念 那么 本文 我们就来说说小程序的一个宿主环境 首先 小程序的 宿主环境 肯定是 手机微信 安卓手机 只能安装安卓微信 IOS 系统 也只能安装IOS 系统的 微信 这是软件的宿主环境 但 微…
阅读更多...
mysql离线版安装

mysql离线版安装

1.解压zip包&#xff0c;并将解压文件 mysql-8.0.19-winx64 文件放在想放的位置&#xff0c;比如 D 盘下 2.配置环境变量&#xff08;目的是为了避免在CMD窗口下操作时反复切换路径&#xff09;&#xff0c;在Path下添加 D:\mysql-8.0.19-winx64\bin&#xff0c;环境变量设置好…
阅读更多...
Linux生产者消费者模型（简易版）

Linux生产者消费者模型（简易版）

task.hpp(用来封装一个任务): #include<iostream> #include<mutex> #include<queue> #include<pthread.h> using namespace std; class Task { public:Task(){pthread_mutex_init(&_mtx,nullptr);pthread_cond_init(&_cond,nullptr);}void Pu…
阅读更多...
helm部署hadoop

helm部署hadoop

&#xff08;作者&#xff1a;陈玓玏&#xff09; 参考helm仓库的文档&#xff1a;https://artifacthub.io/packages/helm/apache-hadoop-helm/hadoop helm helm repo add pfisterer-hadoop https://pfisterer.github.io/apache-hadoop-helm/ helm install hadoop pfistere…
阅读更多...
无设备树platform驱动实验：platform驱动注册代码实现

无设备树platform驱动实验：platform驱动注册代码实现

一. 简介 本实验编写一个无设备树文件&#xff08;即不支持设备树的旧Linux内核&#xff09;的platform驱动实验。这里选择 点亮 Led灯来举例说明。 本实验的实现分两个部分&#xff1a; (1) 一个设备模块注册的代码 (2) 一个驱动模块注册的代码 本文先实现设备模块代码的…
阅读更多...
P1086 [NOIP2004 普及组] 花生采摘

P1086 [NOIP2004 普及组] 花生采摘

题目描述 鲁宾逊先生有一只宠物猴&#xff0c;名叫多多。这天&#xff0c;他们两个正沿着乡间小路散步&#xff0c;突然发现路边的告示牌上贴着一张小小的纸条&#xff1a;“欢迎免费品尝我种的花生&#xff01;――熊字”。 鲁宾逊先生和多多都很开心&#xff0c;因为花生正…
阅读更多...
Nacos为什么对于临时实例采用心跳检测,非临时实例采用主动询问?Nacos同时作为配置中心和注册中心有什么坏处?为什么Nacos可以抗住那么高的注册?

Nacos为什么对于临时实例采用心跳检测,非临时实例采用主动询问?Nacos同时作为配置中心和注册中心有什么坏处?为什么Nacos可以抗住那么高的注册?

Nacos为什么对于临时实例采用心跳检测,非临时实例采用主动询问? Nacos 对于临时实例采用心跳检测&#xff0c;而对于非临时实例采用主动询问&#xff0c;这两种不同的健康检查机制是为了满足不同场景下的服务发现需求。具体分析如下&#xff1a; 临时实例的心跳检测&#xf…
阅读更多...
一键部署Tesseract-OCR环境C++版本（Windows）

一键部署Tesseract-OCR环境C++版本（Windows）

环境&#xff1a;Windows 10 工具&#xff1a;git vcpkg vscode cmake 库&#xff1a;Tesseract 一键部署Tesseract-OCR环境C版本&#xff08;Windows&#xff09; 分享这篇文章的原因很简单&#xff0c;就是为了让后续的朋友少走弯路。自己在搜索相关C版本的tesseract部署时…
阅读更多...
MOS管、IGBT的区别

MOS管、IGBT的区别

MOS管&#xff0c;即Metal-Oxide-Semiconductor Field-Effect Transistor&#xff0c;是我们常见的一种半导体器件&#xff0c;也被广泛称为MOSFET。 这种器件的工作原理独特且高效&#xff0c;主要是通过控制栅极电压来调控电流在两个源极和漏极之间的流动&#xff0c;这也是其…
阅读更多...
【SQL Server】实验五 视图

【SQL Server】实验五 视图

1 实验目的 掌握SQL视图语句的基本使用方法&#xff0c;如CREATE VIEW、DROP VIEW。掌握视图更新、WITH CHECK OPTION等高级功能的使用。 2 实验内容 2.1 掌握SQL视图语句的基本使用方法 创建视图&#xff08;省略视图列名&#xff09;。创建视图&#xff08;不能省略列名的…
阅读更多...
Vue.js+SpringBoot开发天沐瑜伽馆管理系统

Vue.js+SpringBoot开发天沐瑜伽馆管理系统

目录 一、摘要1.1 项目介绍1.2 项目录屏 二、功能模块2.1 数据中心模块2.2 瑜伽课程模块2.3 课程预约模块2.4 系统公告模块2.5 课程评价模块2.6 瑜伽器械模块 三、系统设计3.1 实体类设计3.1.1 瑜伽课程3.1.2 瑜伽课程预约3.1.3 系统公告3.1.4 瑜伽课程评价 3.2 数据库设计3.2.…
阅读更多...
分享6款非常优质炫酷的前端动画特效（附在线演示）

分享6款非常优质炫酷的前端动画特效（附在线演示）

分享6款非常不错的项目动画特效 其中有three.js特效、canvas特效、CSS动画、SVG特效等等 下方效果图可能不是特别的生动 那么你可以点击在线预览进行查看相应的动画特效 同时也是可以下载该资源的 CSS33D海盗船动画 基于纯CSS3的3D海盗船动画&#xff0c;该动画分两部分&…
阅读更多...
QT 如何在QPushButton上播放gif（终极版）

QT 如何在QPushButton上播放gif（终极版）

在平时浏览网站&#xff0c;或者使用软件的时候&#xff0c;经常可以见到&#xff1a;在点击了某个按钮之后&#xff0c;按钮上会显示动图以及提示文字。在QT中&#xff0c;比较常见且简单的做法就是&#xff1a;给按钮设置一个layout&#xff0c;然后在这个layout里面添加QLab…
阅读更多...
百度飞桨大模型训练营：人工智能与大语言模型

百度飞桨大模型训练营：人工智能与大语言模型

1 人工智能基础概念全景介绍 1.1 人工智能概念 解释这些概念 AI是计算机学科下的一个分支学科&#xff0c;旨在使用计算机使之能像人类一样学习和思考问题机器学习是AI的一个子集&#xff0c;它的一个重要特点就是不需要人去做显示编程&#xff08;不用手撕函数&#xff09;&…
阅读更多...
性能测试什么时候开始？性能测试流程介绍

性能测试什么时候开始？性能测试流程介绍

性能测试什么时候开始? 一般在系统功能稳定没有大的缺陷之后开始执行。但前期准备工作可以从系统需求分析时就开始&#xff1a;性能目标制定、场景获取、环境申请等。 一、制定性能测试目标 在特定的并发用户数下测试特定场景的响应时间 在一定的响应时间的要求下来测试特…
阅读更多...
STM32的IAP讲解

STM32的IAP讲解

stm32系列芯片的种类和型号 汇编文件种类型号startup_stm32f10x_cl.s互联型的器件STM32F105xx，STM32F107xxstartup_stm32f10x_hd.s大容量STM32F101xx，STM32F102xx，STM32F103xxstartup_stm32f10x_hd_vl.s大容量STM32F100xxstartup_stm32f10x_ld.s小容量STM32F101xx，STM32F10…
阅读更多...
进程等待详解

进程等待详解

一、进程等待的作用 我们都知道&#xff0c;当子进程已经结束而父进程还在执行时&#xff0c;子进程会变成僵尸进程&#xff0c;造成内存泄漏等问题&#xff0c;如下&#xff1a; #include <stdio.h> #include <stdlib.h> #include <stdbool.h> #include &l…
阅读更多...
【包邮送书】ARM汇编与逆向工程

【包邮送书】ARM汇编与逆向工程

欢迎关注博主 Mindtechnist 或加入【智能科技社区】一起学习和分享Linux、C、C、Python、Matlab&#xff0c;机器人运动控制、多机器人协作&#xff0c;智能优化算法&#xff0c;滤波估计、多传感器信息融合&#xff0c;机器学习&#xff0c;人工智能等相关领域的知识和技术。关…
阅读更多...
被问了N遍的效率工具！批量自动添加好友

被问了N遍的效率工具！批量自动添加好友

你还在手动输入客户号码或是微信号&#xff0c;再逐一进行搜索和添加吗&#xff1f; 现在有一个工具可以帮助你完成这项重复枯燥的工作任务&#xff0c;而且&#xff0c;这个工具不仅能够帮助你批量添加微信好友&#xff0c;更有很多自动化的功能&#xff0c;让你的办公效率得…
阅读更多...
最新文章

Copyright @ 2022~2023