CN115080890B - Method for displaying and operating lightweight model on browser based on GLTF - Google Patents

Abstract

The invention relates to a method for displaying and operating a GLTF-based lightweight model in a browser, relates to the field of displaying of three-dimensional models in browsers, and particularly relates to a method for displaying GLTF-format models in browsers such as Chrome and Firefox. Through the rapid conversion scheme from the three-dimensional model to the GLTF, the user can directly display and view the model in the GLTF format on the page, the model nodes can be expanded, and the operations of measurement, marking, sectioning, explosion, rotation, translation, amplification, reduction, resetting, reloading and the like on the model are supported, so that the user does not need to open an MCAD tool to view the three-dimensional model under some conditions, and the display efficiency of viewing the model is greatly improved.

Description

Method for displaying and operating lightweight model on browser based on GLTF

Technical Field

The invention relates to a method for displaying and operating a GLTF-based lightweight model in a browser, and belongs to the technical field of analysis of GLTF data formats.

Background

The GLTF format is constructed based on the JSON format, the format describes a 3D scene and comprises a scene graph scene describing the 3D scene, wherein independent 3D objects in the scene are defined in the form of mesh triangle patches, in addition, material information used by the 3D objects is defined in GLTF, texture nodes are used for defining sampler objects and image picture objects, and the processor is an abstract data source for accessing any data.

Disclosure of Invention

In order to solve the technical problems, the invention provides a method for displaying and operating a lightweight model based on GLTF in a browser, which has the following specific technical scheme:

a method for displaying and operating a GLTF-based lightweight model in a browser comprises the following steps:

step 1: selecting a file or a compressed file, judging the model format of the file or the compressed file, popping up an error prompt when the selected file or the compressed file does not contain a file with a suffix name GLTF, and loading and displaying the selected model on a browser page when the selected file or the compressed file contains the file with the suffix name GLTF;

step 2: analyzing the selected file or the compressed file, if the loaded file is a compressed packet, firstly decompressing, converting the obtained file into blob format data, respectively initializing GLTFLoader, DRACOLoader and KTX2Loader, loading the blob format data by a load method of the Loader, and obtaining and displaying Scene information of the model;

extracting a data structure of the displayed model to obtain a tree structure node of the model, so that the model structure tree is displayed, the folding structure tree can be unfolded, and the node is searched and positioned;

and step 3: measuring the model according to the position of the model, wherein the measuring operation comprises point-to-point distance, point-to-straight line distance and point-to-plane distance, and displaying the distance on a page according to a measuring result;

the point measurement picks up the startPoint and endPoint information of two points of the model in sequence according to the mouse click and obtains the three-dimensional coordinate Vector information of the picked points, calculates the distance between the two points by a distanceTo method, and creates a Label to be displayed on a page;

the point-to-straight line measurement respectively picks up the first startPoint of the model according to mouse click, when a straight line is picked up, the picked-up line is firstly judged and displayed, the line frame of the line segment is hidden, the projection point from the startPoint to the line is obtained, the distance from the point to the projection on the straight line is calculated through distanceTo, and a Label is created and displayed on a page;

the point-to-plane measurement respectively picks up the first startPoint of the model according to mouse click, when a straight line is picked up, firstly, the picked-up plane is judged and displayed, a default plane wire frame is hidden, a projection point from the startPoint to the plane is obtained, the distance from the point to the projection point on the straight line is calculated through distanceTo, and a Label is created and displayed on a page;

and 4, step 4: the model can be directly marked on the page, including text marking, serial number marking and part number marking, and marked contents can be modified, deleted and stored;

clicking a page model, picking up a clicked point in the model according to a depth algorithm, taking the picked point as a starting point to create a lead, creating a text at an end point, initializing the text by adopting a THEE. When the textbox is edited, firstly acquiring a Sprite object of the textbox, acquiring a value of the Sprite object, and modifying the value; deleting the created text component by a Sprite object remove method when the text box is deleted;

and 5: the page can cut the model in six directions, supports reverse cutting and simultaneously cuts in multiple directions;

calculating and drawing a maximum envelope box3 of an outer frame according to the size of the model, calculating the center of the envelope, dragging one face of the rectangular envelope to move opposite according to a vector, hiding the model through calculation at the moved position, and supporting simultaneous dragging of multiple faces to cut the model;

and 6: according to the view of the model in the CAD, six views of the lightweight model can be directly displayed on a browser page, wherein the six views comprise a front view, a left view, a right view, a rear view, a top view and a bottom view;

the position of the camera is changed through the center point of the scene and the center point of the model to achieve the effect of displaying different views of the model, and the position of the camera is set as follows if the front view is formed:

