I have an issue. I put properties in my spheres array as opacity/visible etc..
When (in MouseDown event) I want change only one sphere property, but all of them change. I don't understand why...
I describe you my part of code.
for (var i = 0; i < data.nodes.length; i++)
{
//coordinates of spheres and others properties
spheres[i].material.transparent=true;
spheres[i].material.opacity=0.2;
scene.add(spheres[i]);
force.start();
}
spheres[anyone].material.opacity=0.8;
sorry, but my English is not very good.
Thank you in advance!
I suspect it is due to all the spheres using the same material instance, therefore changing one will change them all.
Adding unique materials to each of your spheres will probably overcome your problem.
Related
I need help with my code in processing. It is actually a short and easy code, but I am a beginner in programming, so for me seems everything difficult... :(
My goal is...
To click on an image.
After the mouse click, the image should disappear and show up in a new random position.
Then I should be able to click on the image in the new random position, and it should do the same again: disappear and show up in a new random position. and so on.
I have written some code (see below), but it does not work properly. I would really appreciate it if someone could help me to find out, what is wrong with my code. Thank you very much in advance! :)
Here is my code:
PImage pic;
// Declare variables for the picture
float pic_x;
float pic_y;
float pic_r = 100;
float pic_x_new = random(0, 400);
float pic_y_new = random(0, 400);
boolean mouseOverPic;
void setup(){
size(500,500);
background(0,100,0);
//loading the picture
pic = loadImage("pic.png");
image(pic, pic_x, pic_y, pic_r, pic_r);
}
void draw(){
mouseOverPic = mouseX <= pic.width
&& mouseX >= pic_x
&& mouseY <= pic.height
&& mouseY >= pic_y;
if (mousePressed && mouseOverPic) {
background(100);
image(pic, pic_x_new, pic_y_new, pic_r, pic_r);
}
}
Can you please try to be more specific than saying your code does not work properly? Have you tried debugging your code to narrow your problem down? Which line of code behaves differently from what you expected?
The code you have doesn't make a ton of sense, because you're only ever drawing the image when it's being clicked. That doesn't sound like what you want to do. And your collision detection code is not correct. Try running through your code with some example values to see exactly what it's doing. I've written a tutorial on collision detection in Processing available here.
To fix this, you really need to break your problem down into smaller pieces and take those pieces on one at a time. For example:
Can you create a simple example program that just shows a hard-coded rectangle that changes color if the mouse is inside it?
Can you then make it so the rectangle displays in a random location every time the program is run?
Then can you make it so the rectangle changes location when you click it?
If you get stuck on a specific step, please narrow your problem down and post a MCVE in a new question. Good luck.
I belive you test against pic_x, but uses pic_x_new to draw the image (same with y). You should use the same var to place and test the image.
Another approach would be to make a function to test mouse against the image passing the new values as parameters.
Currently, I am trying to dive deeper into grouped objects or better hierachic ordered objects. However I got a strange issue with the position and the visibility of a object3D and childs of those.
So i have a set of objects, a light source with is the main object so far, and a few spheres for example, which are childs of the the main object.
The problem is, that child objects, which are positioned behind another object ( siblings ) ( from the camera view ) are visible. And all childs objects appear infront of the main object while those actually positioned behind the main object.
Sadly i can't reproduce this in a codePen so i had to take some pictures of the scene, many apologies for that.
In the pictures, the camera rotates clockwise around the light source (main object to the left).
So basically what I am doing is:
mObj = new THREE.Object3D();
mObj.add(new THREE.Mesh(someGeometry, someMaterial);
cObj = new THREE.Object3D();
cObj.add(new THREE.Mesh(someGeometry, someMaterial);
mObj.add(cObj);
scene.add(mObj);
Is that related to the object hierachic order or something else?
The second more negligible issue is, that on one of my pc's, those parts of objects which are dark (because of no lighting), generate those strange black/grey faces, which i cant explain. Maybe Graphicscard/driver or something?
What's the distance between these objects? It could be a floating point rounding issue. I've run into it myself.
If it's so, and you're getting flickering models, you'll need to keep your camera and the active model at the origin, and move the universe around you to keep precision in the important places (near the player).
I am developing an augmented reality project using Three.js and aruco-js. I made my code so that all my 3D Objects are added to the scene (empty) at the beginning but the data gets initially loaded on marker detection.
Now I want to create an interface for changing the objects appearance, starting with the possibility of scaling an object.
So I created an updateObject() function to set the new values like this:
function updateObject(object, rotation, translation)
{
...
...
...
// first method
object.scale.x = 200;
object.scale.y = 200;
object.scale.z = 200;
// second attempt
object.scale.set(300, 300, 300);
};
I tried both of the methods shown above to set the scale of my object but it has no effect to the rendered images I get. The interesting thing is that the values of the objects in my scene3d DOM object are the values I set in my function. But why doesn't it have any impact on the output?
I'm not very familiar with 3d programming in WebGL or Three.js, so if you could give me any hint where the problem might has it's origin I would really appreciate an answer.
FIX:
I took a closer look to the 3D objects I was loading and discovered that they have a children called "mesh" inside another children. By trying to change the scale of only the mesh I found out that it works this way. But I think it looks very ugly:
scene3d.children[visibleModels[0][0]+3].children[0].children[0].scale.set(2, 2, 2);
//visibleModels is a list of the markers/models that should be loaded
This is only a test for one single object to change but at least I found a way to solve this. Is this an ordinary way to change the scale of objects? If you have a better solution or anything to add feel free to contribute.
You could also try to scale the object by changing its matrix using the THREE.Matrix4.makeScale method instead:
object.matrix.makeScale( xScale, yScale, zScale );
Or the even simpler THREE.Matrix4.scale method:
object.matrix.scale( scale );
I'll explain my issue (My English is a little lame sorry).
I have a Player ( Camera) who is able to move in a Unity Scene. In this scene there is some GameObjects. Those GameObjects May be too far for the camera to see. What I want to achieve is to have an UI Image that appear in the direction of every objects. Even if the objects are too far.
Example : The player stand at a position. In front of him there is an object that is far. I want to have a GUI on screen who says "there is an object at 200 m ". If there is an object behind him I dont want anything to appear. But if he turns back, it will appear cause the player is in the direction of the said GameObject.
I really hope I made myself clear. Please tell me if you need any further explanations. Thank You community !
Answering to an old question of myself :
Here's what I did :
if (markIsOp) //Check if it's worth calculating
{
//Calculs the Viewport Position of the object
Vector3 ViewportPosition = Camera.main.WorldToViewportPoint (transform.position);
//Calculs it's Unity Canvas position (O.5f because UI anchor is middle)
Vector2 WorldObject_ScreenPosition = new Vector2 (
((ViewportPosition.x * mainCanvasRect.sizeDelta.x) - (mainCanvasRect.sizeDelta.x * 0.5f)),
((ViewportPosition.y * mainCanvasRect.sizeDelta.y) - (mainCanvasRect.sizeDelta.y * 0.5f)));
//Making sure it's forward (markRect is my UI Element's RectTransform)
if (ViewportPosition.z > 0)
markRect.anchoredPosition = WorldObject_ScreenPosition;
}
Thank you for your responses.
Have a nice one
You could as well use Camera.WorldToScreenPoint to calculate the "UI-Position" of your GameObjects and then calculate the distance using z-Coordinates of Gameobjects and Camera.
Use a raycast from the player to the game object, and calculate the difference.
I have playing a little with clara.io and i want to reproduce an image done with it.
I have searched the web for days looking up to reproduce what they call "Realistic" rendering.
As you can see on the image the six round part have they own shadows on the (one piece) brick from multiple lights sources.
I have no idea how they done that, if it is a simple setup, or a complex shader.
the best i can do is that and i have no idea how to proceed to make and object shadowing itself depending of it's geometry.
any trails ?
actually you need:
renderer.shadowMapEnabled = true;
light.castShadow = true;
object.castShadow = true;
object.receiveShadow = true;
i know its a little counter-intuitive that both the light and the mesh have the same attribute "castShadow", but that's how it works.
also remember to check the near, far, and size of the shadow camera of your light if the shadow doesn't appear or appears incorrectly.
here is an example i made:
http://shahar.thenachts.com/threejs/examples/selfShadow.html
it takes some time to load the model (the model is the floor and walls) and it's textures, so be patient.
to see the code, right click anywhere and choose "inspect element".
ie. Actually it is a very simple setup. The THREE.Object3D has two attributes castShadow and receiveShadow You can achieve the effect you are looking for (ie. self-shadowing) by setting both to true