I'm looking for a way to have several instances of Unity3D running on one web page to display 3D models and interact with them.
Apparently, it used to be possible when Unity still supported the Web Player, but I can't find anything else regarding possibilities of doing this with the new WebGL.
From what I understand, the current way Unity3D works in WebGL revolves around a canvas HTML tag with a specific class (emscripten) and id (canvas). Moreover, one needs to define a JavaScript module, which acts as a global object initializing the UnityLoader.
I got all of that working quite simply with a unique canvas, but I'm struggling with adding extra canvas.
EDIT : gman suggested iframes, but I wonder if there wouldn't be a cleaner way.
Related
Im trying to experiment with product design using javascript, in which the user can select a shirt, mug, box, book for example, and insert a text and/or an image and move it or rotate it or scale it, then they can apply the changes, and a 3D mockup will be generated.
Is this possible using a Javascript library such as Three.js and/or jQuery, or will i need to actually use another technology other than JS, for example WebGL directly ?
I have not dabbled with javascript before as im usually a backend PHP developer, but this idea has caught my attention and i couldnt find enough resources online about it.
Yes this should definitely be doable with three.js
Worst case you can just manipulate a plane with a texture around the product, however I suspect a better way would be manipulating a texture. This would be quite easy if you don't want to manipulate the image in real-time on the 3d mockup, but likely also simple enough to do in real-time.
I have built a web application in fabric.js where the user adds and draws several graphical elements over an originally blank canvas. My application has arrived to the point in which some of these graphical elements need to be interactively connected (i.e. connected by the user using the mouse). I am trying to design the best way to include these connections in the canvas since, due to aesthetic considerations, drawing lines with fabric might not be best solution for this.
I have run into jsPlumb and found several examples of connections between div and other dom elements. My specific question is: Is it possible to use the jsPlumb functionalities within the objects that fabric.js draws in the canvas. If so, does anyone have an example of this? In case this integration between jsPlumb and fabric.js is not possible, what would be the best way to achieve this?
Many thanks to all in advance.
IMHO, this integration doesn't make much sense.
Everything that fabricjs provides can be done using `jsPlumb', of course animation would require a bit of coding, but it's fairly possible.
Another reason is fabricjs deals with canvas, whereas jsPlumb deals with DOM elements, their integration would be more pain, than coding the actual requirement entirely in jsPlumb.
I have coded an existing (pure) HTML5 Canvas web page consisting of several pages, 'buttons' and 'hotspots'. It is pure canvas javascript code.
Reason why I put 'buttons' and 'hotspots' in quotes is because I have actually implemented those in pure javascript from scratch without using any framework, just created 'classes' for buttons, hotspots, mouse event detection, etc.
These elements are approaching end of its functionality, so I need better elements and especially a scrollbar which will respond well to mouse scrolling.
As web site is redesigned and a lot more new and complex requests are needed to be implemented, it is no more feasible to continue coding in javascript as such, i.e. I need a serious graphical framework.
Between KineticJS and CreateJS/EaselJS I chose the latter.
Now, since this is not an one-page game, but several page long website with somewhat complex navigation relation between pages, can someone advise me what approach should I take?
Containers, just 'pages' with 'buttons' on it, what should be taken for a button, how to handle different pages and machine states in CreateJS/EaselJS?
Did I made the right choice? Is this easier in KineticJS?
Can you share an experience and/or advice, please?
Since EaselJS is "just" a graphical framework, there is no native support for states. However compared to KineticJS I wouldn't say that there is a huge difference for you purpose (someone correct me if I'm wrong here)
I'd use the same approach of using Containers as Pages. For buttons I'd use the ButtonHelper-class: http://www.createjs.com/Docs/EaselJS/classes/ButtonHelper.html
You probably knew most of that already, but I thought I'd still share it, maybe it does help you.
I need to display a runtime-generated image (mostly consisting of nice-looking boxes, lines and text) on a webpage. We're currently using ASP.NET MVC3.
The problem is, I haven't really done web development before, and I have no idea how to go about drawing an arbitary diagram on a webpage. Do I use some sort of javascript? How, and what do I use? Do I generate the image on the server somehow and simply display it? Something else?
I have no idea where to even start, let alone solve the actual problem...
It depends on the target browser.
If you target the most modern browsers, you can use an HTML5 Canvas and draw on it using JavaScript (see http://www.williammalone.com/articles/create-html5-canvas-javascript-drawing-app/).
If you're targeting other browsers (as well), the easiest is probably to generate an image on the server side (GIF/JPG/PNG). Your HTML page then contains an IMG tag with the SRC parameter set to the page that generates and returns the image. You can find an example at this page: http://www.sitepoint.com/generating-asp-net-images-fly/ (this uses ASP.NET to generate the image).
Roy Dictus fairly well described the overall approach you'll want to take. If you decide to target modern browsers and use javascript, I'd suggest you look at Processing.js. It's a javascript port of a popular Java library, and the web page has some code samples to show how you can create both static drawings and animations with some simple code.
I want to create not complex interactive web application. It has some pinboard and user can create many simple objects on this pinboard (e.g. many small circles). After this user can:
move these objects
delete some of them or create new ones
make multiple selection and move/rotate elements of selected group
place members of the selected group in some special order (grid, line, circle, etc)
Zoom in/out pinboard
I think that I can use Flash/Flex or JavaScript/SVG/VML for this purpose. Disadvantage of Flash is that user must have plugin. Minus of JS/SVG/VML is that there aren't such powerfull developing tools as in Flash case, but if we use some library (like http://raphaeljs.com/) application won't require flash plug-in.
I'm finding right tool for this aim. So give me some recommendations, please. Thanks in advance.
I believe that you can achieve your goals without Flash using HTML(5), JavaScript and not the least the Canvas element present in HTML5.
Bottomline is, unless you today require your application to animate a lot of objects with framerates approaching three digits, the above should suffice fine and will also pair you with a prospective Web development platform. I am often sceptical of the new stuff, but HTML5 and Canvas are fairly standardized, patent-free and are being actively adopted.
The only benefit of going with Flash that I can think of is being backed by a rich API that does 2D as well as 3D, and the fact that you can later port your ActionScript code to say, JavaScript when you finally decide to go with HTML+JavaScript instead. Aside from having to perhaps rewrite part of your drawing stack, your ActionScript code will require minimal (syntactic mostly) changes.
I would still advise you to go with my first suggestion, unless you need live (camera) video publishing, 3D, sound editing and few features not available easily outside Flash Player. Which I don't think you will need.
You might want to have a look at existing similar projects, such as SVG Edit (MIT license).