Imagine a simple singular geometry object scene being duplicated in 2 canvas's / div's.
Is this possible?
Any ideas would be appreciated please!
I am relatively new to 3JS and I am working on a project where I want to use 1 camera, 1 scene, and 1 renderer and I want to have 1 canvas shown in 2 different DIVS. Essentially, I have a 3d geometry model that I want to be displayed twice in two different divs. Such that I have the 3d model displayed at the top of the page, and the same 3d model shown again at the bottom of the page.
Is this possible? I've already tried creating a new canvas, scene, and renderer to copy functions, but that simply breaks both canvas's. I tried to make a canvas2 and I did not have any luck going down that route.
I also can not seem to find an answer to this problem anywhere on google.
Related
Problem
I'm creating a 3d scene using a-frame (https://aframe.io) and I need some sort of way to mirror an html div onto a plane inside a-frame. For example, lets say that there is a div with some code where I can draw on it similar a whiteboard on the bottom left corner of the screen. Everything that I draw on the whiteboard should be mirrored to the a-frame plane. That way I should be able to see my whiteboard drawing in my a-frame scene.
What I've tried
I've tried using two components the a-frame html embed component (https://github.com/supereggbert/aframe-htmlembed-component) and the a-frame shader component (https://github.com/mayognaise/aframe-html-shader) and both work for displaying html in my scene on a 2d plane however the 2d plane in my scene doesn't mirror the whiteboard and doesn't update. That means when I draw something on my whiteboard, instead of mirroring onto 2d plane and showing what I've drawn in vr, there is just a whiteboard with nothing drawn on it.
Problem I need solved and the ideal solution
I need to be able to create a div in html with a whiteboard or other code on it and have the same html be displayed on a 2d plane in my scene. The 2d html on the plane should update meaning if I draw the letter "a" on my whiteboard, the letter a will appear on the 2d plane in my scene. As long as there is a div where I am able to put my 2d html (my whiteboard) and the div mirrors in vr, that would be the ideal solution. Is there some code that could accomplish this?
Am I missing something with the two component I've tried that allow me to accomplish this? (Two components: https://github.com/supereggbert/aframe-htmlembed-component and https://github.com/mayognaise/aframe-html-shader) Or maybe a different A-frame component?
Ideally I am seeking the code for a component that allows me to mirror a div onto a 3d plane in my scene, or recommend a component that allows me to display interactable content on a 2d div.
Since your whiteboard uses canvas, you can make use of the aframe canvas component.
Then at the end of your handleUpdate() function you want to call the component's updateTexture() function to update your aframe texture to the current state of the whiteboard.
I have created multiple 3D Cubes in a HTML5 Canvas .
I was trying to handle a click event on the 3D cube so that i can know which cube got clicked.
To create the cube I used processingJS.
It worked well but was not able to get the Click position.
I read about Paper JS which creates a shape and stores it in a object.
Is it possible to create 3D things with Paper JS.
Or Is there anyway i can get which cube got clicked through ProcessingJS.
please share whether there are any other ways to do this.
Thanks in advance.
Paper.js deals with 2D vector graphics.
While in theory you can represent a cube if you want to, using skewed squares for example, it will take a lot of effort and a lot of time to just create 1 cube.
You are much better of using a 3D library, e.g - Three.js.
Here is an already cooked up example using raycasting to detect the clicks on a side of the cube: http://mrdoob.github.io/three.js/examples/canvas_interactive_cubes.html
I'm new to Three.js and currently trying to develop a web-based 3d object viewer/editor.
I referred to thingiview.js and able develop functions to view,rotate,and zoom in & out. And I added a drag and droppable function to the canvas. Currently, only ".stl" (lowercase) file type works for this function.
My intention is to add another .stl file to add on the canvas and display. I have thought if it is possible to
- make an array
- store the dropped items(.stl) files to the array
- display all the available items from the array on the canvas
I'm not very advanced in JavaScript language and still learning to improve while developing this function. Please advise if I am on the right track or if there is any possible ways to achieve this. Or, possibly if there is any resources I could read up for more information.
Thank you in advance.
You say you are using Three.js. I think in three you could do things like:
mesh = new THREE.Mesh(sphere, material);
scene.add( mesh );
This will basically only create a sphere and put into scene tho, but you do the same with loaders. scene.add(whatever) to display in scene. To make it easier to access objects later for position change and other, you can push them into a array like so:
var objectArray;
(inside loader)
scene.add( mesh );
objectArray.push(mesh);
Then you can loop the array later to check for instances and do positioning and such.
Hope this helps you a bit.
So I am working on a project that uses multiple different cameras to renderer the scene to different canvases. Essentially I am doing this example:
http://threejs.org/examples/webgl_multiple_canvases_grid.html
The problem I have found with doing this is that the clipping plane for different scenes does weird things at the edges. With Big Objects its fine, as the example shows, but with smaller, some get clipped on the edge. I've made an example showing the problem with this below.
http://tinyurl.com/pjstjjd
I was wondering if there is anyway to fix this. A few different ways I was going to try and explore it are as follows:
try and overlap the reneders a bit so that the clipping plane is wider.
See if there is any way to turn off clipping
cry myself to sleep.
Is there something simple I'm missing, or will I have to dig in deeper.
Thank you very much in advance for your time!
Isaac
The problem is you're creating 4 App objects and in each one you create different random spheres. So your 4 views have different sets of spheres in different places. If you want the views to match you have to put the objects in the same places in each App.
I pasted this code at line 129 in your sample
var randomSeed_ = 0;
var RANDOM_RANGE_ = Math.pow(2, 32);
Math.random = function() {
return (randomSeed_ =
(134775813 * randomSeed_ + 1) %
RANDOM_RANGE_) / RANDOM_RANGE_;
};
Which is a random function that returns the same values for each App since randomSeed_ starts at 0 in each app.
It would help to know what you're ultimately trying to achieve. The Three.JS sample you linked to is intended to show how to spread rendering across multiple monitors on 4 different machines in a grid.
This one shows if the monitors are different sizes and not in a grid. This one shows if the monitors are in a circle or semi circle. For example Google's Liquid Galaxy.
This one shows multiple views in a single canvas although at the time of writing this answer it looks like it needs some updating.
This one shows drawing using one large canvas and place holder elements for where to draw
Can anybody help me with three.js?
I need to draw background, something, like a THREE.Sprite, but it neet to be UNDER any 3d object, that will draw later. I have a camera, that can be move only on Z axis.
I tryed to use:
cube mapping shader - PROBLEM: artefacts with shadow planes, it's unstable draw
THREE.Sprite that dublicate camera moving - PROBLEM: artefacts with shadow plane - it have a edge highlighting OR drawing only other spirtes without objects.
HTML DOM Background - PROBLEM: big and ugly aliasing in models.
What can I try more? Thanks!
You could maybe try drawing in several passes, i.e. making a first render of the background scene to a buffer, and then a second one over the first "buffer". Maybe using the buffer as background (painting it in 2D with an orthographic projection, and disabling depth buffer writes in that pass).
I haven't tried it myself with three.js, but that's how I'd do that with "traditional" OpenGL.
If you want a "3d" background i.e. something that will follow the rotation of your camera, but not react to the movement (be infinitely far), then the only way to do it is with a cubemap.
The other solution is a environment dome - a fully 3d object.
If you want a static background, then you should be able todo just a html background, i'm not sure why this would fail and what 'aliasing in models' you are talking about.