Note<\/strong>: The code resulting from this project is<\/em> available via Github<\/a><\/em><\/p>\n Both JavaScript and TypeScript are among the most popular programming languages<\/a>. ThreeJS is among the most popular JavaScript game engines<\/a>. Combing the two seem like an obvious win. In this article, we’ll cover how to set up a basic ThreeJS scene in TypeScript that is compiled into a single browser-executable file. Here are the highlights:<\/p>\n Note<\/strong>: This article uses a command-line-based approach but both TypeScript and Webpack integrate well with modern IDEs for convenient point-and-click use. Check out the article Configuring TypeScript with Webstorm<\/a><\/em> for more information.<\/p>\n This article focuses on getting ThreeJS, TypeScript, and Webpack installed and coordinated for a browser-based ThreeJS application. To limit the length and complexity of this article, the following assumptions are being made:<\/p>\n This article doesn’t cover any language deeply and basic working knowledge of syntaxes is good enough to follow along. This article is not a ThreeJS tutorial<\/strong> and does not deeply discuss the inclusion of elements like cameras, lights, From the terminal or integrated terminal within an IDE, create a new Node-based project by executing the Next, create a We need several packages to make this project work. In addition to ThreeJS and TypeScript, we’ll need a bundling package called Webpack as well as packages that help connect everything and execute build commands from the command line. Here’s what’s getting installed:<\/p>\n All of these but Now we will install the non-development dependencies with the following command:<\/p>\n Our project now has a Configuring Webpack would be the next step in most cases. However, we’ll set up a TypeScript-based ThreeJS project first to highlight the need for Webpack. Initially, our TypeScript project will not work in the browser — at which point Webpack will come to our rescue.<\/p>\n The use of ThreeJS objects and functions here will not be covered in-depth. However, it’s useful to at least know what’s in the scene. We’ll be adding a BasicScene.ts class and an index.ts file to our src directory. The scene elements are created in the BasicScene class and the index.ts file simply renders updates in a loop. Elements included in the scene are as follows:<\/p>\n These elements are, in my opinion, helpful and essential elements for a basic ThreeJS scene. We’ll not cover much about their configurations or purposes here since our focus is on getting them to work via TypeScript and Webpack. The creation, configuration, and initialization of these elements is done in the This code handles the entirety of our ThreeJS scene configuration. However, we still need a basic “game loop<\/a>” to update our scene on changes. This will allow the This code could<\/em> be included easily enough as an e.g. Note<\/strong>: ThreeJS scenes can be set up in many ways. This is a preferential approach with the only real requirement of having two separate files to highlight an issue later.<\/p>\n TypeScript’s compiler will turn our code into vanilla javascript based on specifications in a Auto-generating this file is convenient but also produces a ton of invalid JSON comments. This doesn’t bother the TS compiler but is a lot of added text. At the time of writing, I’m not aware of a way to auto-generate this file without subsequent generation of all the comments.<\/p>\n For those on Windows machines, running the above command is likely to produce the following error message:<\/p>\n This is caused by Windows ExecutionPolicy settings, which defaults to The base In addition, we’ll add a few configuration specifications to make fuller use of TypeScript’s power. A full list of configuration options and parameters is available here<\/a>. We’ll update our file as follows:<\/p>\n The Note: We’re also removing the The following command will initialize the TypeScript compiler, at which point it will configure via our If all goes well, we should see a few new files created in the The We’ll create a bare-bones HTML file in which our ThreeJS app will be loaded along with some\u00a0very<\/em> basic CSS styling. This will load our scripts, create a canvas element, and remove some annoying scroll bars from the window. Add an With this file, we’re ready to launch our application via a webserver of your choosing. Personally, I’m developing within Webstorm and find the build-in HTTP dev server to be very convenient. For readers using the command line only, I would suggest researching the webpack dev server<\/a>. With a server up and running, loading our Inspecting line 5 column 23 of our This relates to how our import of Webpack uses a file named This reflects a minimal configuration setup only budling TypeScript files. Webpack can be used for much more. Check out the documentation for Webpack’s config files<\/a> here for more insight. Important options to note here are as follows:<\/p>\n With this file created, our TypeScript files already compiled, and the You should see some output in the console window indicating progress as well as some metadata about the created files, source files, and where\/when code is generated. Since we have the We need to update our To this:<\/p>\n This will instruct our Here we see our scene, all the elements, and even the This is a\u00a0warning<\/em> \u2014 meaning it won’t prevent our application from running. However, it does indicate some avoidable redundancy. The issue is in our use of the This ensures that all statements importing This article is a bare-bones example of configuring a ThreeJS project to work with TypeScript and Webpack. There are\u00a0many<\/em> features of Webpack that can be leveraged for project management. Webpack ties into many modules, such as For example, Webpack can compile SCSS\/SASS files down into CSS which is a major time-saver. Another popular configuration is automatic file watchers to compile and\/or bundle based on file changes. See here<\/a> to configure watch features.<\/p>\n In addition, ThreeJS is a vast, powerful, diverse project that has virtually no end of possible configurations. The sample scene here is not intended to illustrate any best practice, optimal design pattern, or otherwise superior approach. The inclusion of scene objects, cameras, and lighting was simply to give us something other than a blank screen to look at!<\/p>\n We’ve covered a fair amount of ground in this article. By using TypeScript and Webpack alongside ThreeJS we’ve seen how projects can be scaled from the ground up. TypeScript provides the robust features needed for large-scale application development and Webpack keeps everything browser-kosher.<\/p>\n Yes \u2014 this entire project could have been coded in vanilla JS and have loaded the ThreeJS library via a CDN. However, configuring TypeScript and Webpack ensures that this project will scale seamlessly as it grows more complex. For even easier scaling, check out the article on integrating TypeScript and Webpack via Webstorm<\/a><\/em> for a fully integrated IDE experience.<\/p>\n TypeScript is a language that brings static typing and features common to more advanced software engineering languages like Java and C#. ThreeJS is a JavaScript-based cross-browser 3D engine capable of building applications ranging from games to advanced 3d websites. JavaScript was never intended to be used for large-scale applications. Research suggests that, since version 2.0, […]<\/p>\n","protected":false},"author":2,"featured_media":2560,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"footnotes":""},"categories":[10],"tags":[622,479,621,619,614,623,620],"acf":[],"_links":{"self":[{"href":"https:\/\/www.alpharithms.com\/wp-json\/wp\/v2\/posts\/2551"}],"collection":[{"href":"https:\/\/www.alpharithms.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.alpharithms.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.alpharithms.com\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.alpharithms.com\/wp-json\/wp\/v2\/comments?post=2551"}],"version-history":[{"count":8,"href":"https:\/\/www.alpharithms.com\/wp-json\/wp\/v2\/posts\/2551\/revisions"}],"predecessor-version":[{"id":2731,"href":"https:\/\/www.alpharithms.com\/wp-json\/wp\/v2\/posts\/2551\/revisions\/2731"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.alpharithms.com\/wp-json\/wp\/v2\/media\/2560"}],"wp:attachment":[{"href":"https:\/\/www.alpharithms.com\/wp-json\/wp\/v2\/media?parent=2551"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.alpharithms.com\/wp-json\/wp\/v2\/categories?post=2551"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.alpharithms.com\/wp-json\/wp\/v2\/tags?post=2551"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}Highlights<\/h2>\n
\n
Assumptions<\/h2>\n
\n
GridHelpers<\/code>, and Dat.GUI<\/code> systems. With that in mind let’s get started!<\/p>\nStep 1: Create a new Node Project<\/h2>\n
npm init -y<\/code> command producing the following output:<\/p>\n{\r\n \"name\": \"threejs-typescript\",\r\n \"version\": \"1.0.0\",\r\n \"description\": \"\",\r\n \"main\": \"index.js\",\r\n \"scripts\": {\r\n \"test\": \"echo \\\"Error: no test specified\\\" && exit 1\" \r\n },\r\n \"keywords\": [],\r\n \"author\": \"\",\r\n \"license\": \"ISC\"\r\n}\r\n<\/pre>\nsrc<\/code> and dist<\/code> directory in the project root via the touch command on Linux machines, the mkdir<\/code> command on Windows machines, or by any other means you see fit. The project structure should now look like this:<\/p>\n.\r\n\u2514\u2500\u2500 threejs-typescript\/\r\n \u251c\u2500\u2500 src\r\n \u251c\u2500\u2500 dist\r\n \u2514\u2500\u2500 package.json<\/pre>\n
Step 2: Install Necessary Packages<\/h2>\n
\n
.ts<\/code> files<\/li>\nthree<\/code> and data.gui<\/code> will be devDependencies<\/code> that will be installed while passing the --save-dev<\/code> flag as follows:<\/p>\nnnpm install --save-dev ts-node ts-loader webpack webpack-cli @types\/dat.gui @types\/three<\/pre>\n
npm install three dat.gui<\/pre>\n
node_modules<\/code> directory in which all these packages and their dependencies have been installed as well as a package.lock<\/code> file. It’s worth noting that we didn’t explicitly install TypeScript anywhere! The ts-node<\/code> package handles this automatically as typescript is a dependency. After the bytes settle, our package.json<\/code> file now reads as follows:<\/p>\n{\r\n \"name\": \"threejs-typescript\",\r\n \"version\": \"1.0.0\",\r\n \"description\": \"\",\r\n \"main\": \"index.js\",\r\n \"scripts\": {\r\n \"test\": \"echo \\\"Error: no test specified\\\" && exit 1\"\r\n },\r\n \"keywords\": [],\r\n \"author\": \"\",\r\n \"license\": \"ISC\",\r\n \"devDependencies\": {\r\n \"@types\/dat.gui\": \"^0.7.7\",\r\n \"@types\/three\": \"^0.140.0\",\r\n \"ts-loader\": \"^9.3.0\",\r\n \"ts-node\": \"^10.7.0\",\r\n \"webpack\": \"^5.72.0\",\r\n \"webpack-cli\": \"^4.9.2\"\r\n },\r\n \"dependencies\": {\r\n \"dat.gui\": \"^0.7.9\",\r\n \"three\": \"^0.140.0\"\r\n }\r\n}<\/pre>\nStep 3: Basic ThreeJS Scene Setup<\/h2>\n
\n
BasicScene<\/code> class, contained in the \/src\/BasicScene.ts<\/code> file now located in our project. The specifics of this file are not important for configuring Webpack or Typescript but simply a way to load something interesting into a scene. Below is the code with ample commenting for explanation:<\/p>\nimport * as THREE from 'three';\r\nimport {GUI} from 'dat.gui';\r\nimport {OrbitControls} from \"three\/examples\/jsm\/controls\/OrbitControls\";\r\n\r\n\/**\r\n * A class to set up some basic scene elements to minimize code in the\r\n * main execution file.\r\n *\/\r\nexport default class BasicScene extends THREE.Scene{\r\n\r\n \/\/ A dat.gui class debugger that is added by default\r\n debugger: GUI = null;\r\n\r\n \/\/ Setups a scene camera\r\n camera: THREE.PerspectiveCamera = null;\r\n\r\n \/\/ setup renderer\r\n renderer: THREE.Renderer = null;\r\n\r\n \/\/ setup Orbitals\r\n orbitals: OrbitControls = null;\r\n\r\n \/\/ Holds the lights for easy reference\r\n lights: Array<THREE.Light> = [];\r\n\r\n \/\/ Number of PointLight objects around origin\r\n lightCount: number = 6;\r\n\r\n \/\/ Distance above ground place\r\n lightDistance: number = 3;\r\n\r\n \/\/ Get some basic params\r\n width = window.innerWidth;\r\n height = window.innerHeight;\r\n\r\n \/**\r\n * Initializes the scene by adding lights, and the geometry\r\n *\/\r\n initialize(debug: boolean = true, addGridHelper: boolean = true){\r\n\r\n \/\/ setup camera\r\n this.camera = new THREE.PerspectiveCamera(35, this.width \/ this.height, .1, 1000);\r\n this.camera.position.z = 12;\r\n this.camera.position.y = 12;\r\n this.camera.position.x = 12;\r\n\r\n \/\/ setup renderer\r\n this.renderer = new THREE.WebGLRenderer({\r\n canvas: document.getElementById(\"app\") as HTMLCanvasElement,\r\n alpha: true\r\n });\r\n this.renderer.setSize(this.width, this.height);\r\n\r\n \/\/ add window resizing\r\n BasicScene.addWindowResizing(this.camera, this.renderer);\r\n\r\n \/\/ sets up the camera's orbital controls\r\n this.orbitals = new OrbitControls(this.camera, this.renderer.domElement)\r\n\r\n \/\/ Adds an origin-centered grid for visual reference\r\n if (addGridHelper){\r\n\r\n \/\/ Adds a grid\r\n this.add(new THREE.GridHelper(10, 10, 'red'));\r\n\r\n \/\/ Adds an axis-helper\r\n this.add(new THREE.AxesHelper(3))\r\n }\r\n\r\n \/\/ set the background color\r\n this.background = new THREE.Color(0xefefef);\r\n\r\n \/\/ create the lights\r\n for (let i = 0; i < this.lightCount; i++){\r\n\r\n \/\/ Positions evenly in a circle pointed at the origin\r\n const light = new THREE.PointLight(0xffffff, 1);\r\n let lightX = this.lightDistance * Math.sin(Math.PI * 2 \/ this.lightCount * i);\r\n let lightZ = this.lightDistance * Math.cos(Math.PI * 2 \/ this.lightCount * i);\r\n\r\n \/\/ Create a light\r\n light.position.set(lightX, this.lightDistance, lightZ)\r\n light.lookAt(0, 0, 0)\r\n this.add(light);\r\n this.lights.push(light);\r\n\r\n \/\/ Visual helpers to indicate light positions\r\n this.add(new THREE.PointLightHelper(light, .5, 0xff9900));\r\n }\r\n\r\n \/\/ Creates the geometry + materials\r\n const geometry = new THREE.BoxGeometry(1, 1, 1);\r\n const material = new THREE.MeshPhongMaterial({color: 0xff9900});\r\n let cube = new THREE.Mesh(geometry, material);\r\n cube.position.y = .5;\r\n\r\n \/\/ add to scene\r\n this.add(cube);\r\n\r\n \/\/ setup Debugger\r\n if (debug) {\r\n this.debugger = new GUI();\r\n\r\n \/\/ Debug group with all lights in it.\r\n const lightGroup = this.debugger.addFolder(\"Lights\");\r\n for(let i = 0; i < this.lights.length; i++){\r\n lightGroup.add(this.lights[i], 'visible', true);\r\n }\r\n lightGroup.open();\r\n\r\n \/\/ Add the cube with some properties\r\n const cubeGroup = this.debugger.addFolder(\"Cube\");\r\n cubeGroup.add(cube.position, 'x', -10, 10);\r\n cubeGroup.add(cube.position, 'y', .5, 10);\r\n cubeGroup.add(cube.position, 'z', -10, 10);\r\n cubeGroup.open();\r\n\r\n \/\/ Add camera to debugger\r\n const cameraGroup = this.debugger.addFolder('Camera');\r\n cameraGroup.add(this.camera, 'fov', 20, 80);\r\n cameraGroup.add(this.camera, 'zoom', 0, 1)\r\n cameraGroup.open();\r\n\r\n }\r\n }\r\n\r\n \/**\r\n * Given a ThreeJS camera and renderer, resizes the scene if the\r\n * browser window is resized.\r\n * @param camera - a ThreeJS PerspectiveCamera object.\r\n * @param renderer - a subclass of a ThreeJS Renderer object.\r\n *\/\r\n static addWindowResizing(camera: THREE.PerspectiveCamera, renderer: THREE.Renderer){\r\n window.addEventListener( 'resize', onWindowResize, false );\r\n function onWindowResize(){\r\n\r\n \/\/ uses the global window widths and height\r\n camera.aspect = window.innerWidth \/ window.innerHeight;\r\n camera.updateProjectionMatrix();\r\n renderer.setSize( window.innerWidth, window.innerHeight );\r\n }\r\n }\r\n}<\/pre>\nDat.GUI<\/code> debugger to cause changes visible in the scene, the cube object to move around, and the OrbitalControls<\/code> class to work.<\/p>\nloop<\/code> method in the BasicScene<\/code> class. However, having two files is essential for demonstrating the need of Webpack (or another bundler) so our game loop code will go in a \/src\/index.ts<\/code> file as follows:<\/p>\nimport BasicScene from \".\/BasicScene\";\r\n\r\n\/\/ sets up the scene\r\nlet scene = new BasicScene();\r\nscene.initialize();\r\n\r\n\/\/ loops updates\r\nfunction loop(){\r\n scene.camera.updateProjectionMatrix();\r\n scene.renderer.render(scene, scene.camera);\r\n scene.orbitals.update()\r\n requestAnimationFrame(loop);\r\n}\r\n\r\n\/\/ runs a continuous loop\r\nloop()\r\n<\/pre>\nStep 4: Creating tsconfig.json<\/h2>\n
tsconfig.json<\/code> file. This file can be created manually or via the tsc<\/code> (typescript compiler) command available from the typescript package npm installed along with our ts-node<\/code> installation. An initial version of this file can be created with the tsc --init<\/code> command producing a tsconfig.json<\/code> file in our project root that, after removing the massive number of auto-generated comments in the document, reads as follows:<\/p>\n{\r\n \"compilerOptions\": {\r\n \"target\": \"es2016\",\r\n \"module\": \"commonjs\",\r\n \"esModuleInterop\": true,\r\n \"forceConsistentCasingInFileNames\": true,\r\n \"strict\": true,\r\n \"skipLibCheck\": true\r\n }\r\n}<\/pre>\nA Note for Windows Users<\/h3>\n
tsc : File threejs-typescript\\node_modules\\.bin\\tsc.ps1 cannot be loaded because running scripts is disabled on this system. For more information, see about_Execution_Policies at https:\/go.microsoft.com\/fwlink\/?LinkID=135170.\r\nAt line:1 char:1\r\n+ tsc --init\r\n+ ~~~\r\n + CategoryInfo : SecurityError: (:) [], PSSecurityException\r\n + FullyQualifiedErrorId : UnauthorizedAccess\r\n<\/pre>\n
Restricted<\/code> for user accounts. Rather than changing the ExecutionPolicy, Windows will allow users to bypass the policy restriction for a single command via the following syntax:<\/p>\npowershell -ep Bypass -c \"tsc --init\"<\/pre>\n
Step 5: Customizing tsconfig.json<\/h2>\n
tsconfig.json<\/code> file is useful but not comprehensive enough for our use here. By default, TypeScript will compile all .ts<\/code> files into .js versions in the directory they are located. We want everything to go into the dist<\/code> directory.<\/p>\n{\r\n \"compilerOptions\": {\r\n \"module\": \"commonjs\",\r\n \"target\": \"es2016\",\r\n \"esModuleInterop\": true,\r\n \"forceConsistentCasingInFileNames\": true,\r\n \"skipLibCheck\": true \r\n \"sourceMap\": true, \/\/ Added\r\n \"noImplicitAny\": true, \/\/ Added\r\n \"moduleResolution\": \"node\", \/\/ Added\r\n \"outDir\": \"dist\", \/\/ Added\r\n },\r\n \"include\": [ \"src\/**\/*.ts\" ], \/\/ Added\r\n \"exclude\": [ \"node_modules\" ] \/\/ Added\r\n}<\/pre>\ninclude<\/code> option tells the TypeScript compiler to target all files in all subdirectories within the src<\/code> directory. The exclude<\/code> option makes sure the TypeScript compiler doesn’t dive into any directories associated with project dependencies (i.e. things we are writing.) The outDir<\/code> option instructs the TypeScript compiler to put all compiled files into the dist<\/code> folder vs. alongside source files. With this setup, we’re ready to run the TypeScript compiler!<\/p>\n\"strict\" : true<\/code> entry from the tsconfig.json<\/code> file.<\/p>\nStep 6: Compiling TypeScript into JavaScript<\/h2>\n
tsconfig.json<\/code> file and then emit compiled JavaScript versions of our files to our dist<\/code> directory. Running the tsc<\/code> command will accomplish this or, for Windows users without adequate ExectutionPolicy privileges, the following command:<\/p>\npowershell -ep Bypass -c \"tsc\"<\/pre>\n
dist<\/code> directory such that our project now reflects the following structure:<\/p>\n.\r\n\u2514\u2500\u2500 typescript-threejs\/\r\n \u251c\u2500\u2500 src\/\r\n \u2502 \u251c\u2500\u2500 BasicScene.ts\r\n \u2502 \u2514\u2500\u2500 index.ts\r\n \u251c\u2500\u2500 dist\/\r\n \u2502 \u251c\u2500\u2500 BasicScene.js\r\n \u2502 \u251c\u2500\u2500 BasicScene.js.map\r\n \u2502 \u251c\u2500\u2500 index.js\r\n \u2502 \u2514\u2500\u2500 index.js.map\r\n \u2514\u2500\u2500 package.json<\/pre>\n
*.js.map<\/code> files are created because we added the \"sourceMap\": true<\/code> option in our tsconfig.json file. This helps produce useful messages during compile errors to help in debugging. Next, let’s create a basic HTML document that we can open in a browser to load the ThreeJS scene.<\/p>\nStep 7: Create index.html<\/h2>\n
index.html<\/code> file in the project root containing the following code:<\/p>\n<!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n <meta charset=\"UTF-8\">\r\n <title>ThreeJS & TypeScript<\/title>\r\n\r\n <!-- loads some basic CSS resets and Styles -->\r\n <style>\r\n html, body, canvas {margin: 0;padding: 0;border: 0;}\r\n canvas {display: block;}\r\n <\/style>\r\n<\/head>\r\n<body>\r\n\r\n<!-- Application Canvas -->\r\n<canvas id=\"app\"><\/canvas>\r\n\r\n<!-- this needs to be called here to ensure all elements are available -->\r\n<script src=\"dist\/index.js\" type=\"application\/javascript\"><\/script>\r\n\r\n<\/body>\r\n<\/html><\/pre>\nindex.html<\/code> file show us — a blank screen. Something has gone wrong! By using built-in browser inspection tools (Shift + Ctrl + i) click the console<\/code> view. You should see the following error message:<\/p>\nUncaught ReferenceError: exports is not defined\r\n at index.js:5:23<\/pre>\n
index.js<\/code> file as indicated, we see the following line of code (all of line 5):<\/p>\nObject.defineProperty(exports, \"__esModule\", { value: true });\r\n<\/pre>\nBasicScene<\/code> into our index.ts<\/code> file. If we had crammed all the code into a single index.ts<\/code> we wouldn’t have this issue. This line indicates how JavaScript interprets import\/export statements found in the BasicScene<\/code> file using our specified commonjs<\/code> module option in our tsconfig.json<\/code> file. Most modern browsers support import\/export statements but do not support importing modules.<\/p>\nStep 8: Configure File Bundling via Webpack<\/h2>\n
Three<\/code>, dat.GUI<\/code>, and OrbitalControls<\/code> are all being imported as modules that will not work \u2014 these resources need to be available directly within the code loaded in the web browser. For simplicity, we are going to use Webpack to “bundle” all our compiled TypeScript files into a single output file that can be easily loaded in the browser.<\/p>\nwebpack.config.js<\/code> by default for configuration settings. Unfortunately, there is no auto-generation method for this file — which will make sense once we see the project-specific nature of these configurations. Create a webpack.config.js<\/code> file in the project root with the following code:<\/p>\nconst path = require('path');\r\n\r\nmodule.exports = {\r\n mode: 'none',\r\n entry: '.\/src\/index.ts',\r\n output: {\r\n path: path.resolve(__dirname, 'dist'),\r\n filename: 'main.js'\r\n },\r\n resolve: {\r\n extensions: ['.tsx', '.ts', '.js', '.jsx']\r\n },\r\n module: {\r\n rules: [\r\n {\r\n use: 'ts-loader',\r\n exclude: \/node_modules\/,\r\n }\r\n ]\r\n }\r\n};<\/pre>\n\n
production<\/code>, development<\/code> and none<\/code> — the latter emitting a human-friendly format.<\/li>\nmain.js<\/code> here.<\/li>\n.js<\/code> extensions are needed here to ensure a seamless import of the OrbitalControls<\/code> module.<\/li>\nts-loader<\/code> package which allows the integration with TypeScript.<\/li>\n<\/ul>\nwebpack-cli<\/code> module installed, we can now run the command to bundle our TypeScript-compiled .js<\/code> files into a single, browser-loadable asset via the webpack build<\/code> command. For Windows users without adequate ExecutionPolicies (again) the following command should work:<\/p>\npowershell -ep Bypass -c \"webpack build\"<\/code><\/p>\nts-loader<\/code> module installed and specified in our webpack.config.js<\/code> file we don’t have to worry about running the tsc<\/code> commands to compile our TypeScript anymore — Webpack will handle everything!<\/p>\nindex.html<\/code> file to load our new Webpack bundle file. Change this line:<\/p>\n<script src=\"dist\/index.js\" type=\"application\/javascript\"><\/script><\/code><\/p>\n<script src=\"dist\/main.js\" type=\"application\/javascript\"><\/script><\/code><\/p>\nindex.html<\/code> file to load our new file instead of the TypeScript compiled file with the module imports. In fact, we can delete those original TypeScript-generated .js<\/code> files. Reloading the index.html<\/code> file now gives us the following page:<\/p>\n![\"threejs](\"https:\/\/www.alpharithms.com\/wp-content\/uploads\/2551\/threejs-typescript-webpack-configuration-success-alpharithms-1024x683.jpg\" "\\"threejs-typescript-webpack-configuration-success-alpharithms\\"")
<\/a>dat.GUI<\/code> debug window on the top-right side of the browser window! Looking in the console view of the browser inspector will show the following warning:<\/p>\nWARNING: Multiple instances of Three.js being imported.<\/code><\/p>\nOrbitalControls<\/code> module and can be resolved by adding an alias within the resolve<\/code> section of our webpack.config.json<\/code> file as follows:<\/p>\nresolve: {\r\n alias: {\r\n three: path.resolve('.\/node_modules\/three') \/\/ <----- Addition\r\n },\r\n extensions: ['.ts', '.js']\r\n },<\/pre>\nthree<\/code> will be\u00a0aliased<\/em> to the same location. Re-run the webpack build<\/code> command, reload the page, and the warning will be gone.<\/p>\nImportant Considerations<\/h2>\n
ts-loader<\/code>, to integrate with many other technologies as well.<\/p>\nFinal Thoughts<\/h2>\n
References<\/h2>\n
\n