Unpkg three code#
Unpkg three download#

We're going to make our main function asynchronous because we need to load our. We'll also import OrbitControls which will allow us to zoom, pan, and rotate our model. The GLTFLoader will, of course, load our. We'll also import a GLTFLoader, which comes separately from the core library. So whenever we need to use something from the core Three.js library, we'll call THREE.whatever. First, we'll import Three.js from the keyword that we used, 'three'.

Unpkg three code#

The code might be self-explanatory to some, so if it all makes sense, then skip this explanation. Window.addEventListener('resize', resize) tSize(container.clientWidth, container.clientHeight) resizes the model when the viewport resizesĬamera.aspect = container.clientWidth / container.clientHeight add ability to zoom, pan, rotate the cameraĬonst controls = new OrbitControls(camera, renderer.domElement)

We'll be importing Three.js from a CDN, but you can of course use other methods. The importmap is required in order to properly import the Three.js library, and the first script es-module-shims is required because importmap is not supported on all browsers. You can read more about modular Javascript here. 'three': script.js file will be where our Three.js script will be written, and it has to have a 'module' type, as we will be making imports. In your index file, link your stylesheet, add a container div where we will load our model, and then import three scripts, as shown below:

Now, create your project directory and add an index.html, script.js, style.css, and your newly downloaded. Convert this file to binary, packing it all into one file, via a tool such as this gltf to glb converter.

Unpkg three download#

On the SketchFab website, you have to make an account, but once you do so, you can download the the. You can use the Genshin Impact Hu Tao model as shown above if you're a degenerate like me. To see a more in-depth explanation, discoverthreejs is a great resource and is what I followed.įirst off, let's do the fun part: picking a model to display! There are lots of free models online to experiment with, so feel free to search for one yourself. Do note that you need to have a live server of some sort to be able to load models into your page. The model will be able to be rotated, zoomed, panned as in the above example. In this post, I'm going to explain a simple process for setting up an HTML file that loads a 3D model using Three.js. There are a lot of examples of websites created using Three.js, and it really shows how powerful the browser can be. It's great for displaying 3D models and animations and integrating them visually and interactively into web pages, such as on this post. Three.js is a JavaScript library used to create GPU-accelerated 3D animations on top of WebGL.