Code is a little modified version of webgl interactive draggable cubes
5 meshes is created with new THREE.Mesh (red) and 5 with new THREE.SceneUtils.createMultiMaterialObject (blue)
[sorry, example deleted]
Please try to drag them, red and blue cubes moves differently.
Red cube moving is related to the mouse (screen) if I drag one cube to the left, cube moves to the left.
Blue cube moving is related to the ??rotated coordinate system (or camera rotation)?? , if i drag one cube to the left, cube can move up or down and faster than mouse.
I assume it is because createMultiMaterialObject is a group of THREE.Mesh with the same geometry and different materials. Anyway I can't see a reason. Why they move differently?
How to make red and blue cubes behave equally onDocumentMouseMove?
You really need to explain the "move differently" part. Both in Firefox and Chrome I see them rotating, translating and scaling as expected.
Related
enter image description here
Hi, I am new to ThreeJS. I am looking for a solution for a long time, didn’t find out any, so posting here. Basically I have two points in my scene, marking yellow and red and I have a sprite object. I can place the Sprite Object at any given point (either red or yellow). But I need to place/position my sprite object in such a way the its one end is at yellow point and another end is at red point. Now both of the points are dynamically updating continuously in animation loop. So when I set my camera to look at the red point is is always at the center of the screen, and yellow point moves around. Similarly if I look at yellow point, the red point moves around. Now I need to place one end of my sprite either at red or yellow point and rotate the sprite in such a way that its other end meets at yellow point. How can I do that? The distance between red and yellow point is not also same always, so I need to adjust the size of my sprite as well to meet the other point.
N.B. by one end i meant the edge of the handle of the shovel, by another end i meant the edge of the shovel.
I can put my sprite at any given point (which is the center of rotation of the sprite). So i have modified the image (texture of sprite is an image) in such a way that its edge of the handle is at the center of the sprite. SO when I put the sprite on the scene, the handle of the shovel is at the red point. I then tries to rotate the sprite so that i can move the other end (the shovel edge) at the yellow point. The rotation doesn't work when the yellow point is over the red point, however when the yellow point is below right of the red point it seems work (coincident may be). Plus the distance between red and yellow point is not always same, as they both update in the animation loop. So i need to also increase/decrease the sprite size so the bottom end of the shovel meets at yellow point.
I try to make a wall with a window in it. I draw the corners of the wall and the corners of the window after, from the bottom left, counter clockwise. Then I manipulate the 4 vertex of the window via javascript and update the position attribute of the geometry accordingly. The window moves correctly but the textures are not. Any help would be appreciated.
Here is what I do after calculating the new positions array:
this.geometry.setAttribute("position", new THREE.BufferAttribute(positions, 3));
Here is the full demo: https://jsfiddle.net/wg1phnz6/45/
I'm trying to make a spherical skybox since I think that would best fit the space scene I'm making. I'm running across two issues:
I can get the skybox to work, but for some reason a sphere within my giant sphere I've made appears. I don't think its a real Object3D sphere, I have the feeling its a graphical glitch of some sort.
If I make the sphere too big (Like 1800 for the radius) it just disappears and stops working. If I set it's side to THREE.DoubleSide, I can zoom out of the scene and still see its outer side of the sphere, but inside, regardless of DoubleSide or BackSide, its invisible when 1800 or bigger
let skyboxGeom = new SphereGeometry(900, 128, 128)
let skyboxMat = new THREE.MeshPhongMaterial({map: spaceTexture});
skyboxMat.side = THREE.BackSide
let skybox = new THREE.Mesh(skyboxGeom, skyboxMat);
skybox.position.set(0,0,0)
mainScene.add(skybox)
Here is a picture of what it looks like:
The colorful ball is correct, the inner black sphere is what appears incorrectly. If I zoom in enough to the scene, the black ball shrinks and gets smaller and smaller until it disappears entirely, but I would have to zoom way too far into my scene that none of my things would show if I tried to do this to make the black ball go away
If it helps, I am using a PerspectiveCamera, and am exploring the scene using OrbitControls
I am new in Unity and I have a question, I have a sphere(player) and 4 cubes, two is red and two is blue (which they are aligned with each other), and there is one black cube in the end, what I want is that after crossing that black cube is two change the color to red or blue, and I want if the sphere(player) is red it could walk in the red cube but when it touches the blue cube it stops, and the same thing with the red, so anyone can help??!!, I really need help because this is the last part of my project.....
Regards.
Osama
You need to create an empty game object with a 3D Collider on it
check the checkbox of the collider so the collider becomes a trigger
write a script with one or more of these functions depending on the behavior you want
https://docs.unity3d.com/ScriptReference/Collider.OnTriggerEnter.html
https://docs.unity3d.com/ScriptReference/Collider.OnTriggerExit.html
Then you need a reference to your four other cubes and change their color.
https://docs.unity3d.com/ScriptReference/Material.SetColor.html
EDIT:
Generally we are here to help you and not to do the work for you. I highly suggest you follow some tutorials on how to script in unity.
If you want to "walk through" gameobjects you will need to enable and disable the collider or the whole object based on trigger collision.
https://docs.unity3d.com/ScriptReference/GameObject.SetActive.html
https://learn.unity.com/tutorial/enabling-and-disabling-components#
I have an existing WebGL canvas that is being rendered without using ThreeJS, and is for all intents and purposes a black box to me, apart from two facts: (1) I have access to the underlying webgl canvas DOM element and can position and resize it on the screen, and (2) I know the properties of the camera for the scene, and get updates on every render cycle for that camera.
The problem I need to solve can be simplified to the following: I need to have my own separate ThreeJS canvas that displays both the black box canvas data, and then elements that I draw, like a cube for a simple example. I can already easily overlay the two canvases, set the transparency on my canvas for everything but the cube, and then align the two with the camera events from the black box library. This works quite well.
The issue with this is that when I draw my objects, like a cube, they don't respect the depth buffer of the black box canvas. So I might have a cube that is properly aligned with the backing scene and movements of the scene, but then it isn't properly masked when something in the black box canvas is closer to the camera than the cube. My thought is that I need to solve this in one of two ways: (1) I can have my renderer write to the other canvas with autoClear = false and preserveDrawingBuffer = true, or (2) I can somehow copy the depth buffer from the black box canvas into my canvas, and then set up my renderer so that it respects the new depth buffer.
I haven't been successful with either approach yet, so I'm wondering if this is possible, and if so which of the above approaches, or what other approach, can solve this problem?
--Edit--
See https://jsfiddle.net/zdxyoajb/ for angular/typescript implementation of the above attempts. In the following animate loop, if I comment out the overlayRenderer lines, the below sphere will be red and offset from the center (as it should be), but if I don't comment the lines, I get the below image. I also get the following error:
WebGL: INVALID_OPERATION: uniformMatrix4fv: location is not from current program
animate() {
requestAnimationFrame(() => this.animate());
this.blackBoxCamera.copy(this.overlayCamera);
this.blackBoxRenderer.render(this.blackBoxScene, this.blackBoxCamera);
this.overlayRenderer.state.reset();
this.overlayRenderer.render(this.overlayScene, this.overlayCamera);
}