$mv.camera.position.set(center.x - $mv.model.position.x, center.y - $mv.model.position.y, center.z - $mv.model.position.z + size * scale * distance)；

and 7: respectively displaying the attribute information and PMI marking information of the model in the PLM on a browser page;

and acquiring the position of the PMI marking information on the model as the starting point of the marking information as the position through the JSON file, creating an SVG picture document by the marking text through related information in the JSON, and loading the SVG picture through the SVG loader to display the marking information on the page.

Furthermore, in the viewing process, if other models need to be viewed, other models can be directly loaded on the page and displayed again.

Furthermore, the GLTF model comprises five types of files of GLTF, bin, jpg, png and json, when the GLtf suffix file is selected during starting, the bin, jpg, png and json files are automatically loaded.

Furthermore, the nodes can be searched in the browser according to names, the nodes can interact with the models, the corresponding models can be highlighted when the nodes are selected, and the corresponding structure tree nodes are highlighted when the models are selected.

Furthermore, the browser interface is provided with a measuring button, a marking button, an explosion button, a cutting button, a view button and an attribute button,

by means of the measurement button, step 3 is performed,

by labeling the buttons, the process proceeds to step 4,

by cutting the button, step 5 is performed,

by means of the view button, a step 6 is performed,

the explosion button is used for carrying out explosion and recovery operation on the model,

and viewing the attribute information of the currently loaded model through an attribute button.

Further, the center can be reloaded or restored by reloading the recoverable button model.

The invention has the beneficial effects that:

the method can check and display the three-dimensional model on the browser without installing a plug-in, greatly reduces the checking cost of the model, greatly improves the speed of loading the model, can perform partial operation on the model, can be applied to various fields of model approval, transparent factories and the like, and greatly improves the working efficiency.

Drawings

FIG. 1 is a schematic view of the data display process of the lightweight model of the present invention,

figure 2 is an example of a lightweight model display page of the present invention,

fig. 3 is the general functional architecture of the present invention.

Detailed Description

The present invention will now be described in further detail with reference to the accompanying drawings. These drawings are simplified schematic views illustrating only the basic structure of the present invention in a schematic manner, and thus show only the constitution related to the present invention.

As shown in fig. 1, the method for displaying the GLTF-based lightweight model in a browser according to the present invention includes the following steps:

step 1: and inputting the URL to enter a model display page, and displaying the default loading model.

Step 2: clicking a model loading button, selecting a GLTF model (popping up error report information if the selected file is not in a GLTF format), transmitting a parameter path of a model path, and calling a model loading method.

load model program code:

$mv.loader.load(url, gltf => {

const scene = gltf.scene || gltf.scenes[0];

if (scene.children.length<= 0) {

v/model is null, page sends prompt

document.getElementById('NoModel').click();

}

let box3 = new THREE.Box3().expandByObject(scene);

let center = box3.getCenter(new THREE.Vector3());

$mv.model = scene;

$mv.inSideModel = scene;

// unified processing model load subsequent handlers

traverseModel($mv);

$mv.scene.add($mv.model);

// centerModel($mv);

setCameraPosition($mv);

// rotational model

// $mv.Rotation.start();

$mv.isModelLoaded = true;

loading && loading['rendered'] && loading['rendered']();

if (!loading || (loading &&enableLoading)) {

Vue.hideLoading();

}

});

And step 3: and clicking a left structure tree button, analyzing json information of nodes of the model structure tree, and displaying.

Analyzing the model structure tree program code:

let setTree = {

traverse: function (node) {

if (node.type === 'Group' || node.type === "Object3D") {

let icon = '';

if (node.type === 'Object3D') {

icon = '1';

} else if (node.type === 'Group') {

icon = '2';

}

let parentUUID = '';

if (node.parent) {

parentUUID = node.parent.uuid;

}

let newNode = {

uuid: node.uuid,

name: node.userData.name,

icon,

parent: {

uuid: parentUUID,

},

visible: true,

children: [],

};

$mv.treeDefaultChecked.push(newNode.uuid);

$mv.listNode[node.uuid] = node;

if (node.parent) {

if (dictObject3D[node.parent.uuid]) {

dictObject3D[node.parent.uuid].children.push(newNode);

}

}

dictObject3D[newNode.uuid] = newNode;

$mv.LineSegmentsArray[node.uuid] = [];

if ($mv.Object3DArray === null) {

$mv.Object3DArray = newNode;

}

} else if (node.type === 'LineSegments') {

this.setLineSegmentsToParentNode(node.parent.parent.uuid, node);

}

}

}

