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 串 发现宝藏 前些天发现了一个巨牛的人…
阅读更多...
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…
阅读更多...
P1086 [NOIP2004 普及组] 花生采摘

P1086 [NOIP2004 普及组] 花生采摘

题目描述 鲁宾逊先生有一只宠物猴&#xff0c;名叫多多。这天&#xff0c;他们两个正沿着乡间小路散步&#xff0c;突然发现路边的告示牌上贴着一张小小的纸条&#xff1a;“欢迎免费品尝我种的花生&#xff01;――熊字”。 鲁宾逊先生和多多都很开心&#xff0c;因为花生正…
阅读更多...
一键部署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;&…
阅读更多...
进程等待详解

进程等待详解

一、进程等待的作用 我们都知道&#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;让你的办公效率得…
阅读更多...
第二证券|AIGC行业新突破不断 文化传媒板块活跃

第二证券|AIGC行业新突破不断 文化传媒板块活跃

本周以来&#xff0c;以短剧、游戏为代表的文明传媒板块实现三连涨。3月13日&#xff0c;游戏股逆势大涨&#xff0c;游戏出海、网络游戏、短剧游戏方向领涨。到收盘&#xff0c;因赛集团以20%幅度涨停&#xff0c;掌趣科技涨超10%&#xff0c;凯撒文明、中广天择、时代出书、大…
阅读更多...
【Datawhale组队学习：Sora原理与技术实战】训练一个 sora 模型的准备工作，video caption 和算力评估

【Datawhale组队学习：Sora原理与技术实战】训练一个 sora 模型的准备工作，video caption 和算力评估

训练 Sora 模型 在 Sora 的技术报告中&#xff0c;Sora 使用视频压缩网络将各种大小的视频压缩为潜在空间中的时空 patches sequence&#xff0c;然后使用 Diffusion Transformer 进行去噪&#xff0c;最后解码生成视频。 Open-Sora 在下图中总结了 Sora 可能使用的训练流程。…
阅读更多...
Django之Cookie

Django之Cookie

Django之Cookie 目录 Django之Cookie介绍Django操作Cookie设置Cookie浏览器查看Cookie 获取Cookie设置超时Cookie注销Cookie 模拟登录验证登录验证装饰器登录验证装饰器-升级版 介绍 当我们上网使用社交媒体或者购物时&#xff0c;浏览器需要通过一种方式来记住我们。想象一下…
阅读更多...
Spring boot java: 无效的目标发行版: 18

Spring boot java: 无效的目标发行版: 18

idea 搭建spring boot 报错java: 无效的目标发行版: 18 本人jdk 1.8 解决方案如下&#xff1a;
阅读更多...
学点Java打小工_Day4_数组_冒泡排序

学点Java打小工_Day4_数组_冒泡排序

1 数组基本概念 程序算法数据结构 算法&#xff1a;解决程序的流程步骤 数据结构&#xff1a;将数据按照某种特定的结构来存储 设计良好的数据结构会导致良好的算法。 ArrayList、LinkedList 数组是最简单的数据结构。 数组&#xff1a;存放同一种类型数据的集合&#xff0c;在…
阅读更多...
VGG网络的代码实现

VGG网络的代码实现

VGG网络的程序实现完全根据配置表来实现。 全连接层之前的部分属于特征提取部分&#xff0c;后三部分全连接层用来分类。 1、模型 import torch.nn as nn import torch# official pretrain weights #预训练的权重下载地址 model_urls {vgg11: https://download.pytorch.org/…
阅读更多...
电子科技大学链时代工作室招新题C语言部分---题号E

电子科技大学链时代工作室招新题C语言部分---题号E

1. 题目 这道题大概的意思是说&#xff0c;一座城市中被埋了许多雷&#xff08;用一个只含0和1的字符串表示城市&#xff0c;1代表有雷&#xff0c;0代表无雷&#xff09;。 你作为一个排雷兵&#xff0c;需要花最少的钱引爆所有的雷来使城市中不再有雷&#xff08;太逆天了&a…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023