Shulou(Shulou.com)05/31 Report--

This article introduces the relevant knowledge of "how to use Three.js to achieve a jump Mini Game". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

Rules of the game

Very simple: long press the mouse Xu Li, let go, the box will jump from one box to another. However, it is this little move that makes you magically unable to stop once you start.

Three.js

Three.js is a 3D engine that runs in a browser, and you can use it to create a variety of 3D scenes, including cameras, shadows, materials, and other objects.

Create a scene

Set up the light source

Create a camera and set the camera position and lens orientation

Create a 3D renderer and use the renderer to render the created scene

The structure of the whole program

Realize the introduction of html file into the page structure of three.js engine this score

0 restart score: 0

Scene let scene=new THREE.Scene (); / / create a scene camera

There are two kinds of cameras commonly used:

Perspective camera PerspectiveCamera

In line with people's psychological habits, near big and far small.

Face up to the camera OrthographicCamera

The distance is as big as the near.

Let camera=new THREE.PerspectiveCamera / / create a perspective camera with 4 parameters (visual range, aspect ratio, short distance, long distance) camera.position.z=10; camera.position.y=3; camera.position.x=8; / / xyz scene orientation geometry of the camera

Use CubeGeometry to create a cube geometry, and use the MeshLambertMaterial material to configure the cube to render a dim, unshiny surface that reacts to light sources in the scene, and can be configured with other properties such as color.

Let geometry=new THREE.CubeGeometry (4 geometry,material 2); / / create a geometry object (width, height, depth) let material=new THREE.MeshLambertMaterial ({color:0xbebebe}); / / create a material that can be used for cubes, the object contains color, transparency and other attributes, let cube=new THREE.Mesh (geometry,material); / / combine cube.position.x=16; scene.add (cube); / / add lights to the scene

Scene Scene is mainly composed of geometry model and light Light. In the actual development process, most 3D scenes often need to set up light sources to simulate the lighting effect of the model through different light sources, especially in order to improve the rendering effect of Threejs, it is necessary to set up good light sources, just like photographers need to turn on lights when taking pictures.

Let directionalLight=new THREE.DirectionalLight (0xffffffle 1.1); / / directional light (color, intensity) directionalLight.position.set (3pc10) 5); / directional light position scene.add (directionalLight); / / add directional light let light=new THREE.AmbientLight to the scene (0xfffffffor0.4); / / material scene.add (light) of light; / / add light to scene rendering

Set the render size to the browser body area width and height directly through the .setSize () method of the WebGL renderer WebGLRenderer.

Let renderer=new THREE.WebGLRenderer ({antialias:true}); / / create a renderer (to make the edge animation unaliased) renderer.setSize (window.innerWidth,window.innerHeight); / / canvas width and height renderer.setClearColor (0x282828); / / modify canvas color renderer.render (scene,camera); / / render scene camera (also here in subsequent updates) document.body.appendChild (renderer.domElement) / / put the currently rendered canvas into body let xanth8; function render () {/ / Recursive xMurray 0.1; camera.position.x=x; renderer.render (scene,camera); / / Update re-render if (x > =-8) {/ / meet the current condition requestAnimationFrame (render) / / circular rendering}}

So far, a prototype has been realized.

Add a second block

_ createCube () {let geometry = new THREE.CubeGeometry (this.config.cubeWidth, this.config.cubeHeight, this.config.cubeDeep); / / create a geometry object (width, height, depth) let material = new THREE.MeshLambertMaterial ({color: this.config.cubeColor}) / / material, the object contains color, transparency and other attributes, let cube = new THREE.Mesh (geometry, material) / / merge if (this.cubes.length) {/ / from the second block, cube.position.x = this.cubes [this.cubes.length-1] .position.x; cube.position.y = this.cubes [this.cubes.length-1] .position.y Cube.position.z = this.cubes [this.cubes.length-1] .position.z; this.cubeStat.nextDir = Math.random () > 0.5? "left": "right"; / / either the left or the right if (this.cubeStat.nextDir = = "left") {/ / the left changes the x-axis or the y-axis cube.position.x = cube.position.x-Math.round (Math.random () * 4 + 6) } else {cube.position.z = cube.position.z-Math.round (Math.random () * 4 + 6);}} this.cubes.push (cube) / / add if (this.cubes.length > 5) {/ / you can see a maximum of 5 chunks this.scene.remove (this.cubes.shift ()) on the page; / / remove} this.scene.add (cube) if you exceed it. / / add if to scene (this.cubes.length > 1) {/ / Update shot position this._updateCameraPros ();}}

Define an array of squares and judge that they appear randomly from the second block to the left and right sides. This.cubeStat.nextDir = Math.random () > 0.5? "left": "right" as shown above: (this is made up of two pictures)

Jump block

_ createJumper () {let geometry = new THREE.CubeGeometry (this.config.jumperWidth, this.config.jumperHeight, this.config. Jumper Deep); / / (width, height, depth) let material = new THREE.MeshLambertMaterial ({color: this.config.jumperColor}) / / material, color and transparency this.jumper = new THREE.Mesh (geometry, material); / / merge together this.jumper.position.y = 1; / / display jump block geometry.translate (0,1,0); / / translate this.scene.add (this.jumper); / / add to the scene}

