![]() ![]() You can modify or manipulate the Item in any way including shape, size, color, etc. This license is then transferred to your client.ĥ. You can create an End Product for a client, and you can transfer that End Product to your client for any fee. ![]() As part of a physical object such as a toy or physical modelĤ. Resulting as published content within a magazine, website, t-shirt, poster, or similar productĮ. As part of a game as long as the original content is protected from extraction and displays inside the game during playĭ. As rendered imagery (still or moving) distributed as part of a feature film, commercial, broadcast, or stock photography or other stock mediaĬ. As a displayed 3D model used in a mobile phone application as long as the original content is protected from extractionī. More detailed examples of approved distribution or use:Ī. For a website or in any electronic devices See the Pen WebGL Earth Tutorial, Demo 2 by SitePoint ( on CodePen.C. If we run the above code (with the rendering code from before), we’ll get this: Again, searching Google for “Earth bump map” will give you plenty of options, but if you don’t feel like hunting you can find a nice one here. loadTexture ( 'images/elev_bump_16ka.jpg' ) In 3D, bump maps are black and white images, with the intensity of white indicating the height of the “bump” (or in our case, our mountains). The Earth has some pretty high mountains and in order to make sure the rest of the solar system knows that, we’ll need to use a bump map. Now this doesn’t look too bad, but we can make it better by introducing a little topography here. If you’re in need of a good texture to use here, you can try this one or search Google for a decent diffuse map of Earth. First we’ll use a diffuse map, which will give us the look of Earth, and which you can add like this: // diffuse mapĮarthMat. See the Pen WebGL Earth Tutorial, Demo 1 by SitePoint ( on CodePen. There is some extra code here to handle the rendering (which we’ll get to in a moment), but it’s looking good so far! You can see an example of our setup below. We also position it properly and add it to our scene like we did with our other objects. Here we create a mesh, which is kind of like an object that we’ll dress up to look like Earth, and give it some geometry and a material, or texture, to cover it. MeshPhongMaterial ( ) var earthMesh = new THREE. SphereGeometry ( 30, 40, 400 ) ,ĮarthMat = new THREE. Now we need to start building Earth itself by sticking in a mesh: var earthGeo = new THREE. We give it anti-aliasing (for some smooth-ass surfaces) and append it as a DOM element to our original container. Another vital piece of the puzzle, the renderer actually renders the scene we’ve made onto the screen again, without it we’d see nothing but the darkness of space. Three.js’s SpotLight object takes more-or-less the same arguments as our camera, but adds the colour in a hexadecimal value as its first argument followed by the rest. ![]() Without this we’d just have a black screen when we render everything, so we need to set it up pretty carefully. As you may have guessed, we’re going to use this camera to point to our 3D objects, which in this case is our Earth. We set the camera’s position using t, which takes an argument for each dimension (x, y and z).We set up our camera using the variables we declared before (for more info on how cameras work in 3D, check this out).We grab a reference to our container in our HTML.Here’s a description of what’s happening in the code above: PerspectiveCamera (angle, aspect, near, far ) getElementById ( 'container' ) Ĭamera = new THREE. We can start by setting up everything that will handle this environmental stuff: var container = document. To start, we need to take our new variables and set them up so that our model Earth will show up looking awesome. With three.js we’re able to implement these pretty easily, and we’ll see how they fit into our project in a moment. There are some other variables defined here, namely the WIDTH and HEIGHT constants to get the width and height for our renderer, and a group of variables we’ll be using later on to set up our camera position.Īll of these are elements that are common to almost every 3D project, regardless of the platform or environment, so get used to these guys hanging around. var scene ,ĮarthObject var WIDTH = window. The list can seem a little daunting, but all of these can take shape as variables within our earth.js JavaScript file. We have a scene in which things live, a camera with which to view them, some lighting, a renderer to actually render things, and of course the 3D objects themselves. Three.js itself tends to set things up much like a real 3D desktop program might. ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |