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

news2024/10/6 5:57:54

程序示例精选
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