前言
这篇博客针对《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 名片，由专业技术人员远程协助！
当前文章连接：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