From ddd87c767b67561f2f5f4160716e0f576dfe257c Mon Sep 17 00:00:00 2001 From: yinmb Date: Fri, 5 Feb 2021 18:16:35 +0800 Subject: [PATCH] add demo --- 20210129/README.md | 2 +- 20210129/demo/Readme.md | 11 ++++ 20210129/demo/index.html | 1 + 20210129/demo/js/loader.js | 89 ++++++++++++++++++++++++++++++ 20210129/demo/js/main.js | 39 ++++++++++++- 20210129/demo/res/reuse-demo.json | 0 20210129/demo/res/single-demo.json | 10 ++-- 7 files changed, 146 insertions(+), 6 deletions(-) create mode 100644 20210129/demo/Readme.md delete mode 100644 20210129/demo/res/reuse-demo.json diff --git a/20210129/README.md b/20210129/README.md index 60297b1..fb1ccfc 100644 --- a/20210129/README.md +++ b/20210129/README.md @@ -17,4 +17,4 @@ ![数据结构1](./doc/数据结构1.png) ## 打卡 - +尹莫波-demo文件夹 diff --git a/20210129/demo/Readme.md b/20210129/demo/Readme.md new file mode 100644 index 0000000..55e0ae4 --- /dev/null +++ b/20210129/demo/Readme.md @@ -0,0 +1,11 @@ +#食用方法 +================================ +1、安装wamp程序，下载地址： +https://www.wampserver.com/ +2、拷贝demo文件夹到wamp程序安装目录文件夹内的www下，例如： +H:\wamp64\www\demo +3、将自己的作业放置于demo/res/文件夹下，single-demo.json是标准的文件，大家自己的作业用自己的名字缩写命名。 +4、修改demo/js/main.js下的20行，将single-demo.json修改为各自的json文件，即可在浏览器中间浏览。 +5、运行wamp程序，浏览器输入网址： +http://localhost/demo/index.html + diff --git a/20210129/demo/index.html b/20210129/demo/index.html index 7d33809..6f7f95b 100644 --- a/20210129/demo/index.html +++ b/20210129/demo/index.html @@ -10,6 +10,7 @@ + diff --git a/20210129/demo/js/loader.js b/20210129/demo/js/loader.js index e69de29..b5a4fd0 100644 --- a/20210129/demo/js/loader.js +++ b/20210129/demo/js/loader.js @@ -0,0 +1,89 @@ +BIMLoader = function(json) +{ + // 解析材质 + var materials = new Array(); + json.materials.forEach(element => { + var material = ParseMaterial(element); + materials.push(material); + }); + + // 解析网格 + var meshes = new Array(); + json.meshes.forEach(element => { + var geometry = ParseGeometry(element); + var material = materials[element.material]; + var mesh = new THREE.Mesh(geometry, material); + meshes.push(mesh); + }); + + // 解析物体 + var scene = new THREE.Scene(); + + json.instances.forEach(element => { + var object = ParseInstance(element, meshes[element.mesh]); + scene.add(object); + }); + + return scene; + + function ParseMaterial(materialJson) + { + var material = new THREE.MeshPhongMaterial(); + + if(materialJson.color) + material.color.setStyle(materialJson.color); + + if(materialJson.transparent) + { + material.transparent = true; + material.opacity = materialJson.transparent; + } + + return material; + } + + function ParseGeometry(geometryJson) + { + var geometry = new THREE.BufferGeometry(); + + geometry.setAttribute('position', new THREE.BufferAttribute(new Float32Array(geometryJson.vertices), 3)); + + geometry.setIndex(new THREE.BufferAttribute(new Uint32Array(geometryJson.indices), 1)); + + geometry.setAttribute('normal', new THREE.BufferAttribute(new Float32Array(geometryJson.normals), 3)); + + return geometry; + } + + function ParseInstance(instanceJson, mesh) + { + var obj = new THREE.Object3D(); + + if(instanceJson.id) + obj.name = instanceJson.id; + + if(instanceJson.transform) + { + var matrix4 = new THREE.Matrix4(); + matrix4.fromArray(instanceJson.transform); + obj.matrixAutoUpdate = false; + obj.matrix.copy(matrix4); + obj.matrixWorldNeedsUpdate = true; + } + + if(instanceJson.visible) + obj.visible = instanceJson.visible; + + if(instanceJson.info) + obj.userData = instanceJson.info; + + // 边框 + var edges = new THREE.EdgesGeometry(mesh.geometry); + var line = new THREE.LineSegments(edges, new THREE.LineBasicMaterial({color: 0xff0000})); + + obj.add(mesh); + obj.add(line); + + return obj; + } +} \ No newline at end of file diff --git a/20210129/demo/js/main.js b/20210129/demo/js/main.js index 857d840..d6e0e2a 100644 --- a/20210129/demo/js/main.js +++ b/20210129/demo/js/main.js @@ -1,11 +1,48 @@ // 场景、相机、光源定义定义 var scene = new THREE.Scene(); var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000000); +camera.up.set(0,0,1); var light = new THREE.AmbientLight(0xffffff); scene.add(light); // 渲染器定义 -var renderer = new THREE.WebGLRenderer(); +var canvas = document.createElement( 'canvas' ); +canvas.id = 'model'; +var context = canvas.getContext( 'webgl2', {antialias: true, preserveDrawingBuffer: true}); +var renderer = new THREE.WebGLRenderer({canvas: canvas, context: context, logarithmicDepthBuffer: true}); renderer.setSize(window.innerWidth, window.innerHeight); renderer.setClearColor(0xffffff); document.body.appendChild(renderer.domElement); + +// 加载模型数据 +const loader = new THREE.FileLoader(); +loader.load( + '/demo/res/single-demo.json', + function(data) + { + var bimScene = BIMLoader(JSON.parse(data)); + var box = new THREE.Box3(); + box.expandByObject(bimScene); + box.expandByScalar(10000); + var cameraPos = new THREE.Vector3(box.min.x, box.min.y, box.max.z); + camera.position.copy(cameraPos); + camera.lookAt(box.getCenter()); + camera.updateMatrixWorld(); + scene.add(bimScene); + }, + function(xhr) + { + console.log((xhr.loaded / xhr.total * 100) + '% loaded'); + }, + function(err) + { + console.error('An error happened'); + } +) + +function animate() { + requestAnimationFrame( animate ); + renderer.render( scene, camera ); +} + + animate(); \ No newline at end of file diff --git a/20210129/demo/res/reuse-demo.json b/20210129/demo/res/reuse-demo.json deleted file mode 100644 index e69de29..0000000 diff --git a/20210129/demo/res/single-demo.json b/20210129/demo/res/single-demo.json index b35a661..8e1ca19 100644 --- a/20210129/demo/res/single-demo.json +++ b/20210129/demo/res/single-demo.json @@ -1,3 +1,4 @@ +{ "instances": [ { "id": "9039f77e-df87-4486-95c9-19715b85147d-00048b0b-caebf3df-1569-4ae2-93b2-149ceec97be9-00000019", @@ -59,7 +60,7 @@ } } ], -"mesh": [ +"meshes": [ { "vertices":[ -8921.5, @@ -250,9 +251,10 @@ "material": 0 } ], -"material": [ +"materials": [ { - "color": "x", + "color": "#808080", "transparent": 1.0 } -] \ No newline at end of file +] +} \ No newline at end of file