Controlling the camera in ThreeJS using buttons

The camera controls on google's lego build website are really impressive and I find them quite enjoyable.

Is there a way to manipulate perspective using buttons?

It would be amazing to have the ability to zoom in/out and rotate to fixed positions.

Currently, I am experimenting with this demo from three.js/examples. Any guidance or suggestions would be greatly appreciated!

<div class="perspective">

  <div class="rotate">
    <div class="build-rotate">
          <a data-rotate="315" href="#rotate315"></a>
          <a data-rotate="45" href="#rotate0"></a>
          <a data-rotate="225" href="#rotate225"></a>
          <a data-rotate="135" href="#rotate135"></a>
          <a class="rotate-free" href="#"></a>
          <img src="https://www.buildwithchrome.com/v2-2-1.376043847035368998/img/build/rotate-indicator.png" style="transform: rotate(77.3493023426611deg);">
    </div>
  </div>

    <a href="#" id="zoomIn" class="zoomin">+</a>

    <a href="#" id="zoomOut" class="zoomout">-</a>

  </div>


Your rewritten text goes here...
Your redesigned CSS goes here...
<div class="scene">
</div>

<div class="perspective">

  <div class="rotate">
    <div class="build-rotate">
          <a data-rotate="315" href="#rotate315"></a>
          <a data-rotate="45" href="#rotate0"></a>
          <a data-rotate="225" href="#rotate225"></a>
          <a data-rotate="135" href="#rotate135"></a>
          <a class="rotate-free" href="#"></a>
          <img src="https://www.buildwithchrome.com/v2-2-1.376043847035368998/img/build/rotate-indicator.png" style="transform: rotate(77.3493023426611deg);">
    </div>
  </div>

    <a href="#" id="zoomIn" class="zoomin">+</a>

    <a href="#" id="zoomOut" class="zoomout">-</a>

  </div>

javascriptthree.js

Answer №1

Here is the information you need. Take a look at this instance:

Essentially, include 

<script src="js/controls/PointerLockControls.js"></script>

After that, something similar to this should function.

controls = new THREE.PointerLockControls( camera );
        scene.add( controls.getObject() );

        var onKeyDown = function ( event ) {

            switch ( event.keyCode ) {

                case 38: // up
                case 87: // w
                    moveForward = true;
                    break;

                case 37: // left
                case 65: // a
                    moveLeft = true; break;

                case 40: // down
                case 83: // s
                    moveBackward = true;
                    break;

                case 39: // right
                case 68: // d
                    moveRight = true;
                    break;

                case 32: // space
                    if ( canJump === true ) velocity.y += 350;
                    canJump = false;
                    break;

            }

        };

        var onKeyUp = function ( event ) {

            switch( event.keyCode ) {

                case 38: // up
                case 87: // w
                    moveForward = false;
                    break;

                case 37: // left
                case 65: // a
                    moveLeft = false;
                    break;

                case 40: // down
                case 83: // s
                    moveBackward = false;
                    break;

                case 39: // right
                case 68: // d
                    moveRight = false;
                    break;

            }

        };

Review the complete code in the example provided, it will be beneficial!

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

Although hiding and showing elements in jQuery is quick, the rendering engine is too sluggish

Experiencing a performance problem when toggling the visibility of all "tr.content" elements within a complex dom structure like this:    <tbody class="collapsible">        <tr class="handler">            <td>Collaps ...

javascriptjqueryhtmlbrowserperformance

My goal is to calculate a precise percentage for each text field and then determine the overall grade

<tr> <td>Knowledge</td> <td><input type="text" name="Knowledge" style="height: 30px; width: 220px;" class="computethis" id="knowledge" Placeholder = "Enter Grade" autocomplete ="off" /></td> </tr> <tr&g ...

javascriptjqueryhtml

Best method for linking asynchronous requests using axios

