I'm currently trying to implement a virtual desktop (browser) viewer for my phone using chrome's API where captureVisibleTab() is used with mutationObservers to listen to changes in the DOM, and these changes are then transmitted via websockets. To display this, I'm attempting to create a simple rectangle and with the browser feed displayed through textures, however, I'm struggling to find documentation within three.js that will dynamically interpret and display new pictures as textures, and I realize that needsUpdate flag will need to be set to true. So I was wondering if anyone had any suggestions on how to approach this? Do I need to perhaps use loaders?
Could you assign the image data to a canvas and use that as a texture?
Something like Is it possible to use a 2d canvas as a texture for a cube?
Related
May I have a 2D layer for UI, Text, Buttons, etc over the 3D scene in ThreeJS?
Ideally something like engine from PixiJS inside ThreeJS? I've seen PixiJS offers some 3D features so why not combine both libraries in something super-powerful? I just do not want to place any HTML Dom elements over WebGL canvas as this will probably slow down performance on Mobile devices.
One way to solve this issue is to implement the UI as screen space sprites like demonstrated in the following official example (check out how the red sprites are rendered):
https://threejs.org/examples/webgl_sprites
The idea is to render them with a separate orthographic camera and an additional call of WebGLRenderer.render(). Besides, instances of THREE.Sprite do support raycasting which is of course useful when implementing interaction.
Building up on Mugen87's answer, you can also use THREE.Shape to make visual containers adapted to the user screen size :
https://threejs.org/docs/#api/en/extras/core/Shape
You can use THREE.Shape to make mesh-based text, is illustrated in this example :
https://threejs.org/examples/?q=text#webgl_geometry_text_shapes
You should also have a look at three-mesh-ui, an add-on for building mesh-based user interface with three.js :
https://github.com/felixmariotto/three-mesh-ui
I'm playing about with three.js and webGL with an attempt to get html objects overlaid on a webGL model.
I intend to use three.js object loaders to render a 3D model, where I can then allow users to overlay HTML DOM objects in 3D space via a custom UI.
I've mainly been using the various different examples in the three.js docs (https://threejs.org/examples/ and https://codepen.io/AdamEDGE/pen/RRjEwz).
In order to allow the user to move the overlaid HTML objects via the UI, I've added the transform controls (https://threejs.org/examples/misc_controls_transform.html).
Things seemed to be going relatively well up to this point, but now I see that the controls are not hoverable or clickable to move the element.
I suspect I'm either missing code or an issue with the camera not aligning correctly, but I'm very new to this so I'm guessing.
I have also experimented with Jerome Etienne's blending tutorials, but on testing that caused other issues and I think may not be worth the trouble for what I'm going for (http://learningthreejs.com/blog/2013/04/30/closing-the-gap-between-html-and-webgl/index.html).
I have created an example that shows the problem (click on an object and the controls should show).
Its a simple webGL torus with two HTML images overlaid and mapped to a Mesh so I can link the controls to the HTML elements which are on a different scene.
https://jsfiddle.net/mattscotty/h5wuq86y/
control = new THREE.TransformControls(camera, glRenderer.domElement);
control.addEventListener('change', render);
The controls show on all the correct places when clicked as expected and I can use the keyboard to change the transform type (again see https://threejs.org/examples/misc_controls_transform.html for how it should work).
As I can't click or hover, I can't hook up to the relevant events.
I'm brand new to this and I'm quite sure I'm missing something obvious, so any help is appreciated.
thanks for reading.
I have a WebGLRenderTarget that I render to. At a subsequent stage in the rendering process I use that texture as input to a shader.
I would like to be able to use that same render target with multiple wrappings/filterings. I have looked some at the internals of three.js, and am not sure that it is possible.
It seems like in webGL I would be able to just bind the same texture multiple times with different parameter settings. I figure I can fork three.js to support a new type of texture that just uses another texture with new parameters, but wanted to see if there was some way I could do this without forking.
Thanks in advance!
I'm looking into making a jigsaw game using html5 canvas and JavaScript. I have the images(pieces) in place, and they are draggable, but I'd like the pieces to act like they are on a grid so that when you click and hold while dragging an image it can only be placed on certain tiles within the 3x3 grid.
A similar question was asked on Stack before but the only response pointed to a drupal module and I'm not using drupal. I found one more similar solution online that uses Asp.net but I'm hoping to solve this all on the front-end, and if I have to use some server-side code I only know PHP.
The renderGrid function for canvas it seems, just draws a grid, but doesn't make it functional for snapping objects to certain places.
Does anyone have clues on how to do this?
Use divide/floor down math when setting coordinates. E.g. to space x for each 24 pixels:
var gridx = Math.floor(x/24)*24;
I'm setting up an experimental html5 website using canvas.
I am drawing 3 circles all next to each other and all I want to know is how to be able to select them.
I'd like them to become links, in a way. Not tags, since everything's gonna be created using javascript.
Something like kinetic JS : http://www.kineticjs.com/, but without the extra library.
I have found some scripts that are using ghost canvas and contexts, but the examples are for dragging and stuff. I only want to be able to select my shape and execute some code.
Thank you!
I am thinking you might want to look into the IsPointInPath() method. It will help you figure out whether or not the mouse clicked on your canvas object.
See Detect mouseover of certain points within an HTML canvas?
if you are talented in xml i suggest you to use canvas + SVG (http://www.w3schools.com/svg/)
And follow this simple example.
http://jsvectoreditor.googlecode.com/svn/trunk/index.html
regarding to SVG and Canvas , the differences are obvious, as you can load bitmaps in SVG, and you can draw lines using the canvas API. However, creating the image may be easier using one technology over the other, depending on whether your graphic is mainly line-based or more image-like.