|
After Width: | Height: | Size: 18 KiB |
|
After Width: | Height: | Size: 78 KiB |
|
After Width: | Height: | Size: 174 KiB |
|
After Width: | Height: | Size: 243 KiB |
@ -0,0 +1,285 @@ |
|||||
|
<!DOCTYPE html> |
||||
|
<html> |
||||
|
|
||||
|
<head> |
||||
|
<meta charset="utf-8"> |
||||
|
<title>Threejs实现3D场景中添加html网页</title> |
||||
|
<!-- <script type="text/javascript" src="libs/statistics.js"></script> --> |
||||
|
<!-- <script type="text/javascript" src="libs/steak.js"></script> --> |
||||
|
<style> |
||||
|
body { |
||||
|
background-color: #ffffff; |
||||
|
margin: 0; |
||||
|
overflow: hidden; |
||||
|
} |
||||
|
|
||||
|
</style> |
||||
|
<script type="importmap"> |
||||
|
{ |
||||
|
"imports": { |
||||
|
"three": "./libs/three/three.module.js", |
||||
|
"jsm/": "./libs/three/jsm/" |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
</head> |
||||
|
|
||||
|
<body ontouchstart=""> |
||||
|
<div class="info">2D数据表格显示 不旋转 厌氧系统 </div> |
||||
|
<script type="module"> |
||||
|
|
||||
|
import * as THREE from 'three'; |
||||
|
// import { APP } from './js/app2.0.js'; |
||||
|
|
||||
|
|
||||
|
import { OrbitControls } from 'jsm/controls/OrbitControls.js'; |
||||
|
import { GLTFLoader } from 'jsm/loaders/GLTFLoader.js'; |
||||
|
|
||||
|
import { CSS3DRenderer, CSS3DObject } from 'jsm/renderers/CSS3DRenderer.js'; |
||||
|
import { Water } from 'jsm/objects/Water.js'; |
||||
|
import modellabel from './js/units/modellabel.js' |
||||
|
import css3dlabel from './js/units/css3dlabel.js' |
||||
|
import config from './js/config.js' |
||||
|
|
||||
|
|
||||
|
var controls, camera, glScene, cssScene, glRenderer, cssRenderer; |
||||
|
|
||||
|
function createGlRenderer() { |
||||
|
var glRenderer = new THREE.WebGLRenderer({ |
||||
|
antialias: true, |
||||
|
alpha: true |
||||
|
}); |
||||
|
|
||||
|
glRenderer.setClearColor(0xECF8FF); |
||||
|
glRenderer.setPixelRatio(window.devicePixelRatio); |
||||
|
glRenderer.setSize(window.innerWidth, window.innerHeight); |
||||
|
|
||||
|
glRenderer.domElement.style.position = 'absolute'; |
||||
|
glRenderer.domElement.style.zIndex = 1; |
||||
|
glRenderer.domElement.style.top = 0; |
||||
|
|
||||
|
return glRenderer; |
||||
|
} |
||||
|
|
||||
|
function createCssRenderer() { |
||||
|
var cssRenderer = new CSS3DRenderer(); |
||||
|
cssRenderer.setSize(window.innerWidth, window.innerHeight); |
||||
|
cssRenderer.domElement.style.position = 'absolute'; |
||||
|
glRenderer.domElement.style.zIndex = 0; |
||||
|
cssRenderer.domElement.style.top = 0; |
||||
|
return cssRenderer; |
||||
|
} |
||||
|
|
||||
|
function createPlane(w, h, position, rotation) { |
||||
|
|
||||
|
var material = new THREE.MeshBasicMaterial({ |
||||
|
color: 0x000000, |
||||
|
opacity: 0.0, |
||||
|
side: THREE.DoubleSide |
||||
|
}); |
||||
|
|
||||
|
var geometry = new THREE.PlaneGeometry(w, h); |
||||
|
|
||||
|
var mesh = new THREE.Mesh(geometry, material); |
||||
|
|
||||
|
mesh.position.x = position.x; |
||||
|
mesh.position.y = position.y; |
||||
|
mesh.position.z = position.z; |
||||
|
|
||||
|
mesh.rotation.x = rotation.x; |
||||
|
mesh.rotation.y = rotation.y; |
||||
|
mesh.rotation.z = rotation.z; |
||||
|
|
||||
|
mesh.scale.set(0.003, 0.003, 0.003); |
||||
|
return mesh; |
||||
|
} |
||||
|
|
||||
|
function createCssObject(w, h, position, rotation, url) { |
||||
|
var iframe = document.createElement('iframe') |
||||
|
iframe.src = url; |
||||
|
iframe.style.width = w + 'px'; |
||||
|
iframe.style.height = h + 'px'; |
||||
|
iframe.style.border = '0px'; |
||||
|
// const iframe = document.createElement('div'); |
||||
|
// // iframe.className = 'className'; |
||||
|
// iframe.name = "csslabeldiv" |
||||
|
// iframe.textContent = '测试11111'; |
||||
|
|
||||
|
// iframe.style.pointerEvents = 'none';//避免HTML标签遮挡三维场景的鼠标事件 |
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
var cssObject = new CSS3DObject(iframe); |
||||
|
cssObject.position.x = position.x; |
||||
|
cssObject.position.y = position.y; |
||||
|
cssObject.position.z = position.z; |
||||
|
|
||||
|
cssObject.rotation.x = rotation.x; |
||||
|
cssObject.rotation.y = rotation.y; |
||||
|
cssObject.rotation.z = rotation.z; |
||||
|
|
||||
|
cssObject.scale.set(0.003, 0.003, 0.003); |
||||
|
return cssObject; |
||||
|
} |
||||
|
|
||||
|
function initModel() { |
||||
|
var loader = new GLTFLoader(); |
||||
|
loader.load('assets/models/gallery.glb', function (gltf) { |
||||
|
gltf.scene.traverse(function (child) { |
||||
|
switch (child.name) { |
||||
|
case 'walls': |
||||
|
initWalls(child) |
||||
|
break |
||||
|
case 'stairs': |
||||
|
initStairs(child) |
||||
|
break |
||||
|
} |
||||
|
|
||||
|
//设置展画边框贴图 |
||||
|
if (child.name.includes('paint')) { |
||||
|
initFrames(child) |
||||
|
} |
||||
|
//设置展画图片贴图 |
||||
|
if (child.name.includes('draw')) { |
||||
|
initDraws(child) |
||||
|
} |
||||
|
}) |
||||
|
glScene.add(gltf.scene) |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
function initDraws(child) { } |
||||
|
|
||||
|
function initFrames(child) { |
||||
|
child.material = new THREE.MeshBasicMaterial({ |
||||
|
color: 0x7f5816, |
||||
|
}) |
||||
|
} |
||||
|
|
||||
|
function initStairs(child) { |
||||
|
child.material = new THREE.MeshStandardMaterial({ |
||||
|
color: 0xd1cdb7, |
||||
|
}) |
||||
|
child.material.roughness = 0.5 |
||||
|
child.material.metalness = 0.6 |
||||
|
} |
||||
|
|
||||
|
function initWalls(child) { |
||||
|
child.material = new THREE.MeshStandardMaterial({ |
||||
|
color: 0xffffff, |
||||
|
}) |
||||
|
child.material.roughness = 0.5 |
||||
|
child.material.metalness = 0.6 |
||||
|
} |
||||
|
|
||||
|
function create3dPage(w, h, position, rotation, url) { |
||||
|
var plane = createPlane( |
||||
|
w, h, |
||||
|
position, |
||||
|
rotation); |
||||
|
glScene.add(plane); |
||||
|
|
||||
|
var cssObject = createCssObject( |
||||
|
w, h, |
||||
|
position, |
||||
|
rotation, |
||||
|
url); |
||||
|
cssScene.add(cssObject); |
||||
|
} |
||||
|
|
||||
|
function createLights() { |
||||
|
const light = new THREE.AmbientLight("#ffffff"); |
||||
|
glScene.add(light); |
||||
|
|
||||
|
const light1 = new THREE.PointLight(0xe0ffff, 0.1, 20) |
||||
|
light1.position.set(-2, 3, 2) |
||||
|
glScene.add(light1) |
||||
|
|
||||
|
const light2 = new THREE.PointLight(0xe0ffff, 0.1, 20) |
||||
|
light2.position.set(0, 3, -6) |
||||
|
glScene.add(light2) |
||||
|
|
||||
|
const light3 = new THREE.PointLight(0xe0ffff, 0.1, 20) |
||||
|
light3.position.set(-12, 3, 6) |
||||
|
glScene.add(light3) |
||||
|
|
||||
|
const light4 = new THREE.PointLight(0xe0ffff, 0.1, 20) |
||||
|
light4.position.set(-12, 4, -4) |
||||
|
glScene.add(light4) |
||||
|
|
||||
|
const light5 = new THREE.PointLight(0xe0ffff, 0.1, 20) |
||||
|
light5.position.set(12, 4, -8) |
||||
|
glScene.add(light5) |
||||
|
|
||||
|
const light6 = new THREE.PointLight(0xe0ffff, 0.1, 20) |
||||
|
light6.position.set(12, 4, 0) |
||||
|
glScene.add(light6) |
||||
|
|
||||
|
const light7 = new THREE.PointLight(0xe0ffff, 0.1, 20) |
||||
|
light7.position.set(12, 4, 8) |
||||
|
glScene.add(light7) |
||||
|
} |
||||
|
|
||||
|
function initialize() { |
||||
|
camera = new THREE.PerspectiveCamera( |
||||
|
45, |
||||
|
window.innerWidth / window.innerHeight, |
||||
|
1, |
||||
|
10000); |
||||
|
|
||||
|
camera.position.set(-10, 5, -10); |
||||
|
|
||||
|
glRenderer = createGlRenderer(); |
||||
|
cssRenderer = createCssRenderer(); |
||||
|
|
||||
|
controls = new OrbitControls(camera, cssRenderer.domElement); |
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
// document.body.appendChild(glRenderer.domElement); |
||||
|
document.body.appendChild(cssRenderer.domElement); |
||||
|
cssRenderer.domElement.appendChild(glRenderer.domElement); |
||||
|
|
||||
|
glScene = new THREE.Scene(); |
||||
|
cssScene = glScene//new THREE.Scene(); |
||||
|
|
||||
|
var ambientLight = new THREE.AmbientLight(0x555555); |
||||
|
glScene.add(ambientLight); |
||||
|
|
||||
|
var directionalLight = new THREE.DirectionalLight(0xffffff); |
||||
|
directionalLight.position.set(-.5, .5, -1.5).normalize(); |
||||
|
glScene.add(directionalLight); |
||||
|
|
||||
|
for (var i = 0; i < 2; i++) { |
||||
|
create3dPage( |
||||
|
1020, 680, |
||||
|
new THREE.Vector3(-2 - i, 1 + i / 3, -4.2 + i), |
||||
|
new THREE.Vector3(0, Math.PI, 0), |
||||
|
'https://zuoben.blog.csdn.net/'); |
||||
|
} |
||||
|
|
||||
|
initModel(); |
||||
|
createLights(); |
||||
|
|
||||
|
update(); |
||||
|
} |
||||
|
|
||||
|
function update() { |
||||
|
|
||||
|
controls.update(); |
||||
|
|
||||
|
glRenderer.render(glScene, camera); |
||||
|
|
||||
|
cssRenderer.render(cssScene, camera); |
||||
|
|
||||
|
requestAnimationFrame(update); |
||||
|
} |
||||
|
|
||||
|
initialize(); |
||||
|
</script> |
||||
|
</body> |
||||
|
|
||||
|
</html> |
||||
|
After Width: | Height: | Size: 37 KiB |
|
After Width: | Height: | Size: 14 KiB |
|
After Width: | Height: | Size: 54 KiB |
|
After Width: | Height: | Size: 19 KiB |
|
After Width: | Height: | Size: 5.5 KiB |
|
After Width: | Height: | Size: 526 KiB |
|
After Width: | Height: | Size: 464 KiB |
|
After Width: | Height: | Size: 464 KiB |
|
After Width: | Height: | Size: 390 KiB |
|
After Width: | Height: | Size: 216 KiB |
|
After Width: | Height: | Size: 110 KiB |
|
After Width: | Height: | Size: 33 KiB |
|
After Width: | Height: | Size: 151 KiB |
|
After Width: | Height: | Size: 6.0 KiB |
|
After Width: | Height: | Size: 86 KiB |
|
After Width: | Height: | Size: 14 KiB |
|
After Width: | Height: | Size: 8.2 KiB |
|
After Width: | Height: | Size: 8.0 KiB |
|
After Width: | Height: | Size: 36 KiB |
|
After Width: | Height: | Size: 4.4 KiB |
|
After Width: | Height: | Size: 2.6 KiB |
|
After Width: | Height: | Size: 191 KiB |
|
After Width: | Height: | Size: 18 KiB |
|
After Width: | Height: | Size: 28 KiB |
|
After Width: | Height: | Size: 28 KiB |
|
After Width: | Height: | Size: 17 KiB |
|
After Width: | Height: | Size: 22 KiB |
|
After Width: | Height: | Size: 9.1 KiB |
|
After Width: | Height: | Size: 35 KiB |
|
After Width: | Height: | Size: 53 KiB |
|
After Width: | Height: | Size: 66 KiB |
|
After Width: | Height: | Size: 38 KiB |
|
After Width: | Height: | Size: 9.3 KiB |
|
After Width: | Height: | Size: 10 KiB |
|
After Width: | Height: | Size: 14 KiB |
|
After Width: | Height: | Size: 9.3 KiB |
|
After Width: | Height: | Size: 2.1 KiB |
|
After Width: | Height: | Size: 17 KiB |
|
After Width: | Height: | Size: 1.7 KiB |
|
After Width: | Height: | Size: 21 KiB |
|
After Width: | Height: | Size: 137 KiB |
|
After Width: | Height: | Size: 131 KiB |
|
After Width: | Height: | Size: 114 KiB |
|
After Width: | Height: | Size: 8.7 KiB |
|
After Width: | Height: | Size: 35 KiB |
|
After Width: | Height: | Size: 38 KiB |
|
After Width: | Height: | Size: 33 KiB |
|
After Width: | Height: | Size: 745 B |
|
After Width: | Height: | Size: 21 KiB |
|
After Width: | Height: | Size: 5.6 KiB |
|
After Width: | Height: | Size: 6.3 KiB |
|
After Width: | Height: | Size: 3.4 KiB |
|
After Width: | Height: | Size: 33 KiB |
|
After Width: | Height: | Size: 21 KiB |
|
After Width: | Height: | Size: 46 KiB |
|
After Width: | Height: | Size: 12 KiB |
|
After Width: | Height: | Size: 22 KiB |
|
After Width: | Height: | Size: 180 KiB |
|
After Width: | Height: | Size: 459 KiB |
|
After Width: | Height: | Size: 459 KiB |
|
After Width: | Height: | Size: 88 KiB |
|
After Width: | Height: | Size: 88 KiB |
|
After Width: | Height: | Size: 88 KiB |
|
After Width: | Height: | Size: 111 KiB |
|
After Width: | Height: | Size: 38 KiB |
|
After Width: | Height: | Size: 39 KiB |
|
After Width: | Height: | Size: 19 KiB |
|
After Width: | Height: | Size: 38 KiB |
|
After Width: | Height: | Size: 17 KiB |
|
After Width: | Height: | Size: 17 KiB |
|
After Width: | Height: | Size: 6.3 KiB |
|
After Width: | Height: | Size: 1.6 KiB |
|
After Width: | Height: | Size: 35 KiB |
|
After Width: | Height: | Size: 31 KiB |
|
After Width: | Height: | Size: 44 KiB |
|
After Width: | Height: | Size: 37 KiB |
|
After Width: | Height: | Size: 38 KiB |
|
After Width: | Height: | Size: 62 KiB |
|
After Width: | Height: | Size: 14 KiB |
|
After Width: | Height: | Size: 17 KiB |
|
After Width: | Height: | Size: 7.5 KiB |
|
After Width: | Height: | Size: 28 KiB |
|
After Width: | Height: | Size: 101 KiB |
|
After Width: | Height: | Size: 45 KiB |
|
After Width: | Height: | Size: 86 KiB |