Categories
Uncategorized

To stray canvas with [(14)] Three.js concave relief model generation method of

table of Contents

    A Scheme 1: ThreeBSP.js or ThreeCSG.js extension library

    Two Scheme 2: Model plane stretched hollow

    Three program 3:. Cinema 4D model after model output file

Sample code is hosted: http: //www.github.com/dashnowords/blogs

Blog Garden Address: “Big History Live in the Big Front” Original Blog Catalogue

Huawei Cloud Community Address: [You want to upgrade the front end strange guide]

Relief model, simply effect is lettering on a plank is formed, if the partial word are removed off to obtain a concave relief model, if the portion other than the word weed out, to obtain a convex relief model. In this paper, several strategies in generating a concave relief model in a Web environment using the Three.js to explain.

A Scheme 1: ThreeBSP.js or ThreeCSG.js extension library

Among the many technology blog, the most mentioned is that these two libraries, they claim to be Three.js extension library for the model entity Boolean operations.

But! Do not use it! Do not use it! Do not use it!

View github repository can be found, both libraries as early as N years ago has stopped maintenance, absolutely is not guaranteed. And after I pro-test found that in addition to the examples provided by the official, they dug even the most basic cube can not do, according to the official wording of example only finally got the following model, and the author expectation was dug on the big cube a small cube groove, not to mention the font model.

Two Scheme 2: Model plane stretched hollow

Since the concave relief model complex is not expected to be achieved, can be implemented in a different idea, to generate a rectangle in a plane, which is then removed from the shape of the font, then the remaining last partially drawn into the geometry, of course, if desired when the relief model, and not completely through the stock model, also need to use an additional cube to fill the remaining part of the whole.

Loading the font file is asynchronous, when the loading is completed, the font object can be obtained, it is passed to the following function to generate a character size M 40, it is essentially a shape instance, it can be used as parameters to form a stretched mODEL:

All holes have a shape attribute instances, the name suggests it is used to perform an operation on Excavated closed plane figure, just meet production needs concave relief model, we only need to generate a font size slightly larger than the rectangular bounding box of the model, the data model is then filled into the font cartridge shape surrounding the array of holes instance, Three.js can automatically recognize a hole:

The key code is as follows (a complete example available in the warehouse github accessory or the beginning of the article):

/*在平面上生成镂空字体*/
    function calcShape(font) {
        fontShape = font.generateShapes('M',40);
        boxShape = new THREE.Shape();
        boxShape.moveTo(-20,-20);
        boxShape.lineTo(50,-20);
        boxShape.lineTo(50,50);
        boxShape.lineTo(-20,50);
        boxShape.lineTo(-20,-20);
        boxShape.holes.push(fontShape[0]);
        return boxShape;
}
/*生成拉伸体*/
 textGeometry = new THREE.ExtrudeGeometry(calcShape(font), {
                    depth:10,
                    bevelEnabled: false,
                    curveSegments: 4
                });

For more complex models, this approach still was not very intuitive.

Three program 3:. Cinema 4D model after model output file

Three.js this way of modeling-based programming and intuitive enough when faced with complex models, a common solution is to use three-dimensional modeling software to model building, and then export the model file Three.js can be identified using the loader carrier and then fine-tune the model, Three.js the number 10 general three-dimensional model provides file loader, this section C4D example to demonstrate the basic implementation process, if you use its basic method is unclear, may find free tutorials on the [network] Mu class.

C4D main interface as part of the main tool shown in FIG modeling mainly in the red line marked:

Long press the left button on the icon you can see the detailed features of each category:

In this example, exactly one function is used for each large class (the red box mark in the image above), the cube function generates the box blank model, the text function generates the text that needs to be carved, and after using the extrusion function to create a stretch object, drag and drop the text model in the object management panel on the right side of the interface to Squeeze the text, you can get a text-based stretch, resulting in a solid cloth. In the object management panel, drag and drop the cube and the extrusion onto the object name Boolean, they will become members of the Boolean operation. In the configuration of the Boolean model, select the operation type A minus B, you can get the concave relief model. The general idea of modeling is like functional programming, specifying operations first and passing in data.

The official format of Three.js model is the*.gltf format. If you want to export this format directly in C4D, you need to install the appropriate plugin (GLTF format tool repository). In this example, we use another way to do this, first select “Export” in the “File” menu to get the model file. In this case, we take the*.obj extension as an example. If you add a surface material, the obj data is generated with a Material Template Library with the same name, which carries the material information of the obj geometry surface, then use the command line tool obj2gltf (which can be searched directly on npm) to format the exported file, and finally just To set the generated The marvel.gltf file can be imported into a web page using the GLTFloader loader provided by Three.js. The relevant code is as follows:

// instantiate a loader
    var loader = new THREE.GLTFLoader();

    // load a resource
    loader.load(
        // resource URL
        'assets/marvel.gltf',
        // called when resource is loaded
        function (event) {
            console.log(event);
            event.scene.scale.set(0.2,0.2,0.2);
            scene.add(event.scene);
            render();
        },
        // called when loading is in progresses
        function (xhr) {
            console.log((xhr.loaded / xhr.total * 100) + '% loaded');
        },
        // called when loading has errors
        function (error) {
            console.log('An error happened');
        }
    );

You can see that the model loaded on the web contains both the embossed model and the blue material we added in the modeling software (bright blue areas on the way are the effect of point lights).

Sample Demo in this section can be found in the github repository at the beginning of the article. If you think it’s useful for you, you can order me a star in the repository.

Leave a Reply