This is the 23rd day of my participation in the November Gwen Challenge. Check out the event details: The last Gwen Challenge 2021

Sprite models and particle systems

Sprite is the label of a model, the content of which can be the information of the model. (Creating Sprite requires the creation of a material object just like creating grid model object, the difference is that creating Sprite does not require the creation of Geometry object.)

  • Here’s how to create a Sprite model
var texture = new THREE.TextureLoader().load("sprite.png");
// Create the SpriteMaterial material object
var spriteMaterial = new THREE.SpriteMaterial({
  color:0xff00ff.// Set the Sprite rectangle area color
  rotation:Math.PI/4.// Rotate the Sprite object 45 degrees, radian value
  map: texture,// Set the Sprite texture map
});
// Create Sprite model object without geometry parameters
var sprite = new THREE.Sprite(spriteMaterial);
scene.add(sprite);
// Control Sprite size, such as visualization Sprite size to represent data size
sprite.scale.set(10.10.1); //// only need to set x and y components
Copy the code

Particle system is to use a lot of wizard models combined together to form the effect, the following is a wizard model (particle system) to create a forest model

<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta  name="viewport" content="width=device-width, Initial - scale = 1.0 "> < title > Document < / title > < script src="http://www.yanhuangxueyuan.com/versions/threejsR92/build/three.js"></script> <script src="http://www.yanhuangxueyuan.com/threejs/examples/js/controls/OrbitControls.js"></script> </head> <body> <script> var  scene = new THREE.Scene(); var textureTree=new THREE.TextureLoader().load("./tree.png"); for(let i = 0; i < 100; I++){var spriteMaterial = new THREE. Var Sprite = new THREE.Sprite(); scene.add(sprite); // Control Sprite size, sprite.scale.set(100, 100, 1); Var k1 = math.random () -0.5; var k1 = math.random () -0.5; Var k2 = math.random () -0.5; // Set Sprite model position, Set (1000 * k1, 50, 1000 * k2)} var geometry = new THREE.PlaneGeometry(1000, 1000); / / rectangular plane / / load the grass texture map var material = new THREE. MeshLambertMaterial ({color: 0 x777700, / / the map: texture,}); var mesh = new THREE.Mesh(geometry, material); // Mesh model object Mesh scene.add(Mesh); // Add mesh model to scene mesh. RotateX (-math.pi /2); Var point = new three. PointLight(0xffFFFF); point.position.set(400, 200, 300); Scene.add (point); Var ambient = new THREE.AmbientLight(0x444444); scene.add(ambient); var width = window.innerWidth; Var height = window.innerheight; Var k = width/height; Var s = 200; OrthographicCamera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 1000); camera.position.set(200, 300, 200); // Set the camera position camera.lookat (scene.position); Var renderer = new three.webglrenderer (); renderer.setSize(width, height); // Set the size of the render area renderer.setClearColor(0xB9D3ff, 1); / / set the background color document. The body. The appendChild (the renderer. DomElement accordingly); Function render() {renderer.render(scene, camera); } var controls = new THREE.OrbitControls(camera,renderer.domElement); / / create the control object controls. AddEventListener (' change ', render); </script> </body> </ HTML >Copy the code

The frame of animation

  • Edit frame animation and parse playback

1. Create two mesh models for animation

/** * Create two grid models and set a parent object group */
mesh1.name = "Box"; // Grid model 1 named
mesh2.name = "Sphere"; // Grid model 2 named
group.add(mesh1); // Add the grid model to the group
group.add(mesh2); // Add the grid model to the group
Copy the code

2. Edit keyframes (through KeyframeTrack and AnimationClip apis, complex animations in actual development are generated by 3Dmax)

/** * Edit the frame animation data for the group subobject mesh models MESH1 and MESH2
// Create keyframe data named Box
var times = [0.10]; // Keyframe time array, discrete time sequence
var values = [0.0.0.150.0.0]; // An array of values corresponding to the time point
// Create position keyframe object: 0 corresponds to position 0, 0, 0. 10 corresponds to position 150, 0, 0
var posTrack = new THREE.KeyframeTrack('Box.position', times, values);
// Create a color keyframe object: 10 corresponds to the colors 1, 0, 0 and 20 corresponds to the colors 0, 0, 1
var colorKF = new THREE.KeyframeTrack('Box.material.color'[10.20], [1.0.0.0.0.1]);
// Create keyframe data named Sphere from 0 to 20, scale 3 times
var scaleTrack = new THREE.KeyframeTrack('Sphere.scale'[0.20], [1.1.1.3.3.3]);

// duration determines the default playback time, usually the maximum time for all frames of animation
// Duration is too small, animation data of frame cannot be played out, too large, animation will continue to play empty after playing frame
var duration = 20;
// Create a clip object as an element, name it "default", duration 20
var clip = new THREE.AnimationClip("default", duration, [posTrack, colorKF, scaleTrack]);
Copy the code

3. Play key frames (play the existing frame animation data by operating the two apis AnimationAction and AnimationMixer Mixer. The parameter of the mixer three.AnimationMixer () is the parent object group of the two grid models written in the case code. In practice, the Group parameter can also be the model object you return when loading external models.

** * Play the edited keyframe data */// Group as the mixer argument, can play all the children of the group frame animation
var mixer = new THREE.AnimationMixer(group);
// The clip as an argument returns an action object, AnimationAction, via the mixer clipAction method
var AnimationAction = mixer.clipAction(clip);
// Set the playback mode using the Action Action
AnimationAction.timeScale = 20;// Default 1, you can adjust the playback speed
// AnimationAction.loop = THREE.LoopOnce; // Do not loop
AnimationAction.play();// Start playing
Copy the code

4. Set the interval between renders (this can be achieved using a Clock class provided by Threejs)

// Create a Clock object
var clock = new THREE.Clock();
// Render function
function render() {
  renderer.render(scene, camera); // Perform render operations
  requestAnimationFrame(render); // Call render to render the next frame

  The clock.getDelta() method gets the interval between two frames
  // Update the mixer related time
  mixer.update(clock.getDelta());
}
render();
Copy the code
  • Frame animation that parses the external model

If you reference an external model file that holds animation information (such as a JSON file) and need to parse the JSON file via ObjectLoader, first define an empty mixer variable externally, Then, in the callback function of the parse file, the model object was passed as a parameter to generate Mixer through THREE.AnimationMixer. After that, the animation of the model object was passed as a parameter to generate action object AnimationAction through Mixer. clipAction. Finally set the two render intervals

// Load the model file model.json with ObjectLoader
var loader = new THREE.ObjectLoader();
var mixer = null; // Declare a mixer variable
// The load file returns an object obj
loader.load("model.json".function(obj) {
  obj.scale.set(15.15.15);// Scale the loaded model
  scene.add(obj);
  // obj is used as an argument to the mixer to play the animation data contained in obj
  mixer = new THREE.AnimationMixer(obj);
  Obj. animations[0] : Obtain the clip object
  // // Clip, as an argument, returns an action object, AnimationAction, via the mixer clipAction method
  var AnimationAction = mixer.clipAction(obj.animations[0]);
  AnimationAction.play();
});
Copy the code
/ Create a Clock objectvar clock = new THREE.Clock();
// Render function
function render() {
  renderer.render(scene, camera); // Perform render operations
  requestAnimationFrame(render); // Call render to render the next frame

  if(mixer! = =null) {The clock.getDelta() method gets the interval between two frames
    // Update the mixer related time
    mixer.update(clock.getDelta());
  }
}
render();
Copy the code
  • Play Settings (pause, fast forward, locate to a certain time, play a specific time, scroll bar play)

Play/pause (.paused property)

<button onclick="pause()" type="button" style="position: absolute; padding: 10px;"</button><script>
  // Pause to continue playing the function
  function pause() {
    if (AnimationAction.paused) {
      // If it is playing, set it to pause
      AnimationAction.paused = false;
    } else {
      // If it is paused, set it to play
      AnimationAction.paused = true; }}</script>
Copy the code

Play a specific time period of clip

/** * Play the edited keyframe data */
var mixer = new THREE.AnimationMixer(mesh); // Create a mixer
var AnimationAction = mixer.clipAction(clip); // Returns the animation action object
// AnimationAction.timeScale = 5; // Default 1, you can adjust the playback speed
AnimationAction.loop = THREE.LoopOnce; // Do not loop
AnimationAction.clampWhenFinished = true; // Pause the state of the last frame
// Set the playback interval from 10 to 18. The total time of keyframe data is 20
AnimationAction.time = 10; // Action object Sets the start play time
clip.duration = 18;// The clip object sets the playback end time
AnimationAction.play(); // Start playing
Copy the code

Locate at a certain point in time (set the start and end time to the same, equivalent to 0 playback time, directly jump to the corresponding state of the time point)

** * Play the edited keyframe data */var mixer = new THREE.AnimationMixer(mesh); // Create a mixer
var AnimationAction = mixer.clipAction(clip); // Returns the animation action object
// AnimationAction.timeScale = 5; // Default 1, you can adjust the playback speed
AnimationAction.loop = THREE.LoopOnce; // Do not loop
AnimationAction.clampWhenFinished = true; // Pause the state of the last frame
// If the start and end time is set to the same, the playback time is 0
AnimationAction.time = 10; // Action object Sets the start play time
clip.duration = AnimationAction.time;// The clip object sets the playback end time
AnimationAction.play(); // Start playing
Copy the code

Fast forward (button increments time point)

	AnimationAction.time += 2; // Action object Sets the start play time
    clip.duration = AnimationAction.time;// The clip object sets the playback end time
    AnimationAction.play(); // Start playing
Copy the code

Drag the scroll bar to play

<div id="app">
  <div class="block" style="display:inline; width:500px">
    <el-slider v-model="time" show-input :max=20 :step=0.01></el-slider>
  </div>
</div>
<script>. .var mixer = new THREE.AnimationMixer(mesh);
  var AnimationAction = mixer.clipAction(clip);
  AnimationAction.loop = THREE.LoopOnce;
  AnimationAction.clampWhenFinished = true;
  // instantiate vue
  vm = new Vue({
    el: "#app".data: {
      time: 0,},watch: {
      time:function (value) {
        // If the start and end time is set to the same, the playback time is 0
        AnimationAction.time = value; // Action object Sets the start play time
        clip.duration = AnimationAction.time;// The clip object sets the playback end time
        AnimationAction.play(); // Start playing}}})</script>
Copy the code