“This is the 34th day of my participation in the First Challenge 2022. For details: First Challenge 2022”

The sample code USES three. Js – r73 version: cdnjs.cloudflare.com/ajax/libs/t…

The VTK model format, how to parse the VTK model, and how to load it into the scene were introduced. In fact, we use VTK model is basically enough for our use. However, we have models in various formats, and in order to meet the requirements, we need to use the corresponding loader to load the model.

Obj model introduction

  • MTL,.obj and.stL files contain the same data are geometry object vertex position, vertex normal vector and other vertex related data, material file. MTL contains RGB color values and other material information.
  • When loading the.obj 3d model, you can only load the.obj file, and then customize the Material object with the help of the three. Js engine, you can also load both obj and MTL files.
  • The OBJ file does not contain the camera and lighting information of the scene, so it cannot export the bone animation and deformation animation. If you want to export the lighting information, camera information, bone animation information and deformation animation information, you can choose FBX or GLTF.
  • ObjLoader official documentation: threejs.org/docs/index….

In actual combat

Initialization Scenario

function initScene() {
    scene = new THREE.Scene();
}
Copy the code

Initializing the camera

We set the camera at a 45-degree Angle of 1 for short range and 2000 for long range, and place the camera at [0,0,100]

const near = 1;
const far = 2000;

function initCamera() {
    camera = new THREE.PerspectiveCamera(45, width / height, near, far);
    camera.position.z = 100;
    scene.add(camera);
}
Copy the code

Initialize light

  • We added ambient light and parallel light
function initLight() {
    scene.add(new THREE.AmbientLight(0x101030));

    light = new THREE.DirectionalLight(0xffeedd);
    light.position.set(0.0.1);
    scene.add(light);

}
Copy the code

Load the Obj model

Create a loading manager

var manager = new THREE.LoadingManager();
manager.onProgress = function (item, loaded, total) {
    console.log(item, loaded, total);
}
Copy the code

Load the material

// Load the material
var texture = new THREE.Texture();

var loader = new THREE.ImageLoader(manager);
loader.load('.. /.. /static/textures/UV_Grid_Sm.jpg'.function (image) {
    texture.image = image;
    texture.needsUpdate = true;
})
Copy the code
  • First we initialize a materialTHREE.Texture
  • throughTHREE.ImageLoaderLoad the image as a material

Load model

// Load the model
var onProgress = function (xhr) {
    if (xhr.lengthComputable) {
        var prcentComplete = xhr.loaded / xhr.total * 100;
        console.log(Math.round(percentComplete, 2) + '% downloaded'); }}var onError = function (xhr) {}var loader = new THREE.OBJLoader(manager)
loader.load('.. /.. /static/models/obj/male02/male02.obj'.function (object) {
    object.traverse(function (child) {
        if (child instanceof THREE.Mesh) {
            child.material.map = texture
        }
    })

    object.position.y = -80
    scene.add(object)
}, onProgress, onError)
Copy the code
  • First we initializeTHREE.OBJLoader
  • Load through objLoader.objFile, get the corresponding data, assign our material to the OBJ model
  • Finally add to the scene

Display effect

  • We used an image with texture coordinates as the material, we will talk about texture coordinates later.

Codepen sample code