Moving 3d Object in three JS by BUTTON [closed] - javascript

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed last month.
Improve this question
I'm a beginner at Three JS and need some help with my code. Please, Could you help me for a second?
1| Button1 "increase + 1". After Clicking Button 1, ROOM1 will move to ROOM2 Location and so forth. Room8 will move to ROOM1 position.
2| Button2 "increase + 2". After Clicking Button 2, ROOM1 will move to ROOM3 Location and so forth. Room8 will move to ROOM2 position.
Here's an example of what I mean:
This is my Code in Sandbox.
https://codesandbox.io/s/threejs-code-3rlk8b?file=/src/components/PartOne.js
Please help me.
Thank You So much for Your Precious Time
I'm expecting the solution that how can I use a click button and move my 3d Objects(room)

Using react state changes i did this solution.
First, you have positioned every room at a fixed point. You need to rotate the rooms which means you need to change their positions.
For this, i changed the fixed points in Room components to take it from props.
Example: for room8,
export function Room8({position,...props}) {
const { nodes, materials } = useGLTF('./models/room8.glb')
return (
<group castShadow receiveShadow {...props} dispose={null}>
<group castShadow receiveShadow position={position} rotation={[Math.PI, 0, Math.PI]}>
...your code
</group>
</group>
)
}
do this for all rooms.
Then add those positions as array in your PartOne.js
const positions= useMemo(()=>[
[0,0,0],
[-4, -2.7, 0],
[-0.5, -2.7, 3.6],
[-7.6, -5.5, 0],
[-4.5, -5.5, 3.6],
[-0.4, -5.5, 7.2],
[-7.6, -8.3, 3.55],
[-4, -8.3, 7.2]
]);
In PartOne.js
add a state to have your rooms in order.
const [rooms,setRooms]=useState(
[RoomOne,Room2,Room3,Room4,Room5,Room6,Room7,Room8]
);
add your button and rotate the room array,
<button onClick={()=>{
let arr=[...rooms];
arr.unshift(arr.pop())
console.log("arr::",arr)
setRooms(arr)
}}>Rotate +1</button>
render the state rooms inside canvas,
<Canvas shadows camera={{ fov:70, position: [0,0,30] }} >
<Suspense fallback={null} >
<ambientLight intensity={0.3} />
<directionalLight castShadow receiveShadow intensity={2} position={[80,80,80]} />
{rooms.map((room,roomIndex)=>room({position:positions[roomIndex]}))}
<ContactShadows />
</Suspense>
<OrbitControls enablePan={true} enableZoom={true} enableRotate={true} />
</Canvas>
Adding the sandbox with above changes for your reference,
Code Sandbox

Related

How do I change the initial camera position set up by Canvas in React Three Fibre

I am using React Three Fibre, using the Canvas component it sets up a scene and camera with default parameters:
{ fov: 75, near: 0.1, far: 1000, position: [0, 0, 5] }
I want to change the position parameters in particular, I can change the position like so from inside other components:
useThree(({camera}) => {
});
However I want to have some initial position set either by some dedicated camera component or from inside App.jsx
<CanvasContainer>
<Canvas dpr={window.devicePixelRatio}>
<gridHelper args={[200,50]}/>
<axesHelper args={[5]}/>
<Suspense fallback={null}>
<OrbitControls
target0={[0,0,-5]}
enableZoom={true}
enablePan={true}
enableRotate={true}
zoomSpeed={0.6}
panSpeed={0.5}
rotateSpeed={0.4}
/>
<Earth/>
</Suspense>
</Canvas>
</CanvasContainer>
The orbit controls approach isn't working for me either as the z parameter starts out at 5 regardless, instead of -5
It sounds like you're only trying to set the initial camera position?
In that case, I would recommend you create an explicit declaration for the Three.js camera component outside of the Canvas element. This will decouple the camera object and provide a reference for your initial changes.
let camera = new THREE.PerspectiveCamera (90, 1.5, 0.1, 1000);
You can set the position or change any other settings for this camera object.
let [x, y, z] = [0, 1, 2];
camera.position.set(x, y, z);
Then you can pass the initial camera state down to the Canvas camera parameter.
<Canvas camera={camera}>
<gridHelper args={[200, 50]} />
{/* ... */}
</Canvas>
This seems to work for me, though I'm still learning Three.js, so it may take a few iterations to get it how you want. Hopefully this will point you in the right direction!

Set Konva transform controls to the top of the canvas

