Incorporating the ThreeJS Transform tool into the Autodesk Forge Viewer

Trying to implement ThreeJS Transform control into the Forge Viewer by following an informative tutorial:

The current issue is being able to add the Transform Control successfully, but not being able to interact with it. I had to make a slight adjustment in my code from the provided tutorial - instead of using overlay, I added a scene and then incorporated the Transform Control by utilizing viewer.impl.addMesh(TransformControl). For some reason, adding overlay did not result in desired functionality.

Could there be additional steps necessary to interact with meshes in a separate scene compared to the main scene? Below is a snippet of my code:

const transformControlTx: TransformControls =
      new THREE.TransformControls(viewer.impl.camera, viewer.impl.canvas, "scale");
transformControlTx.setSize(cube.geometry.boundingSphere.radius * 5);
transformControlTx.addEventListener('change', reRender);
if (!viewer.overlays.hasScene('CubeTranformScene')) {
      viewer.overlays.addScene('CubeTranformScene');
}
transformControlTx.attach(cube);
viewer.overlays.addMesh(transformControlTx, 'CubeTranformScene');

The objective is to use this transform control to adjust the scale of the attached cube, which is also a custom ThreeJS Mesh.

Answer №1

The identical tool has been implemented and showcased on this website

Check out the code here: on GitHub

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

Can a material be blended with a reflection (using cubemap) in Three.js?

I have a three.js object with a colorful texture applied to it, such as a car. I'm interested in adding a partial reflection to the surface to create a final material that combines shiny red metal and reflects the scene. How can I achieve this? While ...

Assign a variable to a dynamic model within an AngularJS scope

I am facing an issue with scope closure. ... function(scope) { ... }); Within the scope, I need to achieve the following: $scope.favoriteTitle = 'some value' The challenge is that favoriteTitle cannot be static. It needs to be generated d ...

JSON to Table Conversion

On the hunt for a php script that can load CSV files? Look no further than this snippet: echo json_encode(file(csvfile.csv, FILE_IGNORE_NEW_LINES)); Check out the output: ["foo,bar,baz","foo, foo,bar","bla,bla,blubb"] Need to integrate this into your ...

Generate an array consisting of characters within a designated range

I recently came across some Ruby code that caught my attention: puts ('A'..'Z').to_a.join(',') The output was: A,B,C,D,E,F,G,H,I,J,K,L,M,N,O,P,Q,R,S,T,U,V,W,X,Y,Z I'm curious if there is a similar way to achieve this ...

The Stencil EventEmitter fails to send data to the Vue instance

Attempting to develop a custom component using Stencil with an input feature. The goal is to create a component with an input field that, upon value change, emits the input to the Vue instance and logs this event to the console (later updating the value in ...

AngularJS: Recommendations for structuring code to dynamically update the DOM in response to AJAX requests

Within Angular's documentation, there is a straightforward example provided on their website: function PhoneListCtrl($scope, $http) { $http.get('phones/phones.json').success(function(data) { $scope.phones = data; }); $scope.order ...

'Without the need to refresh the page, assign a JavaScript variable from JSP on the server side.'

I'm looking for a way to assign a JavaScript variable from JSP without triggering a full page reload. While my current code successfully sets the variable, it also causes the entire page to refresh as a side effect. Here's an example in the exam ...

Navigation bar options across various web pages

In my Next JS project, I encountered an issue with the Navbar component. By default, the Navbar elements change color from white to black when scrolling below 950px. However, I needed to make an exception for another specific page ("/lodge/page.tsx"). On t ...

Retrieve information from a PHP file using AJAX when the output is just a single line

I never thought I would find myself in this situation, but here I am, stuck. I just need a single result from this PHP file, so is using an array really necessary? Despite my efforts to console.log(result) multiple times, all I get back is "null". What c ...

Tips and tricks for manipulating base64 images in Node.js

I have a unique challenge - I want to manipulate a base64 picture by adding just one extra pixel. My goal is to send a base64 image string (e.g. data:image/png;base64,iVBORw0KG...) from my express server. Let's say the image is 100x100px and I need to ...

Having trouble establishing a connection to the FTP server through the "ftp" package provided by npm

Attempting to establish a connection to a Secured FTP server using the "ftp" package. When connecting to an unsecured server, everything functions as expected with all events firing and content being displayed. However, upon trying to connect to a server ...

Having trouble setting $scope after redirecting to a partial template via routing

Looking to create a website that loads all necessary templates upon the initial visit. Currently, I only have one partial template but plan to add more in the future. Despite having just this one template, I'm struggling with binding the data from my ...

Connect the input field to the grid component

How can I sync the value of the SearchFilter with the FilterGrid to effectively filter the data (refer to code below)? I'm facing an issue where the field clears out the value as I type. There seems to be a problem in how I'm utilizing the state ...

Creating a Javascript Regular Expression to detect both accented and non-accented variations of a given string

Is there a way to use regular expressions in JavaScript to match both accented and non-accented versions of a string? I am customizing jQuery-ui's autocomplete feature by adding bold HTML tags around words in the suggestions. Here is my code snippet: ...

Each div will display the same image twice when loading the image

I have a grid where images are dynamically loaded with a link to a lightbox. Currently, this is how I am achieving it: $(".selection_thumb").each( function(i) { $(this).append("<a data-lightbox='image-1' href='img/folder/folder/"+(++ ...

The uiGmapGoogleMapApi.then function is failing to execute on Android devices

I successfully incorporated angular-google-maps into my Ionic project - in index.html, I included the following scripts: <script src="lib/lodash.min.js"></script> <script src="lib/angular-google-maps.min.js"></script> Within my vi ...

Trouble with serving CSS files using Express static directory

In my app.js file, I have the following code: app.use(express.static(path.join(__dirname, '../public'))); This code snippet is from my main layout page: <link rel="stylesheet" href="/css/styles.css"> Despite trying various combinations, ...

Exploring scroll functionality with Webdriver.io v4

My code is designed to log into the beta version of mediawiki, navigate to the Preferences page, and attempt to click on a button located at the bottom of the page. In order to achieve this, I am utilizing the scroll() function because using only .click() ...

At times, Express.js may display an error message stating "Cannot GET /"

My objective is to have http://localhost:3000/app display myFile.html and http://localhost:3000/api return "It worked!". I currently have two files set up for this: App.js: const http = require('http'); const fs = require('fs&apo ...

HTML5 enables the creation of an imperceptible scrollbar

I am looking to make my scrollbar invisible without it being visible however, I still want it to function when hovering over the box Also, I need it to work smoothly on both tablets and computers, which is why I have opted for using html5 I would great ...