Animate a three.js object moving towards the front of the camera

Currently, I have an object that is smoothly tweening towards the front of the camera by using WestLangleys solution from a different question:

    var pLocal = new THREE.Vector3( 0, 0, -10 );
    var pWorld = pLocal.applyMatrix4( camera.matrixWorld );
    var target = pWorld.sub( camera.position ).normalize();

    var tweenMove = new TWEEN.Tween(object.position).to(target, 2000)

However, I am facing a challenge where I need the object to maintain a specific distance from the camera. Adjusting the z value to -10 doesn't seem to have any effect as the object disappears when the tween completes (it gets too close to the camera).

The camera's near value is set to 1.

Do you have any suggestions or ideas to address this issue?

javascript3dthree.js

Answer №1

let startPos = new THREE.Vector3(0, 0, -10);

let endPos = startPos.applyMatrix4(camera.matrixWorld);

let moveAnimation = new TWEEN.Tween(object.position).to(endPos, 2000);

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

Enhancing the appearance of a Class Component with Material UI using useStyle

I am trying to style the Class Component using useStyle instead of hooks, but I am having trouble figuring out how. Here is my code snippet: import React,{Component} from 'react'; import Avatar from '@material-ui/core/Avatar'; import { ...

javascriptreactjsmaterial-uireact-hooksreact-component

Obtaining the Immediate ID of a Widget using JQuery

I currently have the following setup: <div id="dualList"></div> I created a plugin but stripped it down for testing purposes. I am encountering difficulties with the plugin not displaying the ID of the div. <script> (function($) { ...

javascriptjquery

Encountered difficulties logging in with MongoDB and Node.js

I encountered an issue while attempting to authenticate a user using MongoDB and Node.js. Although no errors are thrown, the system fails to provide the expected data after the user logs in. Below is a breakdown of my code. server.js var port=8888; va ...

javascriptnode.jsmongodbmongojs

The href attribute is not functioning correctly on Internet Explorer version 8

When dynamically generating HTML and appending the response to a DIV, here is the jQuery code: {% elif topic|length < 1 or topic.user_exhausted_attempts %} $('.questionHolder').hide(); var html = '<section class="span9">&a ...

javascriptjqueryajaxdjangointernet-explorer

Is PHP-generated HTML not responding to external Javascript?

I have been attempting to create a form where, upon checking a checkbox, the onClick() event will enable a select option. Below is my PHP code: function generateOption() { for($x = 0; $x < 10; $x++) { echo "<option value='".$x."'> ...

phpjavascriptonclick

Identifying duplicated video duration data associated with videoIds in asynchronous calls using Youtube API v3

I've encountered an issue with the asynchronous methods that retrieve and display all vidDuration values followed by the corresponding viewCount values for each videoId. The problem arises when the vidDuration value repeats only the last received one ...

javascriptjqueryyoutube-apiyoutube-data-api

Issue with Angular 2: scrolling event not triggering

Just starting out with Angular 2 and I'm trying to implement infinite scrolling for fetching data using REST API calls. Initially, I make a call like this to get the first set of 50 records: localhost:8080/myapp/records=items&offset=0&limit=5 ...

javascriptangular

li rel=identifier

Can someone assist with choosing rel="28700" in order to update the text within the <li> tag? <li id="pen_li_8" rel="28700"><span class="linkselectValue">Text to be changed</span></li> I have attempted the obvious method: $ ...

javascriptjqueryjquery-selectors

Creating a Distinct Interior Array Separate from the Exterior

I'm currently working on a project that involves creating a 2D array. I want the interior elements of this array to be black while the exterior elements should be white. However, my 2D array doesn't seem to be forming correctly - it looks more li ...

javascripthtmlcssarrays

Using JQUERY to toggle classes conditionally

$('.showall').css("cursor","pointer").click(function() { $('.value-container').toggle(); $('.dim-header').toggleClass($('.dim-header').toggleClass() == 'dim-header' ? 'dim-header active' : & ...

javascriptjquery

What is the best way to trigger an event using vue-chartjs?

I am using vue js to display a graph with chartjs. I have implemented an onClick function on the graph to emit an event in the parent component and retrieve data. However, the event is not working as expected. Can you help me identify the issue? Component ...

javascriptvue.jsvuejs2chart.jsvue-chartjs

Encountering a NaN outcome when summing values from various select options

I'm working on a project that involves adding up the prices based on the surface chosen by the user. I'm struggling with calculating the partial cost when the user's choice changes. totalSum.ts num: Calculation totalAmount: number cate ...

javascripthtmlarraysangulartypescript

Simplified React conditional rendering made easy

Currently, I am utilizing React 16 with Material-Ui components. In my root component, I have a requirement to load a tab and a view conditionally based on a property. Although I have managed to implement this functionality, the code appears quite messy a ...

javascriptreactjsmaterial-ui

What is the best way to create a list with images in a dropdown menu using HTML?

Thanks so much for your assistance! Below is the code snippet I am currently working on <li><a href="#Language">*LanguageHERE*</a></li> I am hoping to turn this into a dropdown menu that displays flags representing all available ...

javascripthtmlcss

Stop dishonesty in a timed internet assessment

At my company, we frequently host online competitions that involve simple multiple-choice quizzes. The winner is determined by the fastest completion time. Lately, we have been facing a major issue with cheaters submitting quiz entries in less than one se ...

javascriptphpanti-cheat

The element fails to show up when the button is clicked after receiving data from the API

My main goal is to retrieve data from a Weather API upon button click. Once the data is fetched, I want it to be displayed inside a component called Weather on the screen. Currently, I am successfully fetching the data but the Weather component is not disp ...

javascriptreactjsfetch-api

What is the best way for me to collect messages submitted through a form on my website?

After completing my website using HTML, CSS, and JavaScript, I added a form with inputs for name, email, and message at the bottom of the page. Now, I am trying to figure out how to receive the information submitted by visitors in my email. ...

javascripthtmlnode.js

What is the best way to pre-fetch data using axios in Vue?

My app requires offline functionality for drivers operating in remote areas with limited internet access. To address this, I aim to pre-download all necessary data using Axios requests when an internet connection is available. This way, the app can retriev ...

javascriptvue.jsionic-frameworkvuejs3ionic5

Guide on redirecting a server URL to another URL when users access it through a static QR code

Can anyone help me with a dilemma I'm facing? I have static QR codes printed on thousands of boxes that direct to the wrong URL. The designer didn't make the code dynamic, so editing through the generator's interface is not an option. We ar ...

javascriptphpasp.nethttphttp-redirect

Linking two dropdowns in Ember with data binding

I need help with connecting two selectboxes. I want the options in the second one to be determined by what is selected in the first selectbox. I'm new to using Ember and could use some advice on how to approach this problem. I tried using computed pro ...

javascriptember.js