diff --git a/.DS_Store b/.DS_Store index 04c6a84..dd18809 100644 Binary files a/.DS_Store and b/.DS_Store differ diff --git a/assets/.DS_Store b/assets/.DS_Store index e222ad3..f81c994 100644 Binary files a/assets/.DS_Store and b/assets/.DS_Store differ diff --git a/assets/models/.DS_Store b/assets/models/.DS_Store index 7fdccb8..3b976cc 100644 Binary files a/assets/models/.DS_Store and b/assets/models/.DS_Store differ diff --git a/assets/models/1.glb b/assets/models/1.glb new file mode 100644 index 0000000..eb55940 Binary files /dev/null and b/assets/models/1.glb differ diff --git a/assets/models/11.glb b/assets/models/11.glb new file mode 100644 index 0000000..7669839 Binary files /dev/null and b/assets/models/11.glb differ diff --git a/assets/models/uasb.glb b/assets/models/uasb.glb index 97cfb8e..27dfdba 100644 Binary files a/assets/models/uasb.glb and b/assets/models/uasb.glb differ diff --git a/assets/models/uasb1.glb b/assets/models/uasb1.glb deleted file mode 100644 index ec0779c..0000000 Binary files a/assets/models/uasb1.glb and /dev/null differ diff --git a/assets/models/uasb2.glb b/assets/models/uasb2.glb deleted file mode 100644 index 27dfdba..0000000 Binary files a/assets/models/uasb2.glb and /dev/null differ diff --git a/box.html b/box.html new file mode 100644 index 0000000..50acb21 --- /dev/null +++ b/box.html @@ -0,0 +1,517 @@ + + + + + + + + + 3D库图显示 + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+ + + + + + diff --git a/cesuim.html b/cesuim.html new file mode 100644 index 0000000..296b4fd --- /dev/null +++ b/cesuim.html @@ -0,0 +1,103 @@ + + + + + + + + cesium 标点 + + + + + + + + +
+ + + + diff --git a/js/app.js b/js/app.js index 806c187..ea33b11 100644 --- a/js/app.js +++ b/js/app.js @@ -23,6 +23,7 @@ var APP = { 1, 10000); + // camera = camera = new THREE.OrthographicCamera(-5, 5, 5.5, -5.5, 1, 20); camera.position.set(-10, 5, -10); glRenderer = createGlRenderer(); @@ -129,33 +130,33 @@ var APP = { const light = new THREE.AmbientLight("#aaaaaa"); glScene.add(light); - // const light1 = new THREE.PointLight(0xe0ffff, 0.1, 20) - // light1.position.set(-2, 3, 2) - // glScene.add(light1) + 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 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 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 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 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 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) + const light7 = new THREE.PointLight(0xe0ffff, 0.1, 20) + light7.position.set(12, 4, 8) + glScene.add(light7) } this.setClearColor = function (color) { @@ -229,11 +230,11 @@ var APP = { // 播放特效 water.material.uniforms['time'].value += 1.0 / 60.0; }); - FUN_ARR.forEach( fun=> { + FUN_ARR.forEach(fun => { // 播放特效 fun(); }); - + } @@ -423,8 +424,8 @@ var APP = { tmplable.element.textContent = text; }) } - - this.addRefeshFunction = function(fun){ + + this.addRefeshFunction = function (fun) { FUN_ARR.push(fun); } diff --git a/js/appbig.js b/js/appbig.js new file mode 100644 index 0000000..57ef10b --- /dev/null +++ b/js/appbig.js @@ -0,0 +1,436 @@ + +import { OrbitControls } from 'jsm/controls/OrbitControls.js'; + + +import { CSS3DRenderer, CSS3DObject, CSS3DSprite } from 'jsm/renderers/CSS3DRenderer.js'; +import css3dlabel from './units/css3dlabel.js' + +var APP = { + + Player: function () { + + + var controls, camera, glScene, cssScene, glRenderer, cssRenderer; + var waters = []; + //CSS 标签列表 + var BIG_LABEL_ARR = []; + //刷新函数列表 + var FUN_ARR = []; + + camera = new THREE.PerspectiveCamera( + 45, + window.innerWidth / window.innerHeight, + 1, + 10000); + + camera.position.set(-0, 60, -60); + + glRenderer = createGlRenderer(); + cssRenderer = createCssRenderer(); + + controls = new OrbitControls(camera, glRenderer.domElement); + // controls = new OrbitControls(camera, glRenderer.domElement); + document.body.appendChild(cssRenderer.domElement); + document.body.appendChild(glRenderer.domElement); + // glRenderer.domElement.appendChild(cssRenderer.domElement); + + glScene = new THREE.Scene(); + cssScene = new THREE.Scene(); + + + // for (var i = 0; i < 20; 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(); + + window.camera = camera; + window.scene = glScene; + + + + + + function createGlRenderer() { + var glRenderer = new THREE.WebGLRenderer({ + antialias: true, + alpha: true + }); + + glRenderer.setClearColor(0x34495E); + 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 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() { + var directionalLight = new THREE.DirectionalLight(0xffffff); + directionalLight.position.set(0, 100, -50).normalize(); + glScene.add(directionalLight); + + const light = new THREE.AmbientLight("#ffffff"); + glScene.add(light); + + const light1 = new THREE.PointLight(0xffffff, 1, 20) + light1.position.set(-0, 100, 100) + glScene.add(light1) + + const light2 = new THREE.PointLight(0xffffff, 1, 20) + light2.position.set(-100, 100, 100) + glScene.add(light2) + + const light3 = new THREE.PointLight(0xffffff, 1, 20) + light3.position.set(-12, 3, 6) + glScene.add(light3) + + const light4 = new THREE.PointLight(0xffffff, 1, 20) + light4.position.set(-12, 4, -4) + glScene.add(light4) + + const light5 = new THREE.PointLight(0xffffff,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) + } + + this.setClearColor = function (color) { + glRenderer.setClearColor(color); + } + //position = { x: 0, y: 0, z: 0 }, rotation= { x: 0, y: 0, z: 0 } + this.addModels = function (value) { + + glScene.add(value); + + }; + + + this.setCamera = function (value) { + + camera = value; + camera.aspect = this.width / this.height; + camera.updateProjectionMatrix(); + // this.camera = camera; + window.camera = camera; + + }; + + this.setScene = function (value) { + + glScene = value; + window.scene = glScene + + }; + this.addWater = function (water) { + waters.push(water); + } + this.setPixelRatio = function (pixelRatio) { + + glRenderer.setPixelRatio(pixelRatio); + + }; + + this.setSize = function (width, height) { + + this.width = width; + this.height = height; + + if (camera) { + + camera.aspect = this.width / this.height; + camera.updateProjectionMatrix(); + + } + + glRenderer.setSize(this.width, this.height); + cssRenderer.setSize(this.width, this.height); + + }; + + + + var time, startTime, prevTime; + + + + function animate() { + + + // controls.update(); + + glRenderer.render(glScene, camera); + + cssRenderer.render(cssScene, camera); + waters.forEach(water => { + // 播放特效 + water.material.uniforms['time'].value += 1.0 / 60.0; + }); + FUN_ARR.forEach( fun=> { + // 播放特效 + fun(); + }); + + + + } + + var objects = [] + this.play = function () { + + + // if (renderer.xr.enabled) dom.append(vrButton); + + // startTime = prevTime = performance.now(); + + // document.addEventListener('keydown', onKeyDown); + // document.addEventListener('keyup', onKeyUp); + // document.addEventListener('pointerdown', onPointerDown); + // document.addEventListener('pointerup', onPointerUp); + // document.addEventListener('pointermove', onPointerMove); + + // dispatch(events.start, arguments); + + glRenderer.setAnimationLoop(animate); + + // const image = document.createElement('img'); + // image.addEventListener('load', function () { + + // for (let i = 0; i < 2; i++) { + + // const object = new CSS3DSprite(image.cloneNode()); + // object.position.x = Math.random() * 4 - 2, + // object.position.y = Math.random() * 4 - 2, + // object.position.z = Math.random() * 4 - 2; + // object.scale.set(0.01, 0.01, 0.01); + // glScene.add(object); + + // objects.push(object); + + // } + + // //transition(); + + // }); + // image.src = '/assets/textures/sprite.png'; + + // cssScene.add(createSpriteShape()); + // cssScene.add(createBox13DLabel()); + + + }; + + this.stop = function () { + + if (renderer.xr.enabled) vrButton.remove(); + + // document.removeEventListener('keydown', onKeyDown); + // document.removeEventListener('keyup', onKeyUp); + // document.removeEventListener('pointerdown', onPointerDown); + // document.removeEventListener('pointerup', onPointerUp); + // document.removeEventListener('pointermove', onPointerMove); + + dispatch(events.stop, arguments); + + glRenderer.setAnimationLoop(null); + + + }; + + + this.dispose = function () { + + glRenderer.dispose(); + cssRenderer.dispose(); + + camera = undefined; + glScene = undefined; + cssScene = undefined; + + }; + + // + this.create3dPage = function (w, h, position, rotation, url) { + + var plane = css3dlabel.createPlane( + w, h, + position, + rotation); + glScene.add(plane); + + var cssObject = css3dlabel.createCssObject( + w, h, + position, + rotation, + url); + cssScene.add(cssObject); + } + const defaultScale = 80 + this.create3dLabel = function (parent, text, w = 100, h = 20, position, rotation) { + + + // let sprite =createBox13DLabel() + // glScene.add(sprite) + // return ; + let txtlength = text.length + + var width = defaultScale * txtlength; + var height = defaultScale + 15; + + var plane = css3dlabel.createPlane( + width, height, + position, + rotation); + + glScene.add(plane); + + var cssObject = css3dlabel.createCssLabel(text, + width, height, + position, + rotation); + // if(parent){ + // parent.add(cssObject); + BIG_LABEL_ARR.push(cssObject); + // }else{ + cssScene.add(cssObject); + // } + //cssObject.element.textContent = 'your data' + } + // this.create3dButton = function (parent, text, w = 100, h = 20, position, rotation,click) { + + // let txtlength = text.length + + // var width = defaultScale * txtlength; + // var height = defaultScale + 15; + + // var plane = css3dlabel.createPlane( + // width, height, + // position, + // rotation); + + // glScene.add(plane); + + // var cssObject = css3dlabel.createButton(text, + // position, + // rotation,click); + // // if(parent){ + // // parent.add(cssObject); + + // // }else{ + // cssScene.add(cssObject); + // // } + // } + function createSpriteShape() { + /*1、创建一个画布，记得设置画布的宽高，否则将使用默认宽高，有可能会导致图像显示变形*/ + let canvas = document.createElement("canvas"); + canvas.width = 120; + canvas.height = 120; + /*2、创建图形，这部分可以去看w3c canvas教程*/ + let ctx = canvas.getContext("2d"); + ctx.fillStyle = "#ff0000"; + ctx.arc(50, 50, 50, 0, 2 * Math.PI); + ctx.fill(); + /*3、将canvas作为纹理，创建Sprite*/ + let texture = new THREE.Texture(canvas); + texture.needsUpdate = true; //注意这句不能少 + let material = new THREE.SpriteMaterial({ + color: 0xff00ff,//设置精灵矩形区域颜色 + rotation: Math.PI / 4,//旋转精灵对象45度，弧度值 + map: texture,//设置精灵纹理贴图 + }); + let mesh = new THREE.Sprite(material); + mesh.position.x = 2; + mesh.position.y = 2; + /*4、放大图片，每个精灵有自己的大小，默认情况下都是很小的，如果你不放大，基本是看不到的*/ + //mesh.scale.set(100,100,1); + return mesh; + } + function createBox13DLabel() { + const div = document.createElement("div"); + div.className = "red-box-label"; + div.textContent = "红色正方体"; + // CSS3DSprite;CSS3DObject + const earthLabel = new CSS3DSprite(div); + earthLabel.position.set(1, 0.2, 0.5); + earthLabel.scale.set(0.01, 0.01, 0.01); + return earthLabel; + } + this.updateLabel = function (name, text) { + BIG_LABEL_ARR.forEach(tmplable => { + tmplable.element.textContent = text; + }) + } + + this.addRefeshFunction = function(fun){ + FUN_ARR.push(fun); + + } + + } + +}; + +export { APP }; diff --git a/libs/.DS_Store b/libs/.DS_Store index efef508..76f52fa 100644 Binary files a/libs/.DS_Store and b/libs/.DS_Store differ diff --git a/libs/three/js/.DS_Store b/libs/three/js/.DS_Store index bdc805a..fbf6d24 100644 Binary files a/libs/three/js/.DS_Store and b/libs/three/js/.DS_Store differ diff --git a/lndexUASBUpdate.html b/lndexUASBUpdate.html index f26f3fb..4a30ed6 100644 --- a/lndexUASBUpdate.html +++ b/lndexUASBUpdate.html @@ -146,13 +146,13 @@ mqttInit(); updateLabel(); - // for (var i = 0; i < 1; i++) { - // player.create3dPage( - // 1020, 680, - // new THREE.Vector3(-2 - i, 2 + i / 3, -4.2 + i), - // new THREE.Vector3(0, Math.PI, 0), - // 'https://zuoben.blog.csdn.net/'); - // } + for (var i = 0; i < 1; i++) { + player.create3dPage( + 1020, 680, + new THREE.Vector3(-2 - i, 2 + i / 3, -4.2 + i), + new THREE.Vector3(0, Math.PI, 0), + 'https://zuoben.blog.csdn.net/'); + } addLEDScreen(); @@ -161,8 +161,21 @@ // scene.add(video); initEcharts() + addCamera(); + } + + function addCamera() { + // 辅助相机 + let aspect=1.5 + const camera1 = new THREE.PerspectiveCamera(30, aspect, 5, 10) + camera1.position.set(0, 5 ,0) + camera1.lookAt(0, -0, -0) + camera1.updateProjectionMatrix(); + const cameraHelper = new THREE.CameraHelper(camera1) + // 辅助线加入 场景 + scene.add(cameraHelper) + } - // document.body.appendChild(player.dom); function initModel() { var loader = new THREE.FileLoader(); diff --git a/lndextest.html b/lndextest.html new file mode 100644 index 0000000..17af63f --- /dev/null +++ b/lndextest.html @@ -0,0 +1,778 @@ + + + + + + + + + + + + + + + + + + + +
2D数据表格显示 不旋转 厌氧系统
+ + + + + + + + + + diff --git a/pipeline.html b/pipeline.html new file mode 100644 index 0000000..561fe18 --- /dev/null +++ b/pipeline.html @@ -0,0 +1,186 @@ + + + + + + eg18-2: Three.js 旋转的盒子(重构)--加入阴影 + + + + + + +
+ + + diff --git a/temp copy.html b/temp copy.html deleted file mode 100644 index a7b880b..0000000 --- a/temp copy.html +++ /dev/null @@ -1,622 +0,0 @@ - - - - - Threejs实现数字化工厂安全生产监控 - - - - - - - - - - - - - -
- - - -