Develop Reference

Position Mesh inside sphere, making textures fit

I'm trying to position a part of a texture that is being rendered on a portion of a SphereGeometry, inside a full SphereGeometry.
I attach a jsfiddle so you can see what I mean:
https://jsfiddle.net/ggL3uemh/23/
If you open the link, you will see that the smaller texture in the scene is a part of the bigger one.
The bigger one is rendered on a big full sphere.
The smaller one, is rendered on a portion of a sphere.
I want to give the smaller Mesh the proper position, rotation and scale so it can perfectly fit inside the sphere making it look like the smaller one isn't even there.
I suspect the part of the sphere is not correct either...
this.videoCustomGeometry = new THREE.SphereBufferGeometry(500, 64, 64, 1, 1.8, 1, 0.9);
this.videoCustomGeometry.scale( - 1, 1, 1 );
I came close to find the position, using a raycaster and attaching the next code to the mousemove event:
this.raycaster.setFromCamera(this.mouse, this.camera);
var intersects = this.raycaster.intersectObjects([this.pano], false);
And then, I get the exact position where the smaller Mesh should be positioned, but I don't know about the rotation, scale, or if the geometry the smaller Mesh is using is correct.
I'm stuck... thanks in advance!

three.js : Pass text instead of particles into particle cloud

I have a forked three.js codepen experiment that has square particles floating around.
But i'm trying to modify it such that i can pass text (geometry?) into it, replacing the square particles, somewhat like a word / tag cloud. Is this possible?
Link to current codepen:
https://codepen.io/farisk/pen/pWQGxB
Heres what i wish to achieve:
I'm currently not sure where to start.
I was thinking of somehow using a text geometry
var loader = new THREE.FontLoader();
let font = loader.parse(fontJSON);
var geometry = new THREE.TextGeometry("hello", {font: font, size: 120, height: 10, material: 0});
But someone mentioned that this is not the right way? I'm pretty new to three.js / html canvas so any help is appreciated.

Passing in geometry per particle is usually not possible in particle systems because the fact that its the same geometry for each particle is what makes these systems efficient.
To achieve the effect that you are looking for there are basically two options:
Render all texts into a single sprite texture and provide texture coordinates for each particle such that each particle renders the correct text. (Only two dimensional rendering of the text and not scalable for a large amount of texts) See this example.
Make each text object it's own geometry and render them without a particle system. (You loose the performance gain of particle systems)
If you really just want to achieve a tag cloud you could also just use pure JavaScript and transform the position of the text elements according to some calculated 3D positions.

Translate camera in front of the image using Threejs

Hi I am trying to make a UI with THREE.js:
https://jsfiddle.net/jperezmedina/g7c2hn1v/20/
On the UI I put five images. The first image is placed on the position (x: 300, y: -150, z: 100). I need centered the images in fonction of the screen size of the browser. Below you will find a picture of my situation.
The JSFiddle runs but it doesn't seem translate the image in function of the position of the first image. Thanks for the ideas !
EDIT: The solution I want to have is to see the center of the image in the center of the screen while keeping the image in the coordinate (x: 300, y: -150, z: 100). A second image describe it.

Calculating rotated relative positions on 2D plane

For a game project, I need to calculate positions of items on a 2D plane relative to the camera.
Camera can be rotated, and it's coordinates refer to it's center.
In the attached images, a and b are items to display and c is camera.
First image is absolute positions of items in the world.
Second image is the result I'm trying to get.
Please note that rotation doesn't have to be 90 degrees, it can be any valid angle. I just used 90 degrees to keep this example simple.
Normally this is an easy task, but because camera can be rotated, translating to/from the center is not that easy, and it makes this problem complicated.
This is not using canvas element, so using canvas translation or rotation is not an option.
Here is the data used in this example, and some boilerplate code for trying solutions:
var items = {
a: {x: 3, y: 3},
b: {x: 2, y: 4}
};
var camera = {
x: 4, y: 4,
width: 4, height: 4,
rotation: 90
}
boilerplate code on jsfiddle.net
Any help would be appreciated.

You should do these steps to achieve your result
Translate the origin to the C point
Rotate your points by Rotation matrix
Return back the origin to its original position
At this point, your items and camera has been rotated, the only work that still is left, is the clipping by camera rectangle.
As far as I know such a clipping is not very hard and can be done easily.
Hope it helps you

Canvas 2D maze torch effect

