add demo
This commit is contained in:
parent
99a103c574
commit
ddd87c767b
@ -17,4 +17,4 @@
|
||||
|
||||
|
||||
## 打卡
|
||||
|
||||
尹莫波-demo文件夹
|
||||
|
||||
11
20210129/demo/Readme.md
Normal file
11
20210129/demo/Readme.md
Normal 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
|
||||
|
||||
@ -10,6 +10,7 @@
|
||||
</head>
|
||||
<body>
|
||||
<script src="lib/three.js"></script>
|
||||
<script src="js/loader.js"></script>
|
||||
<script src="js/main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
@ -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();
|
||||
@ -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
|
||||
}
|
||||
]
|
||||
]
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user