three.jsBIM可视化练习
实现效果：
源代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My first three.js app</title>
<!--head中添加script的引⽤库js⽂件-->
<script type="text/javascript" charset="utf-8" src="js\three.js"></script>
<script type="text/javascript" charset="utf-8" src="js\stats.js"></script>
<script type="text/javascript" charset="utf-8" src="js\dat.gui.js"></script>
<script type="text/javascript" charset="utf-8" src="js\OrbitControls.js"></script>
<script type="text/javascript" charset="utf-8" src="js\jquery-3.4.1.min.js"></script>
<script type="text/javascript" charset="utf-8" src="lor_exchange.js"></script>
</head>
<body>
<div>
<input type="file" id="files" onchange="fileImport();">
</div>
<!--body中添加主要编译运⾏的scirpt代码-->
<script type="text/javascript">
//全局变量
var camera;
var scene;
var renderer;
var jsonSource;
//【主函数】定义函数
function init() {
//【】初始化帧数统计
var stats = initStats();
//【1】要素-场景、相机、渲染器、轴
//场景
scene = new THREE.Scene();
//相机
camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 2000000);//创建⼀个透视相机可视⾓度45度浏览器的全屏的宽⾼⽔平 camera.position.z = 550;//相机的位置z正半轴250
camera.position.z = 550;//相机的位置z正半轴250
//渲染器
renderer = new THREE.WebGLRenderer({ antialias: true, logarithmicDepthBuffer: true });//打开抗锯齿，使⽤ logarithmicDepthBuffer 缓冲
renderer.setClearColor(new THREE.Color("rgb(230, 255, 255)"), 1);//背景
renderer.setPixelRatio(window.devicePixelRatio);//根据设备设置像素⽐，避免HiDPI设备上绘图模糊
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.shadowMapEnabled = true;//打开阴影渲染
renderer.sortObjects = true;//定义渲染器是否应对对象进⾏排序默认是true.false：物体的渲染顺序将会由他们添加到场景中的顺序所决定，适合⼤部分场景。
var ambientLight = new THREE.AmbientLight(0x0c0c0c);
scene.add(ambientLight);
//【】输出
//相机点位
camera.position.set(-3000, 4000, 3000);
camera.lookAt(scene.position);
//添加渲染输出到HTML元素
document.body.appendChild(renderer.domElement);
//【】相机控制
//1.轨道控制器
var clock = new THREE.Clock();
var orbitControls = new THREE.OrbitControls(camera, renderer.domElement);
orbitControls.minDistance = 0.1; //设置滚轮最近
sort函数 js
orbitControls.maxDistance = 10000000; //设置滚轮最远
orbitControls.autoRotate = false;//⾃动旋转
//【】GUI交互控制
var controls = new function () {
this.导⼊⽂件 = function () { $("#files").click() };//点击导⼊按钮，使files触发点击事件，然后完成读取⽂件的操作
this.开始漫游 = function () { };
this.跳起⾼度 = 200;
this.MoveSpeed = 500;
this.⽆障碍 = true;
this.结束漫游 = function () { };
this.使⽤说明 = function () { alert("使⽤说明"); };
};
//可视化界⾯GUI对象，添加控制对象的速度属性
var gui = new dat.GUI();
gui.add(controls, '使⽤说明');
gui.add(controls, '导⼊⽂件');
var folder = gui.addFolder('漫游');
folder.add(controls, '开始漫游');
folder.add(controls, '结束漫游');
folder.add(controls, '跳起⾼度', 0, 500);
folder.add(controls, 'MoveSpeed', 0, 1000);
folder.add(controls, '⽆障碍');
renderScene();
//【函数】引⼊requestAnimationFrame()⽅法，让场景动起来
function renderScene() {
//帧数显⽰刷新
stats.update();
//相机控制刷新
//trackballControls.Delta());
orbitControls.update();
requestAnimationFrame(renderScene);//动画循环渲染起来
}
}
//【函数】导⼊⽂件
function fileImport() {
//获取读取我⽂件的File对象
var selectedFile = ElementById('files').files[0];
var name = selectedFile.name; //读取选中⽂件的⽂件名
var name = selectedFile.name; //读取选中⽂件的⽂件名
var size = selectedFile.size; //读取选中⽂件的⼤⼩
console.log("⽂件名:" + name + "⼤⼩:" + size);
var reader = new FileReader(); //这是核⼼，读取操作就是由它完成.
//当读取完成后回调这个函数，然后此时⽂件的内容存储到了result中，直接操作即可
jsonSource = sult;
var strJson = JSON.parse(jsonSource);//对象
for (let i = 0; i < Object.keys(strJson).length; i++) {
if (Object.keys(strJson)[i] == "models") {
var obj = strJson[Object.keys(strJson)[i]];//数组
for (var j = 0; j < obj.length; j++) {
var geometrys = obj[j].geometrys;
for (var k = 0; k < geometrys.length; k++) {
var vertex = geometrys[k].vertex.split("|");
var face = geometrys[k].face.split("|");
//geometry
var geometry = new THREE.Geometry();
for (m = 0; m < vertex.length; m++) {
var ss = vertex[m].split(",");
geometry.vertices.push(new THREE.Vector3(parseFloat(ss[0]), parseFloat(ss[1]), parseFloat(ss[2])));
};
for (m = 0; m < face.length; m++) {
var ss = face[m].split(",");
geometry.faces.push(new THREE.Face3(parseInt(ss[0]), parseInt(ss[1]), parseInt(ss[2])));
};
//color
var Reds = parseInt(geometrys[k].d);
var Greens = parseInt(geometrys[k].);
var Blues = parseInt(geometrys[k].RGB.blue);
var RGBs = "RGB(" + Reds + "," + Greens + "," + Blues + ")";
var RGBss = lorHex();
//opacity
var transparencys = parseFloat((100 - geometrys[k].transparency) / 100);
//transparent
var trans = false;
if (transparencys != 0) { trans = true };
//material
var material = new THREE.MeshBasicMaterial({ color: RGBss, opacity: transparencys, transparent: trans, depthTest: true, depthWrite: true }); //Edges边线
var cubeEdges = new THREE.EdgesGeometry(geometry, 85);
var edgesMtl = new THREE.LineBasicMaterial({ color: 000000 });
var cubeLine = new THREE.LineSegments(cubeEdges, edgesMtl);
//mesh
var mesh = new THREE.Mesh(geometry, material);
mesh.add(cubeLine);
scene.add(mesh);
}
}
}
};
}
}
//【函数】初始化帧数统计模块
function initStats() {
var stats = new Stats();
stats.setMode(0); // 0: fps, 1: mss
stats.setMode(0); // 0: fps, 1: mss
// Align top-left
stats.domElement.style.position = 'absolute';
stats.domElement.style.left = '0px';
stats.p = '0px';
document.body.appendChild(stats.domElement);
return stats;
}
//【函数】监听函数
function onRisize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();//更新项⽬整体坐标
renderer.setSize(window.innerWidth, window.innerHeight);//将输出canvas的⼤⼩调整为(width, height)并考虑设备像素⽐ }
//调⽤主函数
//监听事件
window.addEventListener('resize', onRisize, false);
</script>
</body>
</html>
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论