as shown in fig. 2, the method for operating the GLTF-based lightweight model in the browser according to the present invention includes the following steps:

step 1: and clicking a measurement button to perform relevant measurement on the model.

Measuring a core code:

let sphere = createdPoint(intersects[0].point);

pointsArray.push(sphere);

Group.add(sphere);

if (pointsArray.length>= 2) {

let positions = [pointsArray[0].position.x,pointsArray[0].position.y,pointsArray[0].position.z, pointsArray[1].position.x,pointsArray[1].position.y,pointsArray[1].position.z];

let line = createdLineSegments(pointsArray[0].position, pointsArray[1].position, 'helperLine');

conststartPoint = new THREE.Vector3().copy(pointsArray[0].position);

constendPoint = new THREE.Vector3().copy(pointsArray[1].position);

let distance = startPoint.distanceTo(endPoint);

Group.add(line);

let x = (startPoint.x + endPoint.x) / 2;

let y = (startPoint.y + endPoint.y) / 2;

let z = (startPoint.z + endPoint.z) / 2;

let textContent = `${(distance * 1000).toFixed(2)}mm`;

let Label = createdLabel([x, y, z], textContent);

Group.add(Label);

pointsArray = [];

}

step 2: and clicking a labeling button to perform related labeling operation on the model.

Marking a core code:

let sprite = new THREE.Sprite(spriteMaterial);

sprite.text = text;

console.log(text);

sprite.group = group;

sprite.startPos = startPos;

sprite.endPos = endPos;

sprite.line = line;

$mv.sprites.push(sprite);

sprite.scale.set(0, 0, 0);

console.log(line.type);

add (line);/add(s); add(s)

Position copy (endPos);/the position where the sprite is set

sprite.NumberSig = NumberSig;

sprite.modelSig = modelSig;

sprite.dot = dot;

sprite.renderOrder = $mv.sprites.length;

sprite.user = user;

sprite.date = date;

sprite.visible = editable false : true;

if (id) sprite.groupID = id;

group.add(sprite);

And step 3: and clicking an explosion button to perform explosion and reduction operations on the model.

Explosion core code:

function expandModel(nodes, deep) {

deepCount++;

let children = [];

nodes.forEach(node => {

if ('Group' === node.type || 'Object3D' === node.type) {

modelChildren.push(node);

if (node.position.x === 0 &&

node.position.y === 0 &&

node.position.z === 0) {

zeroObject3D.push(node);

}

modelChildrenSrcPosition.push(node.position.clone());

modelChildrenCenterPosition.push(new THREE.Box3().expandByObject(node).getCenter(new THREE.Vector3()));

}

if (node.children&&node.children.length> 0) {

node.children.forEach(child => {

children.push(child);

});

}

});

if (children.length> 0) {

expandModel(children, deep);

}

}

and 4, step 4: and clicking a sectioning button to perform sectioning operation on the model.

Sectioning a core code:

initClipBox() {

const box3 = utils_getBox(this.obj, this.obj);

var center = new THREE.Vector3();

box3.getCenter(center);

var p = new THREE.Vector3(

this.obj.position.x,

this.obj.position.y,

this.obj.position.z

);

vardisVector = p.sub(center);

this.low = box3.min;

this.high = box3.max;

this.halfDisVector = new THREE.Vector3(

disVector.x / 2,

disVector.y / 2,

disVector.z / 2

);

this.low_init.copy(this.low);

this.high_init.copy(this.high);

this.group = new Group();

this.initPlanes();

this.initVertices();

this.initFaces();

this.faces.forEach((face) => {

face.material.transparent = true;

face.material.opacity = 0.3;

});

console.log(this.faces);

this.initLines();

this.scene.add(this.group);

}

and 5: and clicking a view button to display the view of the model.

View core code:

$mv.camera.position.set(center.x - $mv.model.position.x, center.y - $mv.model.position.y, center.z - $mv.model.position.z + size * scale * distance)。

in light of the foregoing description, it is believed that various alterations and modifications may be made by those skilled in the art without departing from the spirit and scope of the invention.

Claims (6)

1. A method for displaying and operating a lightweight model on a browser based on GLTF is characterized by comprising the following steps: the method comprises the following steps:

step 1: selecting a file or a compressed file, judging the model format of the file or the compressed file, popping up an error prompt when the selected file or the compressed file does not contain a file with a suffix name GLTF, and loading and displaying the selected model on a browser page when the selected file or the compressed file contains the file with the suffix name GLTF;

