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


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


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",//


"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, is a third-party libraries written in JavaScript WebGL.

Official website: https: //

The official document: https: //

Various official examples:

Official GitHub: https: //


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


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: // _wv = 1?

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


Clouds imitation is:

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



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



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:


Cloud code: https: //


Leave a Reply