background preloader

The Beginner's Guide to three.js

The Beginner's Guide to three.js
In this step-by-step guide, we’re going to create a 3D version of the Treehouse logo using three.js, which is a 3D graphics framework built on top of WebGL. Click and drag your mouse to orbit the camera! You can also use your mousewheel to zoom in and out. See the Demo Download the Code View on CodePen Note: You’ll need the desktop version of either Chrome, Firefox, or Safari. See browser compatibility below. 3D graphics can be difficult, especially 3D in the browser. Even though three.js might look complex at first, it would actually take even more code to write the same thing in pure WebGL, mostly because we’d need to write a rendering engine. Browser Compatibility For this tutorial, you’ll need the desktop version of either Chrome, Firefox, or Safari. Also, if you’re using Safari, you need to enable WebGL first. Open the Preferences menu.Click on the Advanced tab.Click the checkbox that says Show Develop menu in menu bar.Open the Develop menu from the menu bar and select Enable WebGL. Related:  multi-touch rotate zoom

Wavefront OBJ to JSON converter | semi/signal bool operator==(const idx3& other) const { if( this->a == other.a && this->b == other.b && this->c == other.c) { return true; } return false; } int a; int b; int c;}; int v2; int vn2; int vt2; int v3; int vn3; int vt3;}; vec4 parseVertex(const char* line){ char prefix[4]; float x, y, z; sscanf(line, "%s %f %f %f", prefix, &x, &y, &z); return vec4(x,y,z,1);} vec2 parseTexCoord(const char* line){ char prefix[4]; float u, v; sscanf(line, "%s %f %f", prefix, &u, &v); return vec2(u,v);} std::vector<int> readFace(const char* fstr){ std::vector<int> ret; char buf[64]; int bufidx = 0; for(int i=0; i<strlen(fstr); i++) { if(fstr[i] ! if(strlen(buf) > 0) { ret.push_back( atoi(buf) ); } return ret;} tri parseTriFace(const char* line){ char prefix[4]; char p1[64]; char p2[64]; char p3[64]; int v1=0, v2=0, v3=0; int vn1=0, vn2=0, vn3=0; int vt1=0, vt2=0, vt3=0; sscanf(line, "%s %s %s %s", prefix, p1, p2, p3); // parse echo("reading OBJ geometry data..."); while(true) { char buf[2056]; if(fgets(buf, 2056, fp) !

Extensions:2.6/Py/Scripts - BlenderWiki From BlenderWiki Quick Links Release, Contrib and External categories: what are they? Add-on Development Guidelines: if you want to develop add-ons. Add-ons Process: if you want to have your add-on included with Blender. Downloads Bundled Python scripts of the current contributed add-ons repository: Download Snapshot (Add-ons Contrib).There is a guide for correct use of this archive. Categories A script can be: - documentation progress indicators (0% - 100%) three.js/utils/exporters/maya at master · mrdoob/three.js Exporting To Three.js · Learn · Clara.io Clara.io exports two different Three.JS formats: JSONLoader format if you export a single object, and Scene and Object formats that are loaded via the THREE.ObjectLoader if you have none or multiple nodes selected. Unfortunately, all both different formats have the same extension, which makes it a bit tricky. What format is exported from Clara.io depends on whether you have a single mesh selected (JSONLoader) or not (ObjectLoader.) Loading a JSONLoader ThreeJS file If you export a single object, using the export selection command, use the the JSONLoader.load() function: var loader = new THREE.JSONLoader(); loader.load( 'monster.json', function ( geometry, materials ) { var mesh = new THREE.Mesh( geometry, new THREE.MeshFaceMaterial( materials ) ); scene.add( mesh ); }); Loading an Object and Scene ThreeJS file If you exported the whole scene or multiple objects, use the ObjectLoader.load() function:

How to run things locally · mrdoob/three.js Wiki Procedural content If you use just procedural geometries and don't load any textures, webpages should work straight from the file system, just double-click on HTML file in a file manager and it should appear working in the browser (accessed as Content loaded from external files If you load models or textures from external files, due to browsers' "same origin policy" security restrictions, loading from a file system will fail with a security exception. There are two ways how to solve this: Change security for local files in a browser (access page as files from a local server (access page as If you use option 1, be aware that you may open yourself to some vulnerabilities if using the same browser for a regular web surfing. Change local files security policy Safari Enable the develop menu using the preferences panel, under Advanced -> "Show develop menu in menu bar" Chrome Close all running Chrome instances first. Firefox To run:

GitHub - tishmanconstruction/3d-model-viewer: 3d model viewer Importing a Modeled Mesh From Blender to Three.js - Jonathan Petitcolas It has been a very long time since the last Three.js rotating cube post. Better late than never, right? Here is the next part about the import and animation of a more complex mesh created in a modeling software. Yet, as we are not designer (and a fortiori, not 3D designer), we will focus on a not too complicated mesh: the marmelab logo. Modeling Marmelab Logo with Blender We are going to use Blender, a free and open-source 3D modeler. Export a Blender Mesh in JSON for Three.js Now that we got our mesh (you can download it here), let's take a look on how to export it for Three.js. Then, open the File > User preferences and go to the Addons tab. Once saved, your file should look like the following: All required data is here. Importing Mesh From Blender in Three.js Now we got our mesh into an understandable format, let's import it in Three.js. var mesh = null;function initMesh() { var loader = new THREE.JSONLoader(); loader.load('. npm install -g http-server http-server . Rotating a Mesh Woohoo!

WebGL 3D model viewer using three.js – Radiated Pixel var container; var camera, scene, renderer; var mouseX = 0, mouseY = 0; var windowHalfX = window.innerWidth / 2; var windowHalfY = window.innerHeight / 2; init(); animate(); /*** Initialize ***/ function init() { // This <div> will host the canvas for our scene. container = document.createElement( 'div' ); document.body.appendChild( container ); // You can adjust the cameras distance and set the FOV to something // different than 45°. camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 2000 ); camera.position.z = 100; // These variables set the camera behaviour and sensitivity. controls = new THREE.TrackballControls( camera ); controls.rotateSpeed = 5.0; controls.zoomSpeed = 5; controls.panSpeed = 2; controls.noZoom = false; controls.noPan = false; controls.staticMoving = true; controls.dynamicDampingFactor = 0.3; // This is the scene we will add all objects to. scene = new THREE.Scene(); // You can set the color of the ambient light to any value. scene.add( ambient );

Viewing Models from Maya in WebGL with three.js Here is the most basic, stripped down Javascript and HTML to load and view a model exported from Maya with textures in three.js with WebGL. I use this example as a test script to check my models before loading them into other applications. Checkout this link on Stack Overflow if you want more advanced control of loading textures that were exported from a 3D package. Model or load the object you want to view in Maya. You may need to load the objExport plugin by going to Window Settings/Preferences Plug-in Manager and selecting the objExport.bundle Export the model as an Wavefront OBJ file. Run the three.js obj converter Python script on the exported file by using this syntax. python convert_obj_three.py -i chameleon.obj -o chameleon.js Use this HTML/Javascript file to load and animate your model. Change line 71 to reference your model. callbackKey = function(geometry){createScene(geometry, 0, 0, 0, 15, "chameleon.jpg")}; Change line 72 to reference your model.

Getting Started with Three.js Introduction I have used Three.js for some of my experiments, and it does a really great job of abstracting away the headaches of getting going with 3D in the browser. With it you can create cameras, objects, lights, materials and more, and you have a choice of renderer, which means you can decide if you want your scene to be drawn using HTML 5's canvas, WebGL or SVG. And since it's open source you could even get involved with the project. But right now I'll focus on what I've learned by playing with it as an engine, and talk you through some of the basics. For all the awesomeness of Three.js, there can be times where you might struggle. 1. I will assume that you have at least a passing knowledge of 3D, and reasonable proficiency with JavaScript. In our 3D world we will have some of the following, which I will guide you through the process of creating: A scene A renderer A camera An object or two (with materials) 2. Just a quick note on support in the browsers. 3. Not too tricky, really!

Setup a Local Web Server on Windows, Mac, and Linux When developing a website, a web designer needs to be able to see his webpages the same way the end user would. Sometimes simply clicking on and viewing your HTML files in the web browser is enough, but if you want to test dynamic content, you will need to set up a local web server. Doing this is quite simple and can easily be accomplished on Windows, Mac, and Linux. There are many types of web servers available, but we will be using Apache as it is the most common server around, very easy to set up, and compatible with all major operating systems. Apache was designed for Unix-like operating systems. For graphical walkthrough, you can follow this tutorial. Most popular distributions allow you to install Apache without compiling it from source using one simple command. For Debian, Ubuntu, and Ubuntu-based distro: sudo apt-get install apache2 For Red Hat and CentOS Once installed, in your web browser, navigate to either “127.0.0.1” or “localhost.” Change “It Works!”

Displaying 3D Models in Web Pages using Webgl Standards for hardware accelerated 3D on the Internet are starting to become established. This is the first step towards immersive virtual worlds accessible through a browser window and for now, a nice way to display your models. The following tutorial (in four parts) shows how to embed Blender models in web pages using software from x3dom.org, the video tutorial runs through a Blender tutorial from their site. Here are the files created in the tutorial – greenMonkey.zip (not needed, easy to make your own). Here are the files created in the final part of the tutorial, models with textures – nes.zip Blender 2.5 Displaying 3D Models in Web Pages Using Webgl Exporting X3D Files and using X3DOM Part1 This part of the tutorial shows how to embed x3d code in a web page e.g. greenMonkey2.html (sky colour modified). Blender 2.5 Displaying 3D Models in Web Pages Using Webgl Exporting X3D Files and using X3DOM Part 2 Animation in the x3d Format Files used in tutorial – animationExamples.zip Related Links

FinalMesh - WebGL Technical information FinalMesh saves data as html, javascript and data files. Data files are scene tree, geometry, textures and optional shaders. HTML is for sample only, you may insert required parts from it to your own page. Javascript - contain all logic for loading and displayng 3d model. Javasrcipts may be minified or saved as is. Integration Of course you may upload html file as is and everything will work, no changes are required. Internals We use AJAX for loading all data files, so all data downloaded in background and screen is updated when data is ready. After initializing, script loads objects tree and materials definitions. Data Format Geometry is saved in our own format. Scene tree is saved as text-json file. Data size and Geometry Quality Produced data files are quite compact. Binary encoding with lossy compression is right choice for most cases. Generated data files with precomputed per vertex normals are: Including HTML, CSS and Javscript. Customization Coming soon

Related: