• Threejs three objects
  • Generation model import

Recently, I started to contact threejs related projects, and I have been in the process of excavating and filling holes. Therefore, I used WebPack + Vue2.5 +sass to build a Threejs project. Physics engine: PysiJS physics engine based on Ammo.

 npm install -g vue-cli
 vue init webpack threejstest
 cd threejstest
 npm install
 npm run dev
Copy the code

Since threejs needs to reference some dependent modules such as three.js, these resources are imported as static resources. Note: NPM package install threejs module try, although can import and obtain the global module, but other packages introduced cannot obtain the corresponding three global variable, let me talk about my own understand threejs module:

Three objects of Threejs: scene, Camera and Light.

Scenes of life in three dimensional space, for carrying objects, all of the models, and lighting, camera in this scenario, the camera is equivalent to the human eyes in real life to see objects in the scene, you such a scenario in the office, for example, to move around your eyes, can see to the office are also different. The light allows the camera to sense the light source reflected off of it, so that it can see things. Imagine a dark night with no light and our human eyes can't see even though there are lots of objects around. Construction of three-dimensional space: After knowing the necessary elements of three-dimensional space, we can start the project. This requires a div to carry the function of canvas, which is the same as two-dimensional canvas, except that three.js integrates the generation of canvas into the object, and the corresponding rendering environment can be directly generated through three. WebGLRenderer. Then append it to the corresponding tag by js method. Those who have used canvas should know that the height and width of canvas initialization need to be set by setSize of the object.Copy the code

1. Scene object creation:

Threejs create scene method: let scene= three.scene ();Copy the code

2. Create the camera object

Threejs offers two kinds of cameras, one is orthographic camera and the other is perspective camera. Considering the authenticity of 3d scene, perspective camera is used:Copy the code
let camera = new THREE.PerspectiveCamera(fov,aspect,near,far);
Copy the code

Fov is recommended to use 45, on behalf of the field, the aspect by the window. The default innerWidth/window. The innerHeight, near 0.1, far far the default 1000, add finish will need to add to the scene, camera scene. The add (camera);

3. Lighting generation:

Threejs has several Light sources, such as ambient Light, regional Light, directional Light, spot Light and point Light, which can be constructed by the corresponding method and then added to the scene. Finally, the Light source is added to the corresponding scene by scene.add(Light) method and the camera Light source is used as an object in the space. You can use the Position property to place it at different places in the scene, changing it as you want.Copy the code

Second, model export

1. Model Export (3Dmax, Blender)

3Dmax to create obJ model and FBX model, export js model format in Blender, need to install thress.js plugin:Copy the code

Export to JS format, you can directly modify the file suffix into JSON format, static model import and animation export selection may need some differences, animation model export need to select anmation and other parameters, in order to call in the engine.

2. The model is loaded to the page

In the use of Threejs to import models need to use loader tools, obJ model using objLoader.js, FBX model import using fbxLoader.js import module, in order to facilitate the storage of model in the server, Export the first two models to JSON format using Blender and import the model data in JSON format using three. JSONLoader:

After the mesh is generated, it is necessary to add the mesh to the scene. You can directly add the mesh to the space through the scene add method. The mesh has many properties in the three-dimensional space. Scale can be applied to objects so these three properties correspond to each of the three directions of xyz.

	let objectLoader = new THREE.JSONLoader();
    objectLoader.load(modelurl, function (geometry, materials) {
        let loader = new THREE.TextureLoader();
        loader.load(pngurl, function (texture) {
          let material = new THREE.MeshPhongMaterial({ map: texture });
          geometry.center();
          let mesh = new Physijs.BoxMesh(geometry, Physijs.createMaterial(material, 1.0.1), 10);
          mesh.scale.set(9.9.9);
          if (rotationX && rotationY && rotationZ) {
            mesh.rotation.x = -Math.random() * 2 * Math.PI;
            mesh.rotation.y = -Math.random() * 2 * Math.PI;
            mesh.rotation.z = -Math.random() * 2 * Math.PI;
          }
          material.morphTargets = true;
          mesh.position.set(x, y, z); //(objectx.max.y - objectx.min.y) / 2
          mesh.castShadow = true;
          mesh.receiveShadow = true;
          scene.add(mesh);
        });
      });
Copy the code

X =40 is equivalent to moving model X to position x=40. When updating model position, add mesh.__dirtyPosition=true.

3. Animation operation of animation model

// The AnimationMixer is understood as a manager of all aspects of the animation
let mixer = new THREE.AnimationMixer(mesh);    
The following is the way to read the first animation, so animationFirst is an AnimationClip
let firstAnimation = geometry.animations[0];    
// AnimationAction is the schedule of actions. It is called Schedule because it can control the start and end of animation to stop these processes
let action = mixer.clipAction(firstAnimation);
// Now you can configure some details for this animation
action.clampWhenFinished = false;// 0 will stop. This is set to 0 by default. Keep checking to see if this value is set elsewhere
action.setEffectiveTimeScale(0);    
action.play();   
mesh.mixer = mixer;    
mesh.action = action;
Copy the code
First write here will continue to add later, hope everyone criticism and guidance, ha ha.Copy the code