HT for Web OBJ Manual

Index

Overview

The HT for 3D Web predefined a variety of 3D models and can building more styling models by API describes in Modeling Manual, HT also provides import the 3D model format files feature of OBJ.

Importing OBJ format functionality requires the introduction of ht-obj.js plug-in expansion pack, most examples of this manual are due to the need to read OBJ files, the browser has cross-domain security restrictions, so you need to publish through the Web way to read this manual, or modify the browser parameters, such as for Chrome browser can adding --allow-file-access-from-files startup parameters.

OBJ Format

OBJ is a 3D model file format, almost all the mainstream 3D modeling tools, such as Blender, 3ds Max and Maya support OBJ format export.

OBJ files are generally with .obj suffix name, describes the model vertex, plane and tile coordinates and other geometric models related information, and the model of the tile and color materials such as information, then by another MTL material file to descript, generally with '.mtl ' suffix name.

The OBJ file sample fragment as follows, v represents the vertex information, f represents the surface information, usemtl represents the material3 material information described by the external MTL file in the following description model:

v 1.187283 0.016532 0.652852
v 1.187283 0.001827 1.045301
v 1.187283 0.155480 0.618752
v 1.187283 0.106104 1.046487
v 1.187283 0.330175 0.640612
v 1.187283 0.209969 1.085557
v 1.186590 1.499776 1.191882
usemtl material3
f 9918 9919 9920 9921
f 9919 9922 9923 9920
f 9922 9924 9925 9923
f 9924 9926 9927 9925
f 9926 9928 9929 9927
f 9928 9930 9931 9929

The MTL file sample fragment follows, the material material3 transparency d is 0.5, kd represents diffuse color for [0.58 0.58 0.58], and the tiling path is /smokeAlarm.jpg

newmtl material3
    d 0.5
    Kd 0.58 0.58 0.588
    map_Kd /SmokeAlarm.jpg

Parse OBJ

ht.Default.parseObj(objText, mtlText, params) function is used to parse obj and MTL files, which are parsed back to the map structure, in json object, each material name corresponds to a model information, and the model information format is the HT custom model format standard describes in Modeling Manual.

The param parameter is described as follows:

The MTL format has many parameters, currently HT only supports d, kd and map_kd, which represent the three parameters of transparency, color and tile, and the format criteria for OBJ and MTL refer to here. 

map_Kd -o 0.1000 0.1200 0.0000 -s 45.0000 20.0000 0.0000 project/images/floor.jpg

As shown in the tiling parameter map_Kd, where -o corresponds to uv.offset tile-migration parameters; -s is equivalent to uv.scale tiling multiple parameters. For -o and -s, these two properties HT only read the first two parameters, ignoring the third parameter. The picture path automatically increases the prefix for the prefix parameter, and if the picture is the relative path, it is relative to the final run html page and can also be set to the picture name registered in ht.Default.setImage(name, ...)

If the ignoreNormal set to true ignores normal vectors, or the exported OBJ file does not contain normal vector information, HT automatically constructs the corresponding ns normal vector information, but for special surface effects, or smooth interface rendering with fewer vertices, you often need to specify the normal vector for each vertex, and you can refer to Phong Shading for comprehension, overview examples chapter, it is found that the model surface of ignoreNormal set to true is more abrupt and angular than that of normal vector model smoothing.

The geometric transformation order of the model is: mat -> s3 -> r3 -> t3 -> center -> cube. General settings s3, r3 and t3 can meet most of the requirements, but the need for more complex matrix transformations, can constructs the mat matrix parameter through ht.Default.createMatrix, and the case of the mat parameter is often used in the case where the shape of the model needs to be bound to the data model value:

modelMap.pointer.mat = {
    func: function (data){
        var start = Math.PI * 0.736,
            range = Math.PI * 1.46,   
            angle = start - range * data.a('value') / 100;
        return ht.Default.createMatrix([
            { t3: [0, -75, 0] },
            { r3: [Math.PI/4, 0, 0] },
            { r3: [0, 0, angle] },
            { r3: [-Math.PI/4, 0, 0] },
            { t3: [0, 75, 0]  }
        ]);
    }
};

The above code means the pointer table pointer model, first through t3: [0, 75, 0] moves down 75 along the y axis, making the pointer rotate point at the origin of the coordinate, then r3: [Math.PI/4, 0, 0] rotate along x axis radian of the Math.PI/4, which makes the pointer stand upright on the xy plane, then proceed r3: [0, 0, angle] the angle of rotation of the angle value along the z axis, and finally through r3: [-math.PI/4, 0, 0] and t3: [0, 75, 0] rotate and move the pointer back to the original position, thus implementing data binding for the pointer rotation angle and data.a('meter.value').

