Yinmb/ComputerGraphics
0
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

add demo

Browse Source
This commit is contained in:
yinmb 2021-02-05 18:16:35 +08:00
parent 99a103c574
commit ddd87c767b
7 changed files with 146 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
20210129/README.md
View File

@ -17,4 +17,4 @@
![数据结构1](./doc/数据结构1.png) ![数据结构1](./doc/数据结构1.png)
## 打卡 ## 打卡
尹莫波-demo文件夹

11
20210129/demo/Readme.md Normal file
View File

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

1
20210129/demo/index.html
View File

@ -10,6 +10,7 @@
</head> </head>
<body> <body>
<script src="lib/three.js"></script> <script src="lib/three.js"></script>
<script src="js/loader.js"></script>
<script src="js/main.js"></script> <script src="js/main.js"></script>
</body> </body>
</html> </html>

89
20210129/demo/js/loader.js
View File

@ -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;
}
}

39
20210129/demo/js/main.js
View File

@ -1,11 +1,48 @@
// 场景、相机、光源定义定义 // 场景、相机、光源定义定义
var scene = new THREE.Scene(); var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000000); 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); var light = new THREE.AmbientLight(0xffffff);
scene.add(light); 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.setSize(window.innerWidth, window.innerHeight);
renderer.setClearColor(0xffffff); renderer.setClearColor(0xffffff);
document.body.appendChild(renderer.domElement); 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();

0
20210129/demo/res/reuse-demo.json
View File

8
20210129/demo/res/single-demo.json
View File

@ -1,3 +1,4 @@
{
"instances": [ "instances": [
{ {
"id": "9039f77e-df87-4486-95c9-19715b85147d-00048b0b-caebf3df-1569-4ae2-93b2-149ceec97be9-00000019", "id": "9039f77e-df87-4486-95c9-19715b85147d-00048b0b-caebf3df-1569-4ae2-93b2-149ceec97be9-00000019",
@ -59,7 +60,7 @@
} }
} }
], ],
"mesh": [ "meshes": [
{ {
"vertices":[ "vertices":[
-8921.5, -8921.5,
@ -250,9 +251,10 @@
"material": 0 "material": 0
} }
], ],
"material": [ "materials": [
{ {
"color": "x", "color": "#808080",
"transparent": 1.0 "transparent": 1.0
} }
] ]
}