3D pressurer deserialization of Canvas in HTML5

In this article we will share with you the deserialization of the 3D pressurer of Canvas in HTML5. In practical applications, I think it is very convenient to be able to operate 3D scene changes by operating JSON files, especially in When the editor drags and drops graphics elements and produces a series of changes on the graphics elements, the data can be reflected to us very intuitively. Here we have simply made a basic example for your reference.

Practice scene reproduction:

First of all, let’s set up the scene of this example. Familiar friends may have already seen it. The scene is divided into three parts: left, upper right, and lower right. HT can easily split the scene through ht.widget.SplitView to achieve a good page layout. Finally, add this split component to the body of the html:

//场景搭建
dataModel = new ht.DataModel();//数据容器
                
g3d = new ht.graph3d.Graph3dView(dataModel);//3D 组件
propertyView = new ht.widget.PropertyView(dataModel);// 属性组件
formPane = new ht.widget.FormPane();//表单组件
rightSplit = new ht.widget.SplitView(propertyView, formPane, 'v', 100);//分割组件
                        
new ht.widget.SplitView(g3d, rightSplit, 'h', 0.65).addToDOM();

The next step is to add graphics elements to the scene , and add the primitive to the 3D scene. At this time, we can add various attributes, styles and labels to the primitive as marks. The primitive used in this example is a 3D model, and the ht.Default.parseObj function is used to Obj and mtl files are parsed:

//添加模型
var params = {center: true};//JSON格式控制参数 传入 ht.Default.parseObj 函数中
var modelMap = ht.Default.parseObj(meter_obj, meter_mtl, params);//解析obj和mtl文件， 解析后返回的map结构json对象中，每个材质名对应一个模型信息

Of course, the premise is that the two files meter_obj and meter_mtl have been declared. Here we put these two parts into the js file respectively and call them in the header.

We can see from the above animation that the only parts of the model that need to be changed in this example are the "pointer" and the "switch" below, so we obtain these two objs through traversal Part of the model and register the 3D model:

var array = [];
for(var name in modelMap){
    var model = modelMap[name];//modelMap 中的模型
    array.push(model);
                    
    if(name === 'pointer'){//obj 文件中的一个模型 名称为 pointer
        model.mat = {//矩阵变化参数，可对模型进行矩阵变化后导入 
            func: function(data){
                var start = Math.PI * 0.736,
                range = Math.PI * 1.49,   
                angle = start - range * data.a('meter.value') / 4;//动态获取了 meter.value 的值
                return ht.Default.createMatrix([//将一组JSON描述的缩放、移动和旋转等操作转换成对应的变化矩阵
                    { t3: [0, -82.5, 0] },
                    { r3: [0, 0, angle] },
                    { t3: [0, 82.5, 0]  }
                ]);
            }
        };                         
    }
    if(name === 'switch'){//obj 文件中的一个模型 名称为 switch
        model.mat = {
            func: function(data){
                return ht.Default.createMatrix([
                    { t3: [0, 48.5, 0] },
                    { r3: [0, 0, data.a('meter.angle')] },
                    { t3: [0, -48.5, 0]  }
                ]);
            }
        }; 
        model.color = {
            func: function(data){
                if(data.a('meter.angle')){
                    return 'rgb(186, 0, 0)';
                }else{
                    return 'black';
                }
            }
        };
    }
}
ht.Default.setShape3dModel('meter', array);//注册3D模型，请参考modeling建模手册 第一参数为模型名称，第二参数为 JSON 类型对象

Then the user can directly set the attribute shape3d where needed to use it as the name of the 3D model registered here. We will create 3 nodes below and assign the node Set this 3D model:

for(var i=0; i<3; i++){//创建3个节点 meter
    var node = new ht.Node();
    node.setTag(i);//设置 tag 标签
    node.setName('Meter - 00' + (i+1));//设置图元名称一般显示在图元的下方
    node.s({
        'label.color': 'white',
        'label.background': '#5271B8',
        'label.face': 'center',
        'label.position': 23,
        'label.scale': 2,
        'label.reverse.flip': true, 
                        
        'note.scale': 1.5,//设置字体大小，这种方式不会碰到浏览器最小字体的问题
        'note.t3': [-30, -5, -90], 
                        
        'note2.scale': 1.2,
        'note2.position': 17,
        'note2.t3': [0, -20, -30],
        'note2.color': 'black',
        'note2.background': 'yellow', 
                        
        'shape3d': 'meter',//设置为前面注册的 meter 3D 模型
        'shape3d.scaleable': false,
        'wf.visible': 'selected',//选中图元时显示线框
        'select.brightness': 1
    });
    node.a({//自定义属性 下面会利用这些自定义属性进行数据绑定
        'meter.value': i+1,
        'meter.angle': i * Math.PI / 3
    });
    node.p3(i*200-200, params.rawS3[1]/2, i===1?100:-100);                    
    node.r3(0, -Math.PI/6*(i-1), 0);
    node.s3(params.rawS3);//设置图元的大小为 rawS3 模型的原始尺寸
    dataModel.add(node); //向数据模型中添加节点           
}
dataModel.sm().ss(dataModel.getDataByTag(1));//设置默认选中 tag 标签为1的图元

We add two annotations to the nodes here as text prompts. You can overload getNote/getNote2 (one node in HT supports dual annotations, so note2 is provided as the second Note) The function overloads the naming method of note. Of course, other similar text prompts in HT can also change the display information of the text in this way. Here we obtain the two properties of meter.value and meter.angle through data binding. Dynamic data:

g3d.getNote = function(data){//重载 getNote 方法
    return 'Value:' + data.a('meter.value').toFixed(2);
};
g3d.getNote2 = function(data){
    var value = Math.round(data.a('meter.angle') / Math.PI * 180);//获取了 meter.angle 属性，数据实时变化                 
    return value ? 'Angle:' + value : 'Switch is off';
};

We also used a little care in the display part of the scene~by changing the values ​​​​of eye and center to achieve the effect of sight from far to near:

var oldEye = g3d.getEye().slice(0),
oldCenter = g3d.getCenter().slice(0),
newEye = [200, 300, 650],
newCenter = [0, params.rawS3[1]/2, 0];

ht.Default.startAnim({//动画              
    duration: 1000,//持续时间
    easing: function(t){ //动画缓动函数，默认采用 ht.Default.animEasing
        return (t *= 2) < 1 ? 0.5 * t * t : 0.5 * (1 - (--t) * (t - 2));                      
    },
    action: function(k){//action 函数必须提供，实现动画过程中的属性变化 参数 k 代表通过 easing(t) 函数运算后的值
        g3d.setEye(
            oldEye[0] + (newEye[0] - oldEye[0]) * k,
            oldEye[1] + (newEye[1] - oldEye[1]) * k,
            oldEye[2] + (newEye[2] - oldEye[2]) * k
        );
        g3d.setCenter(
            oldCenter[0] + (newCenter[0] - oldCenter[0]) * k,
            oldCenter[1] + (newCenter[1] - oldCenter[1]) * k,
            oldCenter[2] + (newCenter[2] - oldCenter[2]) * k
        );    
    }                  
});

The entire left side The implementation is complete ~ Next, it is time to implement the upper right part, the display and control of attribute values. We have added a total of four attributes: name, meter.value, meter.angle and rotation, and change the 3D value by operating the value in the attribute bar through data binding. For the display status and data binding in the model, we get the accessType and the value in name to coordinate the call to this attribute:

propertyView.addProperties([//用 json 的数组参数方式批量添加属性信息
    {
        name: 'name',//属性名 这里不用设置 accessType，因为 accessType 默认的值为 setName/getName 这种格式 
        editable: true//设置为可编辑状态
    },
    {
        name: 'meter.value',//用于存取name属性，该属性结合accessType属性最终实现对Data属性的存取
        accessType: 'attr',//通过 getAttr/setAttr 获取或设置属性值
        editable: true,
        slider: {
            min: 0,
            max: 4
        }
    },
    {
        name: 'meter.angle',
        accessType: 'attr',
        editable: true,
        formatValue: function(value){//一般用于将数字转换更易读的文本格式
            return Math.round(value / Math.PI * 180);
        },
        slider: {
            min: 0,
            max: Math.PI,
            step: Math.PI/180*5,//每移动一下滑动的步进
            getToolTip: function(){//设置鼠标放在图元上的文字提示
                return Math.round(this.getValue() / Math.PI * 180);
            }
        }
    },
    {
        name: 'rotation',
        editable: true,
        formatValue: function(value){
            return Math.round(value / Math.PI * 180);
        },
        slider: {
            min: -Math.PI,
            max: Math.PI,
            step: Math.PI/180*5,
            getToolTip: function(){
                return Math.round(this.getValue() / Math.PI * 180);
            }
        }
    }                    
]);

Finally, we parse the formPane form panel in the lower right part, and formPane adds it to the form through the addRow function. Add rows. There are two rows in this form. The first row has two parts:

formPane.addRow([//向表单组件中添加行
    {
        id: 'export',
        button: {//按钮                              
            label: 'Export JSON',
            onClicked: function(){//点击时触发的函数
                var json = dataModel.serialize();
                formPane.v('textArea', json);
            }
        }
    },
    {
        button: {                            
            label: 'Import JSON',
            onClicked: function(){
                dataModel.clear();//清空数据模型
                dataModel.deserialize(formPane.v('textArea'));//将获取到的 textArea 中的数据反序列化，是下面一行的 id 值
            }
        }
    }
],
[0.1, 0.1]);  //最后的参数是这行的宽度分配比例 小于1的值为比例，大于1为实际值                             
formPane.addRow([
    {
        id: 'textArea',
        textArea: {
        }
    }
],
[0.1], 0.1);

In this way, we can directly see the effect of our modifications in 3D by modifying the property bar or JSON file. ~How about it? Isn’t it cool and fast?

Related recommendations:

JavaScript canvas implements rotation animation

Based on HTML5 Canvas to implement subway station monitoring

html5 Canvas drawing method example of love

The above is the detailed content of 3D pressurer deserialization of Canvas in HTML5. For more information, please follow other related articles on the PHP Chinese website!