Three.js https://www.monarchdigital.com/tags/threejs en How to Make a Simple Panoramic Image Viewer With Three.js https://www.monarchdigital.com/blog/2018-09-26/how-make-simple-panoramic-image-viewer-threejs <span class="field field--name-title field--type-string field--label-hidden">How to Make a Simple Panoramic Image Viewer With Three.js</span> <div class="clearfix text-formatted field field--name-body field--type-text-with-summary field--label-hidden field__item"><p>Making a custom panoramic image viewer is very straightforward when you use Three.js. All you have to do is create a sphere object, place a camera in the middle of it, and add the image to the backside of the sphere. Most of the controls are already available for you with the default library features. Typically, I like to use the orbit control library to get a nice fluid view.</p> <p>The nice thing about programming the image viewer yourself is that you can customize it easily! If you want the camera to slowly look around you can simply add a rotation to the y-axis of the camera in the render function. You can also add your own object inside of the image. This could be a replacement for <a href="/blog/2018-08-01/using-threejs-cube-mapping-create-3d-reflections">cube mapping</a> if large enough and you need more seamless edges.</p> <p>The example below can be utilized by clicking and dragging with your mouse. I added a VR component to this one that will work with software like Google Cardboard.</p> <p>(You can inspect the Three.js code for this example by clicking on the JS tab in the Codepen demo below.)</p> <p class="codepen" data-default-tab="result" data-embed-version="2" data-height="482" data-pen-title="Panoramic Image Viewer" data-slug-hash="KWRadp" data-theme-id="dark" data-user="bartuc">See the Pen <a href="https://codepen.io/bartuc/pen/KWRadp/">Panoramic Image Viewer</a> by Bryan Jones (<a href="https://codepen.io/bartuc">@bartuc</a>) on <a href="https://codepen.io">CodePen</a>.</p> <script async="" src="https://static.codepen.io/assets/embed/ei.js"></script></div> <span class="field field--name-uid field--type-entity-reference field--label-hidden"><span>Bryan Jones</span></span> <span class="field field--name-created field--type-created field--label-hidden">Wed, 09/26/2018 - 06:16</span> <div class="field field--name-field-blog-tags field--type-entity-reference field--label-inline"> <div class="field__label">Tags</div> <div class="field__items"> <div class="field__item"><a href="/tags/threejs" hreflang="en">Three.js</a></div> <div class="field__item"><a href="/tags/webgl" hreflang="en">WebGL</a></div> </div> </div> Wed, 26 Sep 2018 12:16:08 +0000 Bryan Jones 269 at https://www.monarchdigital.com How to Use Graphic Mapping Techniques With Three.js https://www.monarchdigital.com/blog/2018-09-01/how-use-graphic-mapping-techniques-threejs <span class="field field--name-title field--type-string field--label-hidden">How to Use Graphic Mapping Techniques With Three.js</span> <div class="clearfix text-formatted field field--name-body field--type-text-with-summary field--label-hidden field__item"><p>Making a realistic scene on the web is easier than you think with Three.js, a cross-browser JavaScript library and API that uses WebGL to create and display animated 3D computer graphics in a web browser.</p> <p>Texture mapping is a method for defining high-frequency detail, surface texture, or color information on a computer-generated graphic or 3D model. Using texture mapping techniques allow for the simulation of a more realistic 3D scene in realtime with a dramatically smaller number of polygons and lighting calculations.</p> <p>Three.js supports bump, normal, displacement, and specular mapping and makes it simple to apply it to an object. I wrote this program really quickly so it doesn't look as good as something that gets more time put into it, but it provides a quick glimpse into what you can do. See the mapping example below to see a few mappings in action. Use your mouse to look around!</p> <p><a href="https://threejs.org/examples/?q=normal#webgl_materials_normalmap" target="_blank">Here is a pretty neat use of normal mapping.</a></p> <p>(You can inspect the Three.js code for this example by clicking on the JS tab in the Codepen demo below.)</p> <p class="codepen" data-default-tab="result" data-embed-version="2" data-height="488" data-pen-title="Cabin" data-slug-hash="vJQGPL" data-theme-id="dark" data-user="bartuc">See the Pen <a href="https://codepen.io/bartuc/pen/vJQGPL/">Cabin</a> by Bryan Jones (<a href="https://codepen.io/bartuc">@bartuc</a>) on <a href="https://codepen.io">CodePen</a>.</p> <script async="" src="https://static.codepen.io/assets/embed/ei.js"></script></div> <span class="field field--name-uid field--type-entity-reference field--label-hidden"><span>Bryan Jones</span></span> <span class="field field--name-created field--type-created field--label-hidden">Sat, 09/01/2018 - 06:54</span> <div class="field field--name-field-blog-tags field--type-entity-reference field--label-inline"> <div class="field__label">Tags</div> <div class="field__items"> <div class="field__item"><a href="/tags/threejs" hreflang="en">Three.js</a></div> <div class="field__item"><a href="/tags/webgl" hreflang="en">WebGL</a></div> </div> </div> Sat, 01 Sep 2018 12:54:36 +0000 Bryan Jones 266 at https://www.monarchdigital.com Using Three.js Cube Mapping to Create 3D Reflections https://www.monarchdigital.com/blog/2018-08-01/using-threejs-cube-mapping-create-3d-reflections <span class="field field--name-title field--type-string field--label-hidden">Using Three.js Cube Mapping to Create 3D Reflections</span> <div class="clearfix text-formatted field field--name-body field--type-text-with-summary field--label-hidden field__item"><p>Reflections can be a tricky 3D graphics device to employ but with Three.js they can be accomplished quite easily using a <a href="https://threejs.org/docs/#api/cameras/CubeCamera" target="_blank">Cube Camera</a>, a unique camera that allows us to utilize cube mapping. In computer graphics, cube mapping is a method of environment mapping that uses the six faces of a cube as the map shape. The environment is projected onto the sides of a cube and stored as six square textures, or unfolded into six regions of a single texture. </p> <p>The Cube Camera for Three.js will provide us these six perspective cameras and will display what each camera sees onto any object in which we place it. As expected, it will fit well on all default three-dimensional shapes provided by the core Three.js library. In this example, I use a few spheres, a rectangle, and a cone. I also add a reflection to the plane I use as the floor so that lights and the cube map (background image) are reflected.</p> <p>To see the full code click on the "JS" tab in the Threejs reflections example below. There are also some really neat examples on the Three.js example pages. <a href="https://threejs.org/examples/#webgl_materials_cubemap_dynamic2" target="_blank">Here is one of my favorites</a>, though they achieve the reflection effect a little differently.</p> <p>(You can inspect the Three.js code for this example by clicking on the JS tab in the Codepen demo below.)</p> <p class="codepen" data-default-tab="result" data-embed-version="2" data-height="497" data-pen-title="Reflections" data-slug-hash="eEbmvJ" data-theme-id="dark" data-user="bartuc">See the Pen <a href="https://codepen.io/bartuc/pen/eEbmvJ/">Reflections</a> by Bryan Jones (<a href="https://codepen.io/bartuc">@bartuc</a>) on <a href="https://codepen.io">CodePen</a>.</p> <script async="" src="https://static.codepen.io/assets/embed/ei.js"></script></div> <span class="field field--name-uid field--type-entity-reference field--label-hidden"><span>Bryan Jones</span></span> <span class="field field--name-created field--type-created field--label-hidden">Wed, 08/01/2018 - 07:51</span> <div class="field field--name-field-blog-tags field--type-entity-reference field--label-inline"> <div class="field__label">Tags</div> <div class="field__items"> <div class="field__item"><a href="/tags/threejs" hreflang="en">Three.js</a></div> <div class="field__item"><a href="/tags/webgl" hreflang="en">WebGL</a></div> </div> </div> Wed, 01 Aug 2018 13:51:43 +0000 Bryan Jones 265 at https://www.monarchdigital.com