I am working on a school project that includes these conditions:
Make maze with using only JS, HTML5 and CSS.
Make a torch effect around the character. You cannot light through walls.
I started making this game with the use of canvas.
I have succeeded to make a torch effect around the character as shown here:
http://people.inf.elte.hu/tunyooo/web2/HTML5-Maze.html
However, I cannot make it NOT to light through walls.
I am fairly sure I should do something like this:
Start a loop in all directions from the current position of the character up until it reaches the view distance OR if the context.getImageData() returns [0,0,0,255]. This way, I could get the character's distance from northern, eastern, western and southern walls.
Then, I could light the maze around the character with a (viewdistance-DistanceFrom*Wall) rectangle.
Unfortunately though, after 15 hours of thinking about this I am running out of ideas how to make this work.
Any tips are appreciated.

A simpler way of doing this is (ps: I get a "forbidden" error on the link provided so i cannot see what you did):
Have a matte version of the maze, a transparent and white image where white represent allowed drawing areas. This matte image should match the maze image in size and placement.
Create an off-screen canvas the size of the torch image
When you need to draw the torch first draw the matte image into the off-screen canvas. Draw it offset so the correct part of the matte is drawn. For example: if the torch will be drawn at position 100, 100 on the maze then draw the matte into the off-screen canvas at -100,-100 - or simply create the canvas the same size as the maze and draw in the matte at 0,0 and the torch at the relative position. More memory is used but simpler to maintain.
Change composite mode to source-in and then draw the torch. Change composite mode back to copy for the next draw.
Now your torch is clipped to fit within the wall. Now simply draw the off-screen canvas to your main canvas instead of the torch.
Note: it's important that the torch is made such as it cannot reach the other side of the wall (diameter size) or it will instead shine "under" the maze walls - this can be solved other ways though by using matte for different zones which is chosen depending on player position (not shown here).
To move in the demo below just move the mouse over the canvas area.
Live demo
function mousemoved(e) {
var rect = canvas.getBoundingClientRect(), // adjust mouse pos.:
x = e.clientX - rect.left - iTorch.width * 0.5, // center of torch
y = e.clientY - rect.top - iTorch.height * 0.5;
octx.drawImage(iMatte, 0, 0); // draw matte to off-screen
octx.globalCompositeOperation = 'source-in'; // change comp mode
octx.drawImage(iTorch, x, y); // clip torch
octx.globalCompositeOperation = 'copy'; // change comp mode for next
ctx.drawImage(iMaze, 0, 0); // redraw maze
ctx.drawImage(ocanvas, 0, 0); // draw clipped torch on top
}
In the demo the torch is of more or less random size, a bit too big in fact - something I made quick and dirty. But try to move within the maze path to see it being clipped. The off-screen canvas is added on the size of the main canvas to show what goes on.
An added bonus is that you could use the same matte for hit-testing.

Make your maze hallways into clipping paths.
Your torch effects will be contained within the clipping paths.
[ Addition to answer based on questioner's comments ]
To create a clipping path from your existing maze image:
Open up your maze image in a Paint program. The mouse cursors X/Y position are usually displayed as you move over the maze image.
Record the top-left and bottom-right of each maze hallway in an array.
var hallways=[];
hallways.push({left:100, y:50, right: 150, bottom: 65}); // for each hallway
Listen for mouse events and determine which hallway the mouse is in.
// hallwayIndex is the index of the hallway the mouse is inside
var hallwayIndex=-1;
// x=mouse's x coordinate, y=mouse's y coordinate
for(var i=0;i<hallways;i++){
var hall=hallways[i];
if(x>=hall.left &&
x<=hall.right &&
y>=hall.top &&
y<=hall.bottom)
{ hallwayIndex=i; }
}
Redraw the maze on the canvas
Create a clipping path for the current hallway:
var width=hall.right-hall.left;
var height=hall.bottom-hall.top;
ctx.beginPath();
ctx.Rect(hall.left,hall.top,width,height);
ctx.clip();
Draw the player+torch into the hallway (the torch will not glow thru the walls).

There is a brilliant article on this topic: http://www.redblobgames.com/articles/visibility/
Doing it accurately like that, however, is a lot of work. If you want to go with a quick and dirty solution, I would suggest the following. Build the world from large blocks (think retro pixels). This makes collision detection simpler too. Now you can consider all points within the torch radius. Walk in a straight line from the character to the point. If you reach the point without hitting a wall, make it bright.
(You could do the same with 1-pixel blocks too, but you might hit performance issues.)