Change to the camera view after the three js has finished loading

Is there a way to switch to a camera once an object with a perspective camera is loaded? I have an avatar object that contains a perspective camera and I want to use it either directly upon loading or switch to it afterwards. I've tried using orbit controls but haven't had success:

const fAddSc = function ( obj ) {
      // Add the loaded object to the scene
      let cam = obj.getObjectByName("PerspectiveCamera 1");


      camera = new THREE.PerspectiveCamera(cam.fov, window.innerWidth / window.innerHeight, cam.near, cam.far);
      camera.position.copy(cam.position);
      camera.rotation.copy(cam.rotation);


      obj.position.x=0;
      obj.position.z=-4;
      obj.position.y=0.5;
      scene.add(obj);

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

      console.log(controls);
      console.log(scene.activeCamera);
    };

I am using:

import * as THREE from 'three'
import OrbitControls from 'orbit-controls-es6';

Any help would be appreciated, thank you!

Answer №1

Just had a breakthrough and uncovered the solution to my issue, but unfortunately, it's a bit messy.

function addCharacterScene( object ) {
        let group = new THREE.Group();
        camera.position.set(0,1,-4);
        camera.lookAt(0,0,0);
        object.position.x = 0;
        object.position.z = -4;
        object.position.y = 0.5;
        group.add(object, camera);
        scene.add(group);
    };

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

Properly maintaining child processes created with child_process.spawn() in node.js

Check out this example code: #!/usr/bin/env node "use strict"; var child_process = require('child_process'); var x = child_process.spawn('sleep', [100],); throw new Error("failure"); This code spawns a child process and immediately ...

Is it acceptable to initiate an import with a forward slash when importing from the root directory in Next.js?

I've noticed that this import works without any issues, but I couldn't find official documentation confirming its validity: // instead of using a complex nested import like this import { myUtil } from '../../../../../lib/utils' // this ...

discord.js-commando encountered an error: unable to find the fetchUser function

After successfully coding a discord bot on my personal computer using nodejs and discord.js-commando, I decided to transfer it to my Raspberry Pi 3b. I installed the latest version of nodejs, used scp to transfer the files, but encountered an error when tr ...

The texture appearance becomes unusual when using a ThreeJS point light

I utilized ThreeJS, specifically React Three Fiber, to construct a 3D Canvas. After adding a glb model, point light, and ambient light, the outcome was disappointing. https://i.sstatic.net/6vHaOKBM.png Why does the texture appear so jagged? Could it be ...

Discovering Ajax-powered websites Here are some tips on identifying websites

My goal is to determine if a webpage makes AJAX calls. If the webpage is AJAX-based, I will wait for a few seconds to retrieve the content. If it's not AJAX-based, then I won't wait. I attempted the code below, but it didn't yield any resul ...

Incorporating Javascript into HTML

I have developed a script to randomly change the size of an element, but I am struggling to understand how to incorporate it using HTML or iframe code for randomization. <script type="text/javascript"> var banner1 = ["728", "90"]; var banne ...

A guide on renewing authentication tokens in the Nestjs framework

import { ExtractJwt, Strategy } from 'passport-jwt'; import { AuthService } from './auth.service'; import { PassportStrategy } from '@nestjs/passport'; import { Injectable, UnauthorizedException } from '@nestjs/common&apo ...

challenges encountered when saving a getjson request as a variable

I am experiencing difficulties in retrieving a variable from a getJSON() request. The issue lies within the following three functions: function getPcLatitude() { // onchange var funcid = "get_postcode_latitude"; var postcode = parseInt($('#i ...

Issues with rendering TextGeometry in Three.js

Despite my attempts to replicate the demo code, I am unable to successfully render TextGeometry. The necessary font file is correctly uploaded on the server. var loader = new THREE.FontLoader(); loader.load( 'fonts/open-sans-regular.js' ...

What could be causing my insertRow function to inject empty cells into my table?

I am facing an issue with adding the results of a fetch request into a table as a new row. Strangely, when I click the button to trigger this function for the first time, it adds an empty row instead of the desired data. However, on subsequent clicks, the ...

Issue with showing error messages in view when using ejs templates

I am a beginner with node.js and I'm struggling to show error messages in the view using ejs templates. I want to display This user already exists. Here is my code: node.js router.post('/signup', (req, res) => { var username = req. ...

Is it possible to use HTML elements to trigger actions in order to display or conceal divs using JavaScript?

Beginner - I am currently working on a webpage using TinyMCE wysiwyg and I would like to implement a functionality where I can display or hide certain divs upon clicking a link/button. Unfortunately, due to the structure of the page, it seems that I ca ...

Open $_POST in a new tab that has been edited for your convenience

<form method="post" target="_blank" action="battle.php" onsubmit="window.open('battle.php','','width=700,height=500,toolbar=0,menubar=0,location=0,status=0,scrollbars=0,resizable=0,left=30,top=0');" > < ...

Is the OR (||) operator malfunctioning in the Angular.forEach method?

I am faced with the challenge of manipulating a JSON array by applying certain conditions for removal: var data = [ {data1: "aaa", data2: "bbb", data3: "ccc"}, // First {data1: "ddd", data2: "eee", data3: "fff"}, // Second ...

What is the significance of the exclamation point before and after in JavaScript?

Currently collaborating on a project and attempting to decipher the significance of the exclamation marks both before and after. import ICHING from '!json!constants/iching_deoxy.json'; ...

What is the process for importing specific modules from jQuery?

When working with webpack or browserify, what is the specific procedure required to import only the essential modules from jQuery as mentioned here? import {core, dimensions} from 'jquery' Unfortunately, this approach does not seem to be effect ...

Converting JSON data into a table using jQuery, with certain columns hidden from view

I am currently working on developing a mobile app using jQuery Mobile and JSON. I have encountered two separate questions: 1) I have a JSON data set which includes fields such as id, name, surname, point, and mail. In my table that lists this data, I init ...

What is the best way to calculate the bounding sphere for an entire scene in three.js?

What is the most efficient way to calculate the bounding sphere for an entire scene in three.js? While one option could be finding the bounding sphere for each object and combining them, there may be a simpler approach. ...

How can I tailor the child count in ag grid to fit my needs?

Currently, I am using ag grid with React and have successfully implemented row grouping. However, the parent rows are displaying child row counts in numeric values. Is there a way to customize the style of the row count? Additionally, I am interested in ca ...