Revamp your Three.js scene by simply clicking a link to switch views

Is there a way to configure a Three.js scene so that clicking on a link can change the scene's view? I assumed it would be simple to create a function to modify the scene and then call that function through a link, but I have been unable to make it work.

This is the function I have:

function loadview($x,$y) {

    group.position.x = $x;
    group.position.y = $y;
    requestAnimationFrame(render);
    webGLRenderer.render(scene, camera);

}

Here is my link:

<a href="#" onclick="loadscene(100,100)">TEST</a>

I have also attempted:

<a href="javascript:loadview(100,100);">TEST</a>

When I include the function inside the render function (for testing purposes), it functions correctly:

    function render() {

        trackballControls.update(60);

        loadview(100,50);

        // render using requestAnimationFrame
        requestAnimationFrame(render);
        webGLRenderer.render(scene, camera);
    }

However, if I call the function outside of the render function, it does not work:

    function render() {

        trackballControls.update(60);

        // render using requestAnimationFrame
        requestAnimationFrame(render);
        webGLRenderer.render(scene, camera);
    }

    loadview(100,50);

Ultimately, my goal is to be able to click a link to change both the object position and the camera position in the scene.

Here is the test page I am currently working on:

Answer №1

The problem lies within the parameters.

One possible solution is:

<a href="#" id="testButton">TEST</a>

Next, in your JavaScript code:

var testButton = document.getElementById('testButton');
testButton.onclick = function () {
    loadScene(100, 100);
};

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Using JavaScript to transfer HTML entities as a function parameter

Is it possible to pass HTML entities as function parameters in JavaScript? I am developing a React application and I need to transmit HTML entities from the parent component to the child component as a property, and then exhibit the character represented ...

How can I implement long polling effectively with jQuery and AJAX?

Currently, I am working on a project that requires live notifications. I considered using socket.io, but due to time constraints, I decided to explore AJAX and jQuery as alternatives. I have outlined my code structure below and I am curious if this appro ...

What is the best way to display data in the User Interface when data is being received through the console in AngularJS?

I have created an HTML file and the corresponding controller logic for this page. I can see the data in the console, but it's not displaying on my UI. <div id="panelDemo14" class="panel panel-default" ng-controller="NoticeController"> < ...

As the Page Expands, Elements Shift into New Positions

I'm currently focused on enhancing the accessibility of my web pages. A challenge I've encountered is that when I expand the width of my page, the elements appear to shift further down the screen. It seems like this issue may be related to settin ...

Can ChatGPT Service Error be resolved?

I tried using chatGPT to help me with my HTML code, but every time I opened it I received an error message saying "Failed to get service" Here is the code that I want to make work: <html> <head></head> <body> <script& ...

When attempting to import Three.js canvas on Github Pages, a 404 error is received

While attempting to host my webpage with a three.js background, I encountered an issue where everything loads properly when hosted locally, but nothing loads when pushed to GitHub pages - only the HTML is visible. I am utilizing Vite to package my code an ...

Debugging the Force-Directed D3 Graph

I stumbled upon a fantastic article that provided a detailed guide on creating a beautiful D3 force layout graph. However, I'm facing some difficulties with the JSON source: The "links" attribute in the author's JSON doesn't seem clear to m ...

Experiencing 429 Too Many Requests error on Angular 7 while attempting to perform multiple file uploads

Whenever I attempt to upload a large number of files simultaneously, I encounter an issue. The API interface only allows for the submission of one file at a time, requiring me to call the service for each individual file. Currently, my code looks like thi ...

The Bootstrap tooltip effectively fades away after displaying text, but it is not positioned correctly above the icon

Having some issues with my tooltip functionality. It seems to display the text on the left side and fades away upon mouseover, but it doesn't show up in a proper tooltip box over the icon as expected. I suspect that there might be a conflict between j ...

Developing versatile form elements with Formik and the Yup library for React and Vite

I'm currently working on a React and Vite project where I'm trying to implement reusable form components using Formik and Yup, but I haven't been able to achieve it yet. I've created a component called <AppInputField/>, which is e ...

Experiencing missing textures while exporting JSON files from Blender to ThreeJS

After exporting from Blender to JSON, the model appears gray in all browsers. I am utilizing the following (github.com/mrdoob/three.js/tree/master/utils/exporters/blender) tool. Attached are the export settings, a screenshot from Chrome, and the JavaScrip ...

Galleria: Execute a JavaScript function whenever a new image is displayed

Looking for guidance in the Galleria JavaScript file on how to trigger a JavaScript function whenever the current picture is changed (previous, next, or by clicking on a thumbnail). Seeking insights from those familiar with Galleria. Any thoughts? ...

Icon for TypeScript absent from npm package listings

Recently, I created a package and uploaded it to the npm repository. The package was displayed with an icon labeled "ts" on the website. https://i.stack.imgur.com/LoY1x.png The accompanying package.json showcased the inclusion of the "ts" icon - https:// ...

Tips for retrieving values from numerous checkboxes sharing the same class using jQuery

Currently, I am struggling with getting the values of all checkboxes that are checked using jquery. My goal is to store these values in an array, but I am encountering difficulties. Can anyone provide me with guidance on how to achieve this? Below is what ...

Using the "i" parameter in a Lodash for loop results in undefined, however, it functions properly with specific values set

My goal is to use Lodash to search for specific integer values in an object and then store some of those values in an array. The integers are variable and come from a separate array, but I am consistently getting undefined as the result. If I manually inp ...

Tips for preventing scrolling on iOS in Chrome or Safari using CSS, JavaScript, or jQuery

I've successfully implemented an input element with a click event listener that triggers a function to make another element visible using the CSS rule "display:block;". The element in question has the following styling rules: .elementExample { d ...

What is the best way to arrange an array of objects in JavaScript by numerical order and then alphabetically?

Possible Duplicate: Sorting objects in an array by a field value in JavaScript I'm looking to sort an array of objects both numerically (by id) and alphabetically (by name). However, the current method I'm using is not giving me the desired ...

Generate HTML elements within an AngularJS directive and establish a click event

Can you show me how to create some DOM elements and add a click event to them using an AngularJS directive? My current approach is as follows: var list = document.createElement("div"); list.classList.add('myList'); for(var i = 0; i < n; i++) ...

Validating dropdown lists with Jquery

Custom Dropdownlist: <div class="col-md-2"> <div class="form-group"> <label for="field-3" class="control-label">Priority</label> <select id="lstpriority" class="custom-selectpicker" data-live-search="true" da ...

When working with a destination module, what is the best method for storing the value that is returned from an

I have a simple function that exports data passed into a function expression. In a separate node module, I am utilizing this imported function by passing in parameters. The function is being called within a router.post method as shown below: Below is the ...