Using Geometry geometry objects, there are a series of vertex properties and methods. Through .scale (), .translate (), .rotateX () and other methods, the geometry itself can be scaled, translated, rotated and other geometric transformations. Note that the essence is to change the coordinate data of the vertex position of the combination.

Mouse down state this.jumperStat = {/ / mouse down speed ready: false, xSpeed: 0, ySpeed: 0} _ handleMouseDown () {if (! this.jumperStat.ready & & this.jumper.scale.y > 0.02) {this.jumper.scale.y-= 0.01; / / compressed block this.jumperStat.xSpeed + = 0.004; this.jumperStat.ySpeed + = 0.008 This._render (); requestAnimationFrame () = > {this._handleMouseDown ()}}

Mouse release pop-up state

Isn't that what life is like? As long as you jump in the right position, you can "counterattack"!

/ / release the mouse to talk about the status _ handleMouseUp () {this.jumperStat.ready = true; if (this.jumper.position.y > = 1) {if (this.jumper.scale.y)

< 1) { this.jumper.scale.y += 0.1; //压缩状态小于1就+ } if (this.cubeStat.nextDir == "left") { //挑起盒子落在哪里 this.jumper.position.x -= this.jumperStat.xSpeed; } else { this.jumper.position.z -= this.jumperStat.xSpeed; } this.jumper.position.y += this.jumperStat.ySpeed; this.jumperStat.ySpeed -= 0.01; //上升落下状态 this._render(); requestAnimationFrame(() =>

{/ / Loop execution this._handleMouseUp ();}} else {/ / drop status this.jumperStat.ready = false; this.jumperStat.xSpeed = 0 This.jumperStat.ySpeed = 0; this.jumper.position.y = 1; this.jumper.scale.y = 1; this._checkInCube () / / detect where if (this.falledStat.location = = 1) {/ / lags down equals 1pm + score this.score++; this._createCube (); this._updateCamera () If (this.successCallback) {/ / otherwise failed this.successCallback (this.score) }} else {this._falling ()}

Where did it fall?

It's wonderful to learn to control the sense of speed. When you slow down, learn to control the speed. Because in every process, there are things in your life worth stopping to browse, appreciate, and feel. In our understanding, we always feel that the faster we have, the more time we have, the higher our efficiency, and the higher our productivity. Actually, it's not. If your mind is always in a state of high-speed thinking, you will feel busy and clueless; if you are always worried about the future or the past, you will not be able to focus on what you are doing in the present, and you must feel that you are running out of time. Efficiency is greatly reduced.

This.falledStat = {location:-1, / / where does it fall on the current block distance: 0, / / whether the distance falls} This.fallingStat = {/ / has it fallen to a point end: false Speed: 0.2} / / detect where it falls / /-1-10 falls from the current box / / 1 the next box 10 falls from the next box / / 0 does not fall on the box _ checkInCube () {let distanceCur, distanceNext / / distance from the current box to the next box let should = (this.config.jumperWidth + this.config.cubeWidth) / 2 / / if (this.cubeStat.nextDir = = "left") {/ / left distanceCur = Math.abs (this.jumper.position.x-this.cubes [this.cubes.length-2] .position.x) DistanceNext = Math.abs (this.jumper.position.x-this.cubes [this.cubes.length-1] .position.x);} else {/ / to the right distanceCur = Math.abs (this.jumper.position.z-this.cubes [this.cubes.length-2] .position.z) DistanceNext = Math.abs (this.jumper.position.z-this.cubes [this.cubes.length-1] .position.z);} if (distanceCur

< should) { //落在当前块 this.falledStat.distance = distanceCur; this.falledStat.location = distanceCur < this.config.cubeWidth / 2 ? -1 : -10; } else if (distanceNext < should) { //落在下一个块上 this.falledStat.distance = distanceNext; this.falledStat.location = distanceNext < this.config.cubeWidth / 2 ? 1 : 10; } else { //落在中间 this.falledStat.location = 0; } }; 落到方块上，停上一会儿，放松自己，亦会有十分的额外奖励。人生路上，匆匆忙忙赶路的时候，不要忘了适度休息调整，你会有意外地收获，命运的魔方会给你别致的惊喜。人生很短，何须急着走完。 //下落过程 _falling() { if (this.falledStat.location == 10) { //从下一个盒子落下 if (this.cubeStat.nextDir == "left") { //判断左方向 if (this.jumper.position.x >

This.cubes [this.cubes.length-1] .position.x) {this._fallingRotate ("leftBottom")} else {this._fallingRotate ("leftTop")} } else {/ / determine the right direction if (this.jumper.position.z > this.cubes [this.cubes.length-1] .position.z) {this._fallingRotate ("rightBottom") } else {this._fallingRotate ("rightTop")} else if (this.falledStat.location = =-10) {/ / drop if from the current box (this.cubeStat.nextDir = = "left") {this._fallingRotate ("leftTop")} else {this._fallingRotate ("rightTop")}} else if (this.falledStat.location = = 0) { This._fallingRotate ("none")}}

This is the end of the content of "how to use Three.js to jump Mini Game". Thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.