Click to add a 2D 3D cabinet Model Based on HTML5 Canvas

Click to add a 2D 3D cabinet Model Based on HTML5 Canvas

Today, return to digest our data container DataModel. Here is a typical data model event processing example for beginners as a reference. This example looks simple. In fact, it combines three very important event processing parts in the data model: property change event listening, selected change event listening, and data model change event listening.

To make this example current, I have made some changes to this simple example. I will explain it one by one below.

Example address: http://hightopo.com/guide/guide/core/datamodel/examples/example_datamodel.html

This is what I looked like after the transformation. I shared the dataModel data container and listened to the addition and deletion events of the Data container to get the current results. I also made some "Hands and feet" on the display ". Next we will analyze this example from the ground up. You will know why I have put forward this simple example.

First, we have to create a scenario as the basis. The entire scenario is divided into three parts: the top toolbar, the 2D part, and the 3D part. The top toolbar is written in HTML only:

AddRemoveClear

Because there are click events, we can directly click the button to display the plain text content in the span tag.

We know that all the components of HT are based on a root div. It is very easy to deploy this div on the html page, but HT sets an absolute position for this div, therefore, when we add this div to the HTML page, we also need to set the position in absolute positioning. I added a div to the page and added the HT part to this div:

DataModel = new ht. dataModel (); g3d = new ht. graph3d. graph3dView (dataModel); g3d. setGridVisible (true); // sets the g3d visible grid. setEye (185, 50,470); // set the 3d eye position g3d. setCenter (200, 47, 10); // sets the center position of 3d. These two attributes are designed to make users more comfortable to view 3d scenes, and more direct g2d = new ht. graph. graphView (dataModel); g2d. setEditable (true); // You can edit g2d in 2d format. fitContent (true); // display all elements on the page. splitView = new ht. widget. splitView (g2d, g3d, 'V', 0.3); // The split component is installed with the splitView in 2d and 3d scenarios. addToDOM (); // Add the split component to the body and set the absolute position myDiv = document. getElementById ('mydiv '); myDiv. appendChild (splitView. getView (); // Add the split component to myDiv

Then add the node to the dataModel data model. Here we are working on the cabinet of the data center. What we wanted to do was a server. We only have this resource on hand, and it doesn't matter. I encapsulated an added function, a delete function, and a Clear function, which correspond to the "Add", "Remove", and "Clear" functions on the toolbar respectively:

function addData() { var data = new ht.Node();    data.setPosition(index*60, 50);    data.setName('node'+index);    data.setSize(40, 40);    data.setImage('cabinet');    data.s({ 'image.stretch': 'centerUniform', 'shape3d': 'cabinet' });    index++;    dataModel.add(data); return data;} function removeData() { if(!dataModel.sm().ld()) return;    dataModel.remove(dataModel.sm().ld());} function clearDataModel(){    dataModel.clear();    index = 0;}

The "data. setImage ('Cabinet ') ", is through ht. default. the setImage ('Cabinet ', 'imageurl') method is defined. data is directly called. setImage ('imagename'). for more information, see image in the HT for Web Quick Start manual.

The 2D image display must be different from the 3D model display. in 2D, we can use textures directly. In HT 3D, obj-format model display is supported:

HT encapsulates the function ht for parsing obj format. default. the loadObj function is used to import models. This function has three parameters, the first and second are the obj file path and the mtl file path, and the third parameter is the json format control parameter, for details about the parameters, refer to the section on loadObj function in the HT for Web OBJ Manual (ps: using the obj model will cause cross-origin problems, which should be put on the server for running ):

