Categories
Uncategorized

TypeScript Advanced Development –ThreeJs basis instance, from the entry into the pit

Foreword

That we used before is I have written ts, as well as the introduction of jquery own hand, due to the use of third-party libraries are introduced directly into js, ​​no d.ts declaration document, developed very tired, so under normal circumstances we introduce a third party using npm library, paper records using npm, typescript threejs3D development projects, building the foundation instance, to prepare for the future development of specific business

 

Project structure

  

Still familiar SpringBoot project, different from the past is the use of npm management tools to download dependent js library, similar maven, and in order to solve the path typescript compiled introduced npm library problems, leading to the problem browser being given, webpack we use packaging tool to package PS: webpack dependent file is really more, all installed after hundreds of M

Following is a brief talk about how to initialize npm, webpack, as well as download jquery, three and so on js library

 

npm use

initialization

cmd to open to threejs project \ src \ main \ resources \ static route, using npm init command, a series of questions (of course also be fully in accordance with the default value), initialized to npm project

Get node_modules directory and file package.json

When we use the Package command, will prompt us to rely on those still missing, this time we follow the prompts to download it

One thing to note, name value package.json file can not be used typescript, we changed

  "name": "typescript-threejs",

Script Commands

  "scripts": {
    "tsc": "tsc -w",//

Monitor file, when there are changes in real-time compiler ts

"build": "webpack",//

Bale

"dev": "webpack -w"//

File monitoring, real-time package when there are changes

},

webpack.config.js Configuration

const path = require('path');
module.exports = {
    entry : {
        main : './src/controller/Main.ts'
    },
    devtool : 'inline-source-map',
    mode : 'development',
    module : {
        rules : [ {
            test : /\.ts$/,
            use : 'ts-loader',
            exclude : /node_modules/
        } ]
    },
    resolve : {
        extensions : [ '.ts', '.js' ]
    },
    output : {
        filename : '[name].js',
        path : path.resolve(__dirname, './dist/')
    },
    plugins : [
    ],
    optimization: {
        splitChunks: {
            chunks: "all",
            minSize: 30000,
            minChunks: 1,
            maxAsyncRequests: 5,
            maxInitialRequests: 3,
            automaticNameDelimiter: '-',
            name: true,
            cacheGroups: {
                vendors: {
                    test: /[\\/]node_modules[\\/]/,
                    priority: -10
                },
                default: {
                    minChunks: 2,
                    priority: -20,
                    reuseExistingChunk: true
                }
            }
        }
    }
};

 

 

Use npm install command to download third-party plugins

 

Download the declaration file for jquery

In node_modules directory j can see the download library npm down

 

How to introduce

Use typescript compiled into js, ​​the path is not correct, browser error

 

 

Use webpack compiled, packaged into js, ​​the path is correct

 

  threejs

threejs, is a third-party libraries written in JavaScript WebGL.

Official website: https: //threejs.org/

The official document: https: //threejs.org/docs/index.html#manual/zh/introduction/Creating-a-scene

Various official examples: https://threejs.org/examples/

Official GitHub: https: //github.com/mrdoob/three.js

 

There is also a big God blog, a relatively abundant examples can refer to: https: //www.wjceo.com/

 

Learning by referring to the official website of the document, as well as a large number of examples of reference, we started three.js trip, using the introduction of three npm way of introduction

 

Path structure Introduction

 

The renderer has three WebGlrenderer, CSS2Drenderer, CSS3Drenderer, the latter two are to be able to use CSS2DObject and CSS3DObject objects as Labels. Note that after using multiple renderers, our controller wants to control the CSS3 Drenderer.DomElement, which controls objects that can simultaneously control to WebGlrenderer

   

Meanwhile, 3D renderer DOM to add absolute positioning, DOM or else things do not show up (in order to unify, 2D, I also added), then the canvas webGL also add style, position: absolute;

   

Then when initializing the scene, keep rendering, note, there is a place to keep rendering on it, more affect performance

   

Encapsulated native objects emit radiation monitor mouse events, there is a place to note rays can only detect objects Mesh, Group a set of objects is not detected

 

 

It also encapsulates an animation, the screen refresh rate call, each call ++ a certain value, each time the callback function returns, the increase from 0-1, the end of time equal to 1 recursive calls

 

There is a shot of inspection

 

 

Other places will not describe, we all look at the code

 

Demonstration effect

Earth imitation is: https: //wa.qq.com/xplan/earth/index.html _wv = 1?

Outer layer of the earth floating clouds (atmosphere), the effect is realistic

  

Clouds imitation is: http://www.sucai58.com/plus/demo.php?aid=132

Clouds and over eight thousand PlaneGeometry objects, creating the effect of pushing the lens through the clouds as Earth scene to scene transition animation park

Park is loaded with examples of official obj model (standing man) and fbx model (dancing woman), dancing animation model is built, the middle two ordinary BoxGeometry objects (GIF software recorded record greenish the effect of good things ugly ah, I do not impress …)

 

 

 

 

 

View more effects own operational

 

supplement

When 1, npm install package error

Solution: npm to downgrade or upgrade

Downgrade: install -g [email protected] // behind npm @ specific version number

Upgrade: npm install -g npm // upgrade to the latest version

If not enough to clear the cache installed again

  npm cache clean -f

 

  

2, threejs when moving always error

In three.module.js do some small adjustments, non-null before calling .call method

 

postscript

Learning Three.js is because the company’s 3D technology reserves from the original Twaver switch to other libraries, company chiefs decided to use the latter, Three.js is a free open source with Unity3D after Three.js in the study, but with Unity3D is Twaver to collect the money, this example is my learning demo, mainly with reference to an example and demonstrate the effect of the two Liezi mentioned in the official website, demo examples have been largely realized the package is loaded OBJ, FBX, native objects, 2D, 3Dlabel etc., encapsulate the object of a mouse event monitor, camera animation package basically meet the business development

Of course there are many deficiencies, such as an event listener is our package of direct ray detection method, after testing found a bug, we’ve removed the earth from the scene, but click on the Earth’s position still listen to events can trigger Earth

 

Examples of advanced development –ThreeJs basis TypeScript temporarily recorded here, later supplemented

 

2019-09-05 Added:

1, the event binding solve problems, reason: although we have the objects removed from the scene, but the event is still listening, so it is still possible to trigger

 

2, sharp-eyed students can be found, clouds transition animation Caton before us, as well as similar “mosaic” of the situation, because the cloud Caton is the object we created too much, but Mosaic is enabled by default because of the depth test, we turn off can be resolved

 

 

 

 

We closed the depth testing, halved cloud objects, and finally look at the results (smooth a lot of ~)

 

   

 

 

 

Open Source Code

Note: node_modules folder and inside the various libraries I will not submit, and hundreds of M is too big, we initialized with the command npm follow the steps above, you can download the

 

Open source code has been hosting to my GitHub, the code says:

  GitHub:https://github.com/huanzi-qch/threejs

Cloud code: https: //gitee.com/huanzi-qch/threejs

 

Leave a Reply