step 2: analyzing the selected file or the compressed file, if the loaded file is a compressed packet, decompressing, converting the obtained file into blob format data, respectively initializing GLTFLoader, DRACOLoader and KTX2Loader, loading the blob format data by a load method of the Loader, and obtaining and displaying Scene information of the model;

extracting a data structure of the displayed model to obtain a tree structure node of the model, so that the model structure tree is displayed, the folding structure tree can be unfolded, and the node is searched and positioned;

and step 3: measuring the model according to the position of the model, wherein the measuring operation comprises point-to-point distance, point-to-straight line distance and point-to-plane distance, and displaying the distance on a page according to a measuring result;

the point measurement picks up the startPoint and endPoint information of two points of the model in sequence according to the mouse click and obtains the three-dimensional coordinate Vector information of the picked points, calculates the distance between the two points by a distanceTo method, and creates a Label to be displayed on a page;

the point-to-straight line measurement respectively picks up the first startPoint of the model according to mouse click, when a straight line is picked up, the picked-up line is firstly judged and displayed, the line frame of the line segment is hidden, the projection point from the startPoint to the line is obtained, the distance from the point to the projection on the straight line is calculated through distanceTo, and a Label is created and displayed on a page;

the point-to-plane measurement respectively picks up the first startPoint of the model according to the click of a mouse, when a straight line is picked up, the picked-up plane is firstly judged and displayed, a default plane wire frame is hidden, a projection point from the startPoint to the plane is obtained, the distance from the point to the projection on the straight line is calculated through distanceTo, and a Label is created and displayed on a page;

and 4, step 4: the model can be directly marked on the page, including text marking, serial number marking and part number marking, and marked contents can be modified, deleted and stored;

clicking a page model, picking up a clicked point in the model according to a depth algorithm, taking the picked point as a starting point to create a lead, creating a text at an end point, initializing the text by adopting a THEE. When the text box is edited, the Sprite object of the text box is firstly obtained, the value of the Sprite object is obtained, and the value is modified; deleting the created text component by a Sprite object remove method when the text box is deleted;

and 5: the page can cut the model in six directions, supports reverse cutting and simultaneously cuts in multiple directions;

calculating and drawing a maximum envelope box3 of an outer frame according to the size of the model, calculating the center of the envelope, dragging one face of the rectangular envelope to move opposite according to a vector, hiding the model through calculation at the moved position, and supporting simultaneous dragging of multiple faces to cut the model;

step 6: according to the view of the model in the CAD, six views of the lightweight model can be directly displayed on a browser page, wherein the six views comprise a front view, a left view, a right view, a rear view, a top view and a bottom view;

through scene central point, and model central point, change the camera position, reach the different view effects of display model, set up the camera position during the elevation as follows:

$mv.camera.position.set(center.x - $mv.model.position.x, center.y - $mv.model.position.y, center.z - $mv.model.position.z + size * scale * distance)；

and 7: respectively displaying the attribute information and PMI marking information of the model in the PLM on a browser page;

the position of the PMI marking information on the model is obtained through the JSON file, namely the position of the starting point of the marking information is obtained, the marking text establishes an SVG picture document through related information in the JSON, and the SVG picture is loaded through the SVG loader, so that the marking information is displayed on the page.

2. The method for displaying and operating a GLTF-based lightweight model according to claim 1, wherein: in the viewing process, if other models need to be viewed, the other models can be directly loaded on the page and displayed again.

3. The method for displaying and operating a GLTF-based lightweight model according to claim 1, wherein: the light weight model of the GLTF comprises five types of files of GLTF, bin, jng, png and json, when the light weight model is started, a GLTF suffix file is selected, and the bin, the jng, the png and the json files are automatically loaded.

4. The method for displaying and operating a GLTF-based lightweight model according to claim 1, wherein: the nodes can be searched in the browser according to names, the nodes can interact with the models, the corresponding models can be highlighted when the nodes are selected, and the corresponding structure tree nodes are highlighted when the models are selected.

5. The method for displaying and operating a GLTF-based lightweight model according to claim 1, wherein: the browser interface is provided with a measuring button, a marking button, an explosion button, a sectioning button, a view button and an attribute button,

by means of the measurement button, step 3 is performed,

by labeling the buttons, the process proceeds to step 4,

by cutting the button, step 5 is performed,

by means of the view button, a step 6 is performed,

the explosion button is used for carrying out explosion and recovery operation on the model,

and viewing the attribute information of the currently loaded model through an attribute button.

6. The method for displaying and operating a GLTF-based lightweight model according to claim 1, wherein: the centering can be reloaded or restored by reloading the recoverable button model.

Images