Is it possible to make an API call using axios based on the response of another initial API call, all within asynchronous functions? I attempted the following approach with await/promise: function fetchUserDetails(userId) { return axios.get( "https://a ...

javascriptvue.jsaxios

Error: JSON-JQUERY cannot retrieve the length of a null property

A problem has arisen with its function and is displaying in the console: Uncaught TypeError: Cannot read property 'length' of null. I am unable to understand why this is happening. function shownameplaylist(){ $.getJSON( "js/json/nameplaylist.js ...

javascriptjqueryjson

Tips for passing a variable containing an image source from Node.js to a Jade file

Below is the code snippet from my index.js file, where I'm using express for routing: var express = require('express'); var router = express.Router(); /* GET home page. */ router.get('/', function(req, res){ var db = req.db; ...

javascriptnode.jsexpresspug

Halt the jQueryUI Slider once a specific difference or margin has been reached

I have a specific margin or distance that needs to be changed from an HTML select option tag dynamically in the future. I have implemented a Range Slider using jQueryUI Slider. My objective: I am looking to halt the sliding action once a specific distance ...

javascriptjqueryhtmlcssjquery-ui

Trouble fetching asynchronous data in Next.js Higher Order Component

Currently, I am in the process of creating a Higher Order Component (HOC) that will fetch user data from my API and then provide props to the wrapped component. This will allow the component to redirect the user based on their role. Although the HOC appea ...

javascriptnode.jsreactjsnext.jsserver-side-rendering

Transferring Information from Angular Interface to NodeJS through a JSON Document

I am currently working on establishing a connection between an AngularJS front end and a NodeJS back end application. The main objective is to manipulate data in a JSON file instead of a traditional database. I have attempted to set up the post method on ...

javascriptangularjsjsonnode.js

Autonomous JQuery Modules

Is it possible to separate the functions in JQuery and use only the ones needed by splitting the file with PHP? By doing this, I aim to improve page speed, save bandwidth, and have more control over the functions used through the backend. Can the functio ...

javascriptphpjquerycompression

The AngularJS component materializes almost instantaneously

Using AngularJS, I have developed an application where a certain section of code is displayed after the page loads for a split second: <div class="col-sm-4" data-ng-repeat="user in users"> <div class="card"> ...

javascripthtmlangularjs

Looking to display a different HTML document in a div - any suggestions?

I am in the process of creating a website that will feature four tiles on the front page. Once a tile is clicked, I would like the content to appear in a window that has a slight transparency to allow the main page to show through. So far, I have managed ...

phpjavascriptjqueryhtmlajax

Upgrade the WordPress light editor to the advanced version

After developing a script to upgrade the WordPress editor on a specific page from light mode to Advanced once a user clicks the Unlock button and confirms their desire to make the switch, an issue arose. Despite deducting 5 coins from the user's balan ...

javascriptphpjqueryajaxwordpress

Display the loading percentage during the data retrieval process using AJAX

Is there a way to display the progress percentage while Ajax is fetching data in the background? I am wondering if it is achievable with jquery and if there are any specific plugins designed for this purpose. ...

javascriptjqueryajax

Attempting to refresh MongoDB using the Angular framework

I am trying to update an element within an array in a MongoDB Schema using Mongoose for data manipulation. The field in my schema that needs updating currently appears like this: players: [ { type : Schema.ObjectId, ref: 'User' } ], I am wo ...

javascriptangularjsnode.jsmongodbmeanjs

Testing the functionality of an Express Rest API with Mocha unit tests

I have just started diving into the world of unit testing. While I've been successful in running simple tests such as "adding two numbers and checking if the result is greater than 0", my goal now is to develop a REST API using Test-Driven Development ...

javascriptnode.jsexpressmocha.jstdd

Error message: The attempted import failed because ' is not exported from the module

I am facing an issue with resolving my problem. In a file named lama.d.ts, I have declared a class using the following code: export declare class lama { // code here } After that, I tried to import this class in another file within the same folder ...

javascriptreactjstypescriptclassreact-typescript

What are the factors that lead to the rendering of an Angular component?

Efficiency is key in maximizing performance with single page applications. Take, for example, React, where any change in state or props within a component triggers a re-execution, re-evaluation, and ultimately, a re-rendering of that component. With that ...

javascriptreactjsangulartypescript

Geocomplete Plugin without Google Branding

I've implemented the jQuery Geocomplete Library. This is what I have accomplished so far- $(function() { $("#find_product_location").geocomplete( { map: "#product_location", mapOptions: { mapTypeId : 'roadmap',//roadmap, satellite,hybrid ...

javascriptjquerygoogle-mapsgoogle-maps-api-3geocomplete

Is there a way to modify the color of my question post-submission?

Within my code, there are numerous queries that need to be addressed. Upon submission, I desire to alter the color of each question to green if the response is correct, or red if it is incorrect. document.getElementById("submit-button").addEventLi ...

javascripthtmlcsscolors

Uploading multiple files simultaneously with AngularJS through FTP

I've been attempting to utilize AngularJS for uploading multiple files, but for some reason, the values are not being stored in the model filestore. HTML Code: <div ng-app="myApp"> <div ng-repeat="file in filelist"> <lab ...

javascriptangularjs