Pandern

It could be done with film offset. And three.js has this function, but it would be nice to also be able to control it with a puzzle in verge3d.

https://threejs.org/docs/#api/en/cameras/PerspectiveCamera.setViewOffset

Check out kdv’s response in this thread:

Offset camera so object is displayed off to the side

What you see in the viewport on the ring is a texture that was converted to a texture from the text input with the texture from text puzzle. It would be very difficult to reverse this without some sort of OCR or other text recognition.

Nice! The puzzles are now really fast when panning a main tab which has grown embarrassedly huge. Thank you!

edit: deleted: kdv777kdv gave a more correct answer

Hi,

I believe the math is wrong in your solution and it will give an output that is way off. It is 39.37 inches in a meter so the correct math would be like this:

feet = Math.floor(meters * 39.37)/12
remainding inches = (meters * 39.37) mod 12 (use the puzzle remainder of to get the modulo operator)

1 meter in your method returns 3'36" while the correct answer is 3'3.4". The error in the returned value is exponential. 12 meter would return the value 36'431.7" while correct would be 39'4.4"

Se the images how I would do it with puzzles

Just for fun, as I was already talking to chatGPT, I asked it your question, and I am amazed how helpful this AI tool will be. Not to discard the awesome help that kdv77kdv offer here on the forums.

Can you explain to me (like I’m five):
How do I get a div element to show up at click on an 3D element in verge3d?
(being hidden at init, then shown at click)

Please describe all steps – this is the only thing holding me back from building a website with Verge3d.

Sure! Here’s how you can make a div element show up when you click on a 3D element in Verge3D:

First, you will need to create a div element in your HTML code. You can do this by using the <div> tag. Make sure to give your div element an id so you can reference it in your JavaScript code.

Next, you will need to create a 3D element in your Verge3D scene. You can do this using the create_object function in your JavaScript code.

Once you have both the div element and the 3D element, you will need to use JavaScript to hide the div element when the page loads. You can do this by setting the display property of the div element to none.

Now, you will need to add an event listener to the 3D element that listens for a “click” event. When the 3D element is clicked, the event listener will be triggered and will run a function that shows the div element. You can do this by setting the display property of the div element to block.

Finally, you will need to make sure that the div element is positioned properly on the page so that it is visible when it is shown. You can do this using the position property of the div element.

I hope this helps! Let me know if you have any questions.

———————
Can you give me an example?

Certainly! Here is an example of how you can make a div element show up when you click on a 3D element in Verge3D:

<!-- HTML code -->
<div id="myDiv">This is my div element!</div>

<!-- JavaScript code -->
// Create a 3D element
var my3DElement = create_object("box");

// Hide the div element when the page loads
document.getElementById("myDiv").style.display = "none";

// Add an event listener to the 3D element that listens for a "click" event
my3DElement.addEventListener("click", function() {
  // Show the div element when the 3D element is clicked
  document.getElementById("myDiv").style.display = "block";
});

I hope this helps! Let me know if you have any questions.

————
How do i do this with puzzles in verge3d

To show a div element when you click on a 3D element using puzzles in Verge3D, you can follow these steps:

First, you will need to create a div element in your HTML code. You can do this by using the <div> tag. Make sure to give your div element an id so you can reference it in your JavaScript code.

Next, you will need to create a 3D element in your Verge3D scene. You can do this using the create_object function in your JavaScript code.

In the Verge3D puzzle editor, create a “Click” puzzle and connect it to the 3D element you created in step 2.

In the puzzle editor, create a “Set Property” puzzle and connect it to the “Click” puzzle. Set the property you want to change (in this case, the display property of the div element) and the value you want to set it to (in this case, block).

In the puzzle editor, create a “Run JS” puzzle and connect it to the “Click” puzzle. In the JavaScript code for this puzzle, use the document.getElementById function to get a reference to the div element, and set its display property to none. This will hide the div element when the page loads.

Finally, you will need to make sure that the div element is positioned properly on the page so that it is visible when it is shown. You can do this using the position property of the div element.

I hope this helps! Let me know if you have any questions.

The connector (slot-based) puzzle in the advanced menu is now missing. Will this be permanently gone?

I have used it extensively in an app I’m developing, and have to remove them all now to get the puzzles inside them to work.

It works when you load the content of the iframe in main site in a new window:
https://contempomobile.com/wp-content/uploads/verge3d/1020/1%20Caravan%20New.html

So, it might be in the html code where you put the iframe. Others might see the problem, but i wanna just come with a friendly advise: do not include spaces in file name or URL’s, all those %20 is sure not helping you in any way

PAN