|
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 |