Struggles encountered while trying to set up camera controls in three.js

https://i.sstatic.net/vQdxh.png I've been working on implementing camera navigation functionality in threejs using THREE.OrbitControls. Despite following a tutorial, I'm struggling to get it to function correctly.

You can find my code on jsfiddle here: https://jsfiddle.net/Matty1/uc671jbL/18/

The issue seems to be located at line 18/19 of the javascript:

const controls = new THREE.OrbitControls( camera, renderer.domElement );
controls.update();

If anyone has any advice, I would greatly appreciate it.

javascriptthree.js

Answer №1

It appears that you have imported OrbitControls using a relative path in your fiddle. Consider using the following approach instead:

const scene = new THREE.Scene();
scene.background = new THREE.Color(0x19d7f8);

const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
camera.position.set(0,0,5);

const renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );

window.addEventListener('resize', function(){
    var width = window.innerWidth;
    var height = window.innerHeight;
    renderer.setSize(width, height);
    camera.aspect = width/height;
    camera.updateProjectionMatrix;
} )

const controls = new THREE.OrbitControls( camera, renderer.domElement );

const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
const cube = new THREE.Mesh( geometry, material );
scene.add( cube );

function animate() {
    requestAnimationFrame( animate );
    renderer.render( scene, camera );
}
animate();
body {
   margin: 0;
}
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="62160a10070722524c535056">[email protected]</a>/build/three.js"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d6a2bea4b3b396e6f8e7e4e2">[email protected]</a>/examples/js/controls/OrbitControls.js"></script>

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

Enabling a checkbox grid for exclusive rectangular selections

Apologies for the confusing title, I struggled to come up with something more fitting. Let's say my client needs a square area on their homepage where they can upload images that will be placed within various boxes in a grid. The available box optio ...

javascripthtmlmath

What's the deal with default exports in TypeScript?

I attempted to search for a solution to this issue but was unable to find one. I am currently trying to achieve the following: import { Variables } from './types'; export default: Variables = { type: 'set_variables', variables: { ...

javascripttypescriptexport

Steps for transferring data from one flatlist to another (an array of objects) within the same page featuring identical data:

const DATA = [ { car_name: 'Ford', model_number: '2021 . 68 - 1647', full_tank: false, suggestion: [ { price: '$2.50', type: 'Oil Top up&apos ...

javascriptreactjsjsonreact-nativeflatlist

The Material UI button shifts to a different row

I need help adjusting the spacing between text and a button on my webpage. Currently, they are too close to each other with no space in between. How can I add some space without causing the button to move to the next line? const useStyles = makeStyles((the ...

javascriptcssreactjstypescriptmaterial-ui

In search of a way to verify if a string contains a specific word

I'm currently working on a dynamic tooltip feature. My goal is to detect multiline tooltips by checking if my data includes \r. The code snippet below is an example of how I am trying to analyze my description, but so far, I have been unsuccessfu ...

javascriptjqueryasp.nethtml

Variations in how words are organized within a sentence

Can you help me devise an algorithm to identify all possible combinations of word groupings in a sentence without changing the order of the words? For example, for the sentence "the test case phrase," the various combinations would include: ['the te ...

javascriptarraysmathsetcombinatorics

Angular 13.0 version is experiencing issues when trying to run the "ng serve" command

After installing the npm module, I encountered a problem while using node.js version 14.17.6. I am a beginner in Angular and struggling to find a solution due to not using the latest Angular CLI version. Any help would be greatly appreciated. Thank you in ...

javascriptnode.jsangularnpm

Facebook pages and tabs utilize the [fbjs] JavaScript library

I am struggling to implement tabbing functionality on a Facebook application (business) tabs. Despite having some basic HTML and JS [fbjs], the code I have doesn't seem to be working. I can't figure out what is wrong. <div id="foo">foo di ...

javascriptfacebookfbjs

Steps for incorporating a toggle feature for displaying all or hiding all products on the list

Looking for some guidance: I have a task where I need to display a limited number of products from an array on the page initially. The remaining items should only be visible when the user clicks the "Show All" button. Upon clicking, all items should be rev ...

javascriptangulartypescript

What is the best way to eliminate excess white space on the right side in WordPress for a mobile perspective?

Is there a quick way to identify which element has shifted beyond the border? It seems like there is excess margin. How can I pinpoint the issue? The link to the broken page on mobile is I applied this style * {border: 2px solid red;} and no elements shif ...

javascriptjqueryhtmlcss

JQuery Mobile Navigation with Bootstrap 3 Sidebar on the Go

While using RoR, I encountered a baffling issue. I have created a new navbar with a sidebar that only displays on mobile and not on desktop. The Turbolink is functioning properly. <%= javascript_include_tag 'application', 'data-turboli ...

javascriptjqueryhtmlruby-on-railsturbolinks

Implementing JavaScript validation to alter the background image

I encountered a small issue while working on my project. I was designing a form in HTML using JavaScript, and for the input fields, I decided to use a background image with padding on the left to enhance its appearance. Everything seemed fine until I ran i ...

javascripthtmlcss

Unlocking supplemental JSON data in a Dynatable AJAX query

I have implemented the dynatable.com plugin to generate a table of schools from our database. The table is dynamic and can be filtered, so it does not always display the total number of schools. While we do not include a 'number of pupils' column ...

javascriptjqueryjsonajaxdynatable

What could be the reason for the Angular filter executing twice?

Recently, I created this sample code based on an Angular tutorial I was following. It's pretty simple and helped me learn a lot about the framework. Check out the jsFiddle link here I have a couple of questions regarding this code: How does the ...

javascriptangularjsangularjs-directiveangularjs-scopeangularjs-ng-repeat

How to handle users with disabled Javascript? Considering redirection to alternate sites for users with script disabled?

I've dedicated today to strategizing the best approach for revamping our company's website, taking into consideration that less than 1% of web users have JavaScript disabled. Our management team strongly believes in ensuring that our website rem ...

javascriptjqueryhtmlcss

What is the method for triggering a JavaScript function by clicking a button within a CakePHP application?

<button type="button" id="addleetdata" class="btn btn-primary addleetdata float-left">Add</button> JS File $("#addleetdata").click(function () { console.log("entering into function") startLoading(); console.log("editin ...

javascriptjqueryeventsonclick

Achieve the output of the .json data onto the HTML page utilizing JavaScript

Retrieve data from JSON file and display images in a gallery Successfully displaying the .json output on my HTML page. @Jesuraja - Would love to hear how you achieved this. I am currently facing the same issue with a JSON file containing image locatio ...

javascripthtmljsonimage

Error: There was an issue registering the component as the target container is not recognized as a valid DOM element

Upon executing the React code below, I encountered the following error: import React from 'react'; import ReactDOM from 'react-dom'; ReactDOM.render( <div id="root"> <h1>Hello, world!</h1></div>, document ...

javascriptreactjsdomreact-router

The Best Way to Display Quad Wireframe in Three.js using OBJ Model

I am trying to display the wireframe of OBJ meshes using Three.js. However, Three.js can only render triangles, so I came up with the idea of creating a line for each edge of the model. After parsing the OBJ file and iterating through its vertices and fac ...

javascriptthree.js3d

The Motion of Rotating and Moving Items

Rotating and translating objects can be tricky. While you can successfully perform both actions, the challenge arises when rotating objects as their orientation gets lost -- causing the objects to move in the direction they are facing. if( keyboar ...

javascriptthree.js