'Devesh', //Text that you want to display Geometry const textGeometry = new THREE.TextBufferGeometry( So let's create a text object after loading a font! fontLoader.load( Next step is to initialize the fontLoader and load the font! // Fonts const fontLoader = new THREE.FontLoader()īefore loading the font, I wanted to tell you about objects in threejs, we call it 'Mesh' in threejs, and a Mesh takes in two parameters which are the 'geometry' and 'material' Step 6: Next we'll create an object which would be our text and donuts, but for that, we'll make use of a threejs class called FontLoader, you can read more about it over here -> /docs/#api/en/loaders/FontLoaderīut for using this class you'll need to load a font which we'll get in the folder 'node_modules > three > examples > fonts'.Ĭhoose and copy any font and then create a folder in static and name it 'fonts' and paste the font file over there! Let's first get started with scene and initialize it: // Scene const scene = new THREE.Scene() Step 5: Now let's get started with threejs, we need 4 elements to get started which are import './style.css' import * as THREE from 'three' // Canvas const canvas = document.querySelector( 'canvas.webgl') Step 4: This is where the fun begins but first we'll have to import our styles.css and threejs itself in our JavaScript file and then query select the canvas in our JavaScript and don't worry if you get confused as this is complicated, I'll link the finished repository at the end of the blog so you can always use that for reference. Step 3: Next open the styles.css and add the following CSS, which is self explanatory. Step 2: Next you'll find index.html, styles.css and script.js in the src folder, open the index.html and add a canvas with class 'webgl', we will use the class to query select the element in the JavaScript. Note: You need to download Node.js to install the dependencies. Link to the starter template: /Deveshb15/threejs-starter-templateĪfter cloning just open your command-line tool and install the dependencies as follows: # Install dependencies (only the first time) Step 1: fork and clone this starter template for threejs which contains all the settings for webpack, you don't have to know about webpack, it is just used as a bundler over here! You can zoom in, zoom out and scroll to play around!
You can try out the finished version over here -> Let's create a 3D text that can be controlled using orbit on the web!
0 kommentar(er)
