The orbit controller in three.js seems to be malfunctioning when trying to navigate a static scene with an obj model

I'm having trouble with the orbit controller in my scene and here is the code I have:

import * as THREE from 'three'
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
import { MTLLoader } from 'three/examples/jsm/loaders/MTLLoader'
import { OBJLoader } from 'three/examples/jsm/loaders/OBJLoader'
import { CSS2DRenderer, CSS2DObject } from 'three/examples/jsm/renderers/CSS2DRenderer'

function addCamera() {
    const camera = new THREE.PerspectiveCamera(
        90,
        window.innerWidth / window.innerHeight,
        0.1,
        1000
    )
    // Additional camera configuration...
    return camera
}

function addLight(scene: THREE.Scene) {
    // Light setup...
    return scene
}

// More code for setting up the scene...

const controls = new OrbitControls(camera, renderer.domElement)
controls.target.set(10.0, 0.0, 0.0)

// Loading models...

window.addEventListener('resize', onWindowResize)

function onWindowResize() {
    // Adjusting camera aspect ratio and updating renderer size...
}

function animate() {
    // Animation loop...
}

function render() {
    // Rendering the scene...
}
animate()

Is there anyone who can assist me with this issue?

Answer №1

The camera needs to be added to the scene for it to work properly. Follow these steps to resolve the issue. I hope this solution helps!

...
camera = createNewCamera();
scene.addToScene(camera);
...

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

"Angular EventEmitter fails to return specified object, resulting in undefined

As I work on a school project, I've encountered a hurdle due to my lack of experience with Angular. My left-nav component includes multiple checkbox selections, and upon a user selecting one, an API call is made to retrieve all values for a specific " ...

Is it possible to verify if the @Output is correctly wired up within an Angular component?

When working with Angular and TypeScript, it is possible to access the bound @Input values in the ngOnInit method of a component. However, there isn't a straightforward way to check if a particular @Output event binding has been set up on the componen ...

eslint warning: the use of '$localize' is flagged as an "Unsafe assignment of an `any` value"

When using $localize, eslint detects errors and returns two specific ones: Unsafe assignment of an 'any' value and Unsafe any typed template tag. It's quite strange that I seem to be the only one facing this issue while working on the proje ...

To collapse a div in an HTML Angular environment, the button must be clicked twice

A series of divs in my code are currently grouped together with expand and collapse functionality. It works well, except for the fact that I have to click a button twice in order to open another div. Initially, the first click only collapses the first div. ...

Creating intricate SVG shapes using React Three Fiber's extrusion feature

Explore how to extrude an SVG with React Three Fiber by following this innovative CodeSandbox example created by rabelais88. The process involves converting the 2D SVG paths into 3D shapes using React Three Fiber. However, when attempting the same process ...

Error: The AppModule encountered a NullInjectorError with resolve in a R3InjectorError

I encountered a strange error in my Angular project that seems to be related to the App Module. The error message does not provide a specific location in the code where it occurred. The exact error is as follows: ERROR Error: Uncaught (in promise): NullInj ...

Understanding the Camera's View in Three.js

I am currently developing a game using html5 and THREE.js, where I have implemented a camera that rotates with the euler order of 'YXZ'. This setup allows the camera to rotate up, down, left, and right – simulating a first person view experien ...

Tips for incorporating SectionList sections in React Native using an array

I am working with an array of objects named movies (const movies = movie[]). Each movie object includes properties like name, description, date and duration. movie: { name: string; description: string; date: Date; duration: number } My ...

Using references to pass variables in TypeScript [Angular 8]

I have several variables within the html of this component that are assigned their values by the typescript file. The declaration in the html is as follows: <h1>{{myproperty1}}<\h1> <h1>{{myproperty2}}<\h1> <h1>{{myp ...

Divide a given number of elements within an array of arrays

Presented below is an array: [ { "id": "34285952", "labs": [ { "id": "13399-17", "location": "Gambia", "edge": ["5062-4058-8562-294 ...

Diverse Selection of Font Awesome Icons

In my React project with TypeScript, I have a header component that accepts an Icon name as prop and then renders it. I am trying to figure out the best way to ensure that the icon prop type matches one of the existing FontAwesome Icons. import { FontAwe ...

Contrasting Dependency Injection with Exporting Class Instances

I've been diving into the world of TypeScript and working on enhancing my skills as a web developer. One project I'm currently focused on is a simple ToDo app, which you can find here: https://github.com/ludersGabriel/toDo/tree/dev/backend. My q ...

Caution: The attribute name `data-*` is not recognized as valid

I am attempting to import an SVG file in my NEXT.js project using the babel-plugin-inline-react-svg. I have followed all the instructions and everything is functioning perfectly. // .babelrc { "presets": ["next/babel"], "plugin ...

Encountering issues trying to integrate TypeScript into a React project

During my attempt to integrate TypeScript into an existing React project, I encountered an error upon restarting the server using npm start. I'm following the guidelines outlined in this documentation, but I keep receiving an error message: https:// ...

What steps are needed to generate an RSS feed from an Angular application?

I have a website built with Angular (version 12) using the Angular CLI, and I am looking to generate an RSS feed. Instead of serving HTML content, I want the application to output RSS XML for a specific route like /rss. While I plan on utilizing the rss p ...

Is it possible to obtain a reference that can call an operator?

Is it possible to obtain a reference to an operator (like ===) in TypeScript? The reason behind this question is the following function: function dedup<T>(values: T[], equals: (a: T, b: T) => boolean): T[] { return values.reduce<T[]>((pre ...

Change the format of the array from the initial array to the new array structure

I have a multi dimensional array that I need to convert into the array2 structure. I've tried various methods, but all of them have resulted in bulky code and lots of iteration. Is there an easier way to accomplish this task? I am new to Angular and ...

Having trouble typing computed values in Vue Composition API with TypeScript?

I'm attempting to obtain a computed value using the composition API in vue, and here is the code I am working with: setup() { const store = useStore(); const spaUrls = inject<SpaUrls>('spaUrls'); const azureAd = inject<AzureAd ...

Discover Three JS Material to visualize what's beyond the current div

Is it possible to create a material that allows an object in a scene to show what is behind the renderer's DOM element wherever it is visible? In other words, how can I modify the object "?" below so that the viewer sees "D" instead of "C" when "B" i ...

Creating transparency effect on objects using Physical Material in THREE.js

Is there a way to showcase a translucent PNG texture behind a transparent Physical Material in THREE.js? It seems like currently, THREE.js does not display the translucent texture through the Physical Material. I discovered that when I set transparent: fa ...