I'm trying to transform an image that sits behind another layer holding a png ( the template ). I want to transform the image below this layer but keep it where it is so the above layer stays as the template.
Is it possible to show the transform controls at the top above everything?
<Stage width={480} height={620} onMouseDown={this.handleStageMouseDown}>
{this.props.file ? (
<Layer>
<Uploaded file={this.props.file} />
<TransformerComponent
selectedShapeName={this.state.selectedShapeName}
/>
</Layer>
) : null}
<Layer listening={false}>
<Overlay />
</Layer>
</Stage>
You need to change the structure of your nodes. Just show transformer on top of all other shapes. If you need to disable events for overlayer, you can use listening={false}.
<Stage width={480} height={620} onMouseDown={this.handleStageMouseDown}>
<Layer>
{this.props.file &&
<Uploaded file={this.props.file} />
}
{/* use listening={false} for image in overlay */}
<Overlay/>
<TransformerComponent
selectedShapeName={this.state.selectedShapeName}
/>
</Stage>
If anyone's looking for a solution using hooks, I found that if you have a ref for the Transformer, you can easily call the zIndex() method with an arbitrarily high number when your shape is selected, then redraw it to be safe (it might work without this part)
useEffect(() => {
if (isSelected) {
trRef.current.zIndex(10000);
trRef.current.getLayer().batchDraw();
}
}, [isSelected]);
This seems to render the Transformer above everything else on the canvas, even if the shape itself is obscured.

Unable to animate React-Konva Circle using React-Motion

I am using React-Konva to draw shapes in my app. I have drawn a circle inside another circle and grouped them. Now, what I want to do is that on a button click the circles should animate (move horizontally). Here is my related code:
<Layer>
<Motion style={{a: spring(open ? 400 : x)}}>
{({a}) => {
return(
<div
style={{
WebkitTransform: `translate3d(${a}px, 0, 0)`,
transform: `translate3d(${a}px, 0, 0)`,
}}
>
<Group draggable={true}>
<CircleComponent
x={parseInt(x)}
y={parseInt(y)}
radius={parseInt(radius)}
color={color}
shadowValue={parseInt(shadowValue)}
/>
<CircleComponent
x={parseInt(x)}
y={parseInt(y)}
radius={parseInt(innerRadius)}
color={innerColor}
/>
</Group>
</div>
);}
}
</Motion>
</Layer>
Right now I am getting this error: 'Cannot read property '_idCounter' of undefined'. And this is because I'm introducing a div container inside Layer tag. But if I remove the div container and apply the transform styling to the Group tag, nothing happens. I have read the docs and the Group class doesn't accept any style props. Is there any workaround?
You can't add div as a child of Layer because layer can have only Konva.Group or Konva.Shape as children (not DOM elements).
Group don't style property, but you can use offsetX and offsetY to achieve our effect. Something like:
<Group draggable={true} offsetX={a}>

react how to make SVG container component to manage drawings in low level components

I start learning React to make visualization application with a large amount of data. Also, this is very first time to create a web-based application. Previously, I also don't have much experience in html, css, javascript, etc.
So far, I could be able to draw something in the following way:
...
<svg width={600} height={600}>
<AnyChart data={data} ... />
<AxisX ... />
<AxisY ... />
</svg>
Here, I want to make a React component called ChartContainer that will create a svg with given width and height. I want to use the ChartContainer component to manage information that can be shared among AnyChart, AxisX and AxisY components in the future. Then, any drawing will go into the svg. Thus, the code may look like this:
...
<ChartContainer width={600} height={600}>
<AnyChart data={data} ... />
<AxisX ... />
<AxisY ... />
</ChartContainer>
...
And, ChartContainer contains only render function as following:
render() {
return (
<svg width={600} height={600}></svg>
);
}
Of course, it didn't show me the correct result. In fact, it didn't draw anything. Can anyone help me to solve this issue? Or any reference or tutorial? I searched but so far couldn't find any simple example.
Thanks.

how to make website circular progress bar which which changes starting point? [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 6 years ago.
Improve this question
Check This ImageI want to Make a Circular Progress Bar for my Website.Which Change Its Starting Point With Button Click. For Example, When Button 1 Clicked It Should Rotate From 270 Degrees, When Button 2 Clicked It Should Rotate From 0 degree,When Button 3 clicked It Should Rotate From 90 degrees and When Button 4 Clicked It Should Start from 180 degrees.....
Please Help Me
Thanks In Advance..
Keep in mind first that this is not a clear answer, cause a right one would take me time of coding.
I recently used a open-source library from github. Here is the link.
https://github.com/kottenator/jquery-circle-progress
It is exactly what you want (with some modifications).
Here is the example. https://kottenator.github.io/jquery-circle-progress/
If you see the fourth progress circle, you see that you can set your own starting angle.
Let me here explain how can this achieve having Example four as my reference:
/*
* Example 4:
* - solid color fill
* - custom start angle
* - custom line cap
* - dynamic value set
*/
var c4 = $('.forth.circle');
c4.circleProgress({
startAngle: -Math.PI / 4 * 3,
value: 0.5,
lineCap: 'round',
fill: { color: '#ffa500' }
});
With StartAgle you can set the start value of the progress bar.
You can easy update your code to make the circle over and over again until the content you want load.
See the usage of the library here : https://github.com/kottenator/jquery-circle-progress#usage
See that answer too:
https://stackoverflow.com/a/13371976/4108694

Categories

Resources