Using three.js to manipulate the camera's movement on the geometry generated in Autodesk Viewer from Point A to Point B

I am currently working on transitioning my camera view state from Point A to Point B within the Autodesk viewer. To achieve this, I am creating a path using LineDashedMaterial and have successfully displayed the line connecting Point A and B.

Below is the relevant code snippet:

geometry = new THREE.Geometry();
geometry.vertices.push(getBoundingBox([2112]).center(),
                    getBoundingBox([2109]).center());
material = new THREE.LineDashedMaterial({color: 0xFF0000,
                                          dashSize: 3,
                                          gapSize: 1,
                                          transparent: true,
                                          depthWrite: false,
                                          depthTest: true,
                                          });

checkLineDistance = geometry.computeLineDistances();
geometry.lineDistancesNeedUpdate = true;
NOP_VIEWER.impl.matman().addMaterial('material', material, true);
line= new THREE.Line(geometry, material);   
NOP_VIEWER.impl.sceneAfter.skipDepthTarget = true;
NOP_VIEWER.impl.sceneAfter.skipIdTarget = true;                                       
NOP_VIEWER.impl.sceneAfter.add(line);

This implementation has resulted in the following output: https://i.sstatic.net/gUN9I.jpg

My current challenge lies in navigating or moving the camera along the direction of the path created (from point A to B). The scenario involves a sample model resembling a building with rooms labeled A and B.

1. Is there a method to obtain all vectors intersecting the line, specifically requiring position, target, and upVector information for camera movement?

2. Can I retrieve all vectors or points between A and B using dbid in the Forge Viewer API?

3. I attempted integrating Three.js with the Forge Viewer but encountered complexities in the process.

Here is an example showcasing what I aspire to accomplish, albeit involving viewport display in the Forge Viewer application instead of moving geometry objects.

javascriptthree.jsautodesk-forgeautodesk-viewer

Answer №1

Utilizing the navigation system within Forge Viewer allows for a seamless, linear transition into a custom camera state by utilizing the setRequestTransition method. An example implementation is demonstrated below:

let newCameraPosition = new THREE.Vector3(1.0, 2.0, 3.0);
let newCameraTarget = new THREE.Vector3(4.0, 5.0, 6.0);
let fov = viewer.navigation.getHorizontalFov();
viewer.navigation.setRequestTransition(true, newCameraPosition, newCameraTarget, fov);

The default duration of this transition is set to 1 second, enabling users to smoothly follow a path defined by a list of vertices with the camera. This can be achieved using the following script:

function followPath(viewer, vertices, delayMs) {
    let index = 0;
    let timer = setInterval(function () {
        if (index >= vertices.length) {
            clearInterval(timer);
            return;
        }
        let newPos = vertices[index];
        let newTarget = vertices[index + 1];
        if (!newTarget) {
            let oldPos = viewer.navigation.getPosition();
            let oldTarget = viewer.navigation.getTarget();
            newTarget = new THREE.Vector3(
                newPos.x + (oldTarget.x - oldPos.x),
                newPos.y + (oldTarget.y - oldPos.y),
                newPos.z + (oldTarget.z - oldPos.z)
            );
        }
        viewer.navigation.setRequestTransition(true, newPos, newTarget, viewer.navigation.getHorizontalFov());
        index++;
    }, delayMs);
}

followPath(viewer, [
    new THREE.Vector3(10, 20, 30),
    new THREE.Vector3(40, 50, 60),
    new THREE.Vector3(70, 80, 90),
    new THREE.Vector3(0, 10, 0)
], 2000);

For more advanced customization options such as interpolating around curves or implementing custom ease-in/ease-out effects, you have the option to integrate three.js or alternative animation libraries to directly control the camera position and target.

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

Creating a custom progress bar using Javascript and Jquery

I developed a progress bar that is fully functional. Here is the HTML structure: <div class="progress"> <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style ...

javascriptjqueryhtmlajaxprogress-bar

verify whether the image source has been altered

There is an img tag displaying the user's avatar. When they click a button to edit the image and choose a new one, the src attribute of the img changes to the new image src. How can I detect when the src changes? Below is the code for the button tha ...

javascriptjqueryimagesrc

Making a $.ajax post request with complex JSON that meets CORS compliance

I've been searching on various platforms, including stackoverflow, but I haven't been able to find a solution to my specific issue with CORS. I'm trying to send a complex JSON object (with multiple hierarchies) to a CORS server. I've st ...

javascriptjqueryjsoncors

An automated feature that smoothly transitions a large image onto the screen

I came across a plugin, possibly a slideshow plugin, that smoothly slides a large image along the y-axis. It's hard to explain, but imagine the visible image is only 600px by 300px, while the actual image is 600px by 600px. This plugin would scroll t ...

javascriptjqueryslideshow

Change the input field font style in AngularJS