Through ht.Default.parseObj parsed json object with map structure, each material name corresponds to a model information, and if the cube parameter is true, then each model information returned will have a rawS3 special parameter, and the incoming param parameter also increases the rawS3 attribute information, which is the maximum size range for all model combinations before unit cubism, so the rawS3 value in each model is the same.

Import Model

To bind an OBJ parsed model information to an data, you need to call the Modeling Manual Model Registration section describes the ht.Default.setShape3dModel(name, model) function is registered, and then the data sets the style shape3d property to the registered name.

The above example constructs two motorcycle models, they all read to the same OBJ file information, the name is Separate Scooter motorcycle, is has by a bunch of Node, each other host adsorption to a ring, when the user drags the rotation operation feels like a whole, in this way each part can be independently selected, dyed and hidden operations.

If you need correspond to only a Node data in the entire motorcycle model, you can use the example labeled One Node way in the motorcycle, all materials corresponding to the model into an array arrays, registered through ht.Default.setShape3dModel('scooter', array) so that the model of scooter name will have the full OBJ model information, see the model combination of the chapter of Modeling Manual.

for(var name in modelMap){                    
    var model = modelMap[name];   
    var shape3d = 'scooter:' + name;

    ht.Default.setShape3dModel(shape3d, model);
    array.push(model);                    

    var node = new ht.Node();
    node.s({
        'shape3d': shape3d
    });                                                               
    node.setHost(lastNode);
    ...
}

ht.Default.setShape3dModel('scooter', array);
var node = new ht.Node();
node.s('shape3d', 'scooter');

The s3 size parameter of Node affects the final rendering of the model, the final rendered model size will be multiplied by the size of the OBJ geometry model that corresponds to the s3 size of the Node, meaning if the rawS3 size of the OBJ model is imported [10, 20, 30], then if Node of s3 for [10, 5, 3], then finally renders in the size of the interface [10*10, 20*5, 30*3].

If the size of the model is not affected by the s3 of Node, you can set shape3d.scaleable to false and the value defaults to true. So if the model size is affected by s3, generally when the model imported, the cube parameter is set to true, the imported model is scaled to the [1, 1, 1] unit cube, and then the s3 parameter of the corresponding Node data is set to the rawS3 parameter of the parsed model, this parameter represents the size of the OBJ model before scaling to the unit cube.

Parse AJAX

The above example loads the OBJ file using the AJAX by building two XMLHttpRequest objects, acquiring obj and mtl files separately through AJAX, and parsing after the data onload.

load('obj/scooter.mtl', 'obj/scooter.obj');

function load(mtlUrl, objUrl){
    var xhr1 = new XMLHttpRequest();
    xhr1.onload = function (e){                
        var mtlText = e.target.responseText;
        var xhr2 = new XMLHttpRequest();
        xhr2.onload = function (e){
            var objText = e.target.responseText;
            parse(mtlText, objText);                                                                               
        };
        xhr2.open('GET', objUrl, true);
        xhr2.send(null);                     
    };                
    xhr1.open('GET', mtlUrl, true);
    xhr1.send(null);                                               
}

loadObj Function

The following example also implements the same functionality, but uses the ht.Default.loadObj more convenient function provide by HT.

ht.Default.loadObj(objUrl, mtlUrl, params):

Insert String

Serialization manual example to obtain the OBJ and MTL text content in a more specific way, the model information content stored in the function annotation, converts function to a string and then trims the back end to take the middle actual model content part, the traditional way of .obj and .mtl is stored on the service side, and the client uses AJAX to parse the contents of the file separately, using the method of intercepting the annotation string, avoids cross-domain security access restrictions, which can be run directly from the browser.

var scooter_mtl = getRawText(function (){/*

newmtl Black
Ns 190.196078
Ka 0.000000 0.000000 0.000000
Kd 0.000000 0.000000 0.000000
Ks 0.100000 0.100000 0.100000
Ni 1.000000
d 1.000000
illum 2
...

*/});

function getRawText(obj){
    var text = String(obj); 
    return text.substring(14, text.length-3);
}

Door and Window Application

Another application of the OBJ import model is with CSGNode, especially the construction of windows and doors, can be used CSGNode to knock out, set the shape3d property of the data style to OBJ to import the registered model, making the data appear as a more real OBJ windows and doors modeling effect.

Combine DoorWindow type to achieve open door and window effect, the following example shows the OBJ import model with CSGNode and DoorWindow two types of combined windows and doors application scenes:

Welcome to contact us service@hightopo.com