Ht. default. loadObj ('obj/Cabinet component 1. obj ', 'obj/Cabinet component 1. mtl', {cube: true, // whether to scale the model to the size range of Unit 1. The default value is false center: true, // whether the model is centered prefix: 'obj/', // path prefix. If the path prefix is specified in the preceding parameter, you can set shape3d to 'Cabinet' if no prefix is specified, // specify the shape3d name finishFunc: function (modelMap, array, rawS3) {// call ht. default. the returned value after parseObj parsing. If loading or parsing fails, the returned value is null window. rawS3 = rawS3; // set the current model size to the original size if (modelMap) {cabinet1 = addData (); // Add two nodes to dataModel cabinet2 = addData ();}}});

Now, the nodes and models have been imported into the scene, and finally come to our focus today, the event interaction part. The ht. DataModel Data container manages the addition, deletion, and distribution of change events of Data. Here we manage these two events.

1. addDataModelChangeListener (function (e) {}, scope) adds an event listener for adding, deleting, and changing data models. It can be abbreviated as mm (func, scope) and func is the listener function, scope is the listener function field (Optional). The event in the listener function has two attributes: kind and data. kind is the event type:

• E. kind = 'add' indicates adding Data objects. e. data is the added object.
• E. kind = 'delete' indicates that the Data object is deleted, and e. data is the deleted object.
• E. kind = 'clear' indicates that the container is cleared.

Here we will pass the listening result of the model Addition/deletion event to the span with the id of model in HTML as the content:

Var model = document. getElementById ('model'); dataModel. addDataModelChangeListener (function (e) {if (e. kind = 'add') // if the event type is add, add a node model. innerHTML = e. data + 'added'; // Replace the content of the model with the added node added if (e. kind = 'delete') model. innerHTML = e. data + 'removed'; if (e. kind = 'clear') model. innerHTML = 'datamodel cleared '});

2. addDataPropertyChangeListener (function (e) {}, scope) adds the Data attribute change event listener in the model. It can be abbreviated as md (func, scope). event Events have four attributes:

• E. data indicates the object with attribute changes.
• E. property indicates the name of the changed property.
• E. newValue indicates the new value of the attribute.
• E. oldValue indicates the old attribute value.
• The Data object calls the firePropertyChange (property, oldValue, newValue) function to trigger the attribute change event:
  • Get/set type attribute, for example, setAge (98) trigger event e. property is age
  • Before the style attribute name, add "s": prefix to distinguish it. For example, if setStyle ('age', 98) triggers an event, e. property is "s: age ".
  • Attr type attribute names are differentiated by a prefix. For example, if setAttr ('age', 98) triggers an event, e. property is a: age.

Here we will pass the listening result of the Data attribute change event in the model to the span with the id as property in HTML as the content:

var model = document.getElementById('model');dataModel.addDataPropertyChangeListener(function(e) {    property.innerHTML = e.data + '\'s ' + e.property + ' has changed, the old value is ' + e.oldValue + ' and the new value is ' + e.newValue; });

3. Finally, we add listeners to the selected nodes to listen to selected change events. Ht. selectionModel manages the selection status of Data objects in the DataModel model. Each DataModel object has a built-in SelectionModel to control the selection status of all objects bound to the DataModel, this means that components that share the same DataModel have the selected linkage function by default.

If you want some components not to interact with other components, you can call view. setSelectionModelShared (false) to create an exclusive SelectionModel instance for this view.

There are two ways to obtain the SelectionModel:

• DataModel. getSelectionModel () gets the selected model shared by components in the Data container.
• View. getSelectionModel () obtains the selected model used by the current component. If selectionModelShared is set to false, a specific selection model for view is returned.

AddSelectionChangeListener (function (e) {}, scope) adds a listener that listens to selected change events, abbreviated as MS (func, scope ):

• E. datas contains all objects whose selected statuses have changed. previously selected objects are deselected or not selected.
• E. kind = 'set' indicates that this event is triggered by setSelection (datas ).
• E. kind = 'delete' indicates that this event is triggered by removeSelection (datas ).
• E. kind = 'append' indicates that this event is triggered by appendSelection (datas ).
• E. kind = 'clear' indicates that this event is triggered by clearSelection (datas ).

Here we will pass the listening result of the selected Data change event in the model to the span with the id as selection in HTML as the content:

Var selection = document. getElementById ('selection '); dataModel. sm (). addSelectionChangeListener (function (e) {if (dataModel. sm (). size () = 0) selection. innerHTML = 'nothing selected'; // if the "length" of the selected model is 0, else if (dataModel. sm (). size () = 1) selection. innerHTML = e. datas + 'selected'; else selection. innerHTML = dataModel. sm (). size () + 'datas selected ';});

All the above Code has been analyzed! You can create your own 3D model!