Check out this Plunker link for validation of input field: http://plnkr.co/edit/iFnjcq?p=preview The validation only allows numbers to be entered and automatically adds commas. My query is, if a negative number is entered in the field, how can I change th ...

javascriptjquerycssangularjsvalidation

Mastering NodeJS Promises: Efficiently Handling Multiple http.get Requests

I have recently started learning about NodeJS and Promise functionality, so please be patient with me if this question seems uninformed. My goal is to first retrieve a database of records and then verify that the links associated with these records return ...

javascriptnode.js

What is the best way to transfer data from a clicked table row to another component?

I am currently working on developing an email inbox component for a system where the emails are displayed in a table format. When a user clicks on a specific row, it should lead to another component for further details. Since the information is not rende ...

javascriptvue.jsvuejs2

My attempt to use the Redux method for displaying data in my testing environment has not yielded

I've been attempting to showcase the data in a Redux-friendly manner. When the advanced sports search button is clicked, a drawer opens up that should display historical data when the search attributes are selected. For this purpose, I implemented the ...

javascripthtmlcssreactjsredux

Is it possible to trigger the JavaScript mouseover function following a click event?

Is it possible to call a function on mouse over after the first click event is triggered by the user? <a href="javascript:void(0);" id="digit<?php echo $k;?>" onClick="javascript:return swapClass('<?php echo strtoupper($v);?>',&ap ...

javascriptjqueryajax

Riot.js effortlessly generates custom tags nested within each other from various server-side files

My goal is to utilize riot.js server-side rendering in order to create a static HTML page that can be indexed by search engine spiders. I have managed to get a basic example up and running, but I am now trying to solve the challenge of dynamically loading ...

javascriptnode.jsriot.js

Learn how to switch between search and results views in Angular while also transferring data

Currently, I'm attempting to tackle a common task that I've yet to encounter an example of. Display 1 and Control 1 : In this view, there is a basic textbox with ng-model="searchTerm" and ngSubmit event. After the user enters their search term, ...

javascriptangularjsweb-services

Ways to show text on a donut chart when hovering with the mouse

I have been attempting to make adjustments to this sample. My goal is to display a word in the center of the donut chart upon mouseover, similar to this: https://i.sstatic.net/dCPKP.png Although I have included code for mouseover, it seems to not be func ...

javascriptd3.js

What is the process for deleting an event in Vue?

My Vue instance currently includes the following code: async mounted () { document.addEventListener('paste', this.onPasteEvent) }, beforeDestroy () { document.removeEventListener('paste', this.onPasteEvent) }, methods: { onPasteEv ...

javascriptvue.js

Tips for concealing an entire row of a table with Jquery

I am currently working on a system that involves a table with anchor tags named original and copy in each row. By clicking on these anchor tags, we are able to update the database whether the item is an original or a copy using ajax. However, I am facing a ...

javascripthtmljqueryajaxlaravel-8

What are the benefits of integrating firebase-admin-sdk with firebase-ui and firebase-client-sdk for both server-side and client-side authentication management?

I am currently working on implementing an authentication mechanism for my Next.js project. Specifically, I plan to utilize firebase-auth and firestore. My main goal is to keep important security logic on the server side to ensure safety. I want to avoid ex ...

javascriptnode.jsnext.jsfirebase-authenticationfirebase-admin

Determining the number of words in every line within a textarea

I am looking to determine the number of words per line in a textarea. The width of the textarea is variable. Check out this code snippet that calculates the number of rows: http://jsfiddle.net/2tcygj9e/ ...

javascriptjquery

Evaluating the highest value within a continuous stream of data using idiomatic RxJS methods

When it comes to calculating the maximum value of a fixed stream, the process is quite simple. For example: var source = Rx.Observable.from([1,3,5,7,9,2,4,6,8]).max(); However, this only outputs a single value (9 in this case). What I aim to achieve is ...

javascriptnode.jsrxjs

Modify variables in the child function to be utilized in the parent function

I need to create a scenario where a variable defined in a parent function is modified within a child function and then returned back to the parent as an updated variable. Here is the code I have attempted: let value = 20; console.log(value); // Output: ...

javascript

Selecting options in table is disrupted by filtering in ng-repeat

My table showcases selectable information, featuring parent rows and child rows. I am seeking a solution where only the parent rows are selectable if they have no children; otherwise, only the child rows should be clickable. Essentially, it's a selec ...

javascriptangularjsfilterangularjs-ng-repeatangularjs-ng-click

Does three.js have an Inter_area texture minFilter similar to what is found in OpenCV?

After uploading a high-resolution image to my three.js canvas, I noticed that downloading lower resolution versions resulted in blurry images with jagged edges. I tried various techniques like adjusting anisotropy and using different filters, but the resul ...

image-processingthree.jstexturesantialiasing