![]() ![]() Install, then run to start a local server in the project's directory: While it's technically possible to double-click an HTML file and open it in your browser, important features that we'll later do not work when the page is opened this way, for security reasons. We'll also need to run a local server to host these files at URL where the web browser can access them. Because import maps are by some major browsers, we include the polyfill es-module-shims.js. The most recent version can be found on the. "three": forget to replace with an actual version of three.js, like "v0.149.0". Put the code below inside the tag, after the styles. In index.html we'll need to add an defining where to get the package. We imported code from 'three' (an npm package) in main.js, and web browsers don't know what that means. Installing without build tools will require some changes to the project structure given above. The contents of that folder are ready to be hosted on your website. Everything used by the application will be compiled, optimized, and copied into the dist/ folder. Later, when you're ready to deploy your web application, you'll just need to tell Vite to run a production build - npx vite build. If you want to learn more about these tools before you continue, see: The page will be blank - you're ready to. If everything went well, you'll see a URL like appear in your terminal, and can open that URL to see your web application. If you prefer, you can put into the list, and use npm run dev instead. Npx is installed with Node.js, and runs command line programs like Vite so that you don't have to search for the right file in node_modules/ yourself. The node_modules/ folder is used only during development, and shouldn't be uploaded to your web hosting provider or committed to version history. When Vite builds your application, it sees imports for 'three' and pulls three.js files automatically from this folder. Npm the code for each dependency in a new node_modules/ folder. If you're using version history, commit package.json. If you have other people working on the project with you, they can install the original versions of each dependency simply by running npm install. Npm uses package.json to describe which versions of each dependency you've installed. Installation added node_modules/ and package.json to my project. If you prefer to use another build tool, that's fine - we support modern build tools that can import. Vite will be used during development, but it isn't part of the final webpage. ![]() Install three.js and a build tool,, using a in your project folder. We'll need it to load manage dependencies and to run our build tool. With a build tool, importing local JavaScript files and npm packages should work out of the box, without import maps. Installing from the and using a is the recommended approach for most users - the more dependencies your project needs, the more likely you are to run into problems that the static hosting cannot easily resolve. Option 1: Install with NPM and a build tool Development Both options are explained in the sections below. Installation and local development can be accomplished with npm and a build tool, or by importing three.js from a CDN. Now that we've set up the basic project structure, we need a way to run the project locally and access it through a web browser. Usually textures, audio, and 3D models will go here. The public/ folder is sometimes also called a "static" folder, because the files it contains are pushed to the website unchanged. The structure and naming choices below aren't required, but will be used throughout this guide for consistency. Every three.js project needs at least one HTML file to define the webpage, and a JavaScript file to run your three.js code. ![]()
0 Comments
Leave a Reply. |