If I hover over a target image in the spacial toolbox, is there any way an image, gif, or 3D object could appear on the screen?
Can you be a bit more precise? Where exactly do you think this should appear?
So if I open up the spacial toolbox app and hover over a target image, could an object/image appear on the ground or in the air where the target image is? I think this could be used as a way to have a robot or some object appear on the screen and be able to use tools without needing to physically have that object/robot.
I just wrote and published a new tutorial on the website that shows how to make a 3D model appear when you look at a target image.
If I’m understanding what you want to do correctly, you could try extending this example to show a 3D model of a robot instead of a cube, and perhaps figure out a way to control the position of that 3D robot model based on other tools that you connect to it.
Before getting into the 3D tutorial, which is a bit complicated, this simpler tutorial shows how to make a 2D image (could also be a GIF) appear when you look at a target image.
@ben Thank you so much for putting up the tutorial! We were able to have a cube appear and change its texture. Do you have any advice about how to change the object from a cube to a stl using three.js?
I’ve loaded 3D models into older versions of three.js, but the APIs may have changed in the current version. There are a number of Loaders you can use for different file formats such as https://threejs.org/docs/#examples/en/loaders/OBJLoader or https://threejs.org/docs/#examples/en/loaders/GLTFLoader
It’ll probably work if you swap out Step 6 of the tutorial with something roughly like this: (adapted from the three.js website)
// instantiate a loader
var loader = new OBJLoader();
// load a resource
loader.load(
'models/monster.obj',
// called when resource is loaded
function ( object ) {
containerObj.add( object );
},
// called when loading is in progresses
function ( xhr ) {
console.log( ( xhr.loaded / xhr.total * 100 ) + '% loaded' );
},
// called when loading has errors
function ( error ) {
console.log( 'An error happened' );
}
);
I haven’t actually tested this so let me know if it works!
1 Like
@ben I tried doing this:
// instantiate a loader
var loader = new STLLoader();
// load a resource
loader.load(
'textures/FullRobot.stl',
// called when resource is loaded
function ( object ) {
containerObj.add( object );
},
// called when loading is in progresses
function ( xhr ) {
console.log( ( xhr.loaded / xhr.total * 100 ) + '% loaded' );
},
// called when loading has errors
function ( error ) {
console.log( 'An error happened' );
}
However that did not work, so I tried to download the example folder from the github that contains all the various loaders. And had this at the top of my file:
But when I run the server and app nothing appears 
@ben @jhobin I was wondering if either of you happen to have any success with creating 3d objects appear in the Toolbox app? I have tried again and am still struggling a bit with making STL’s appear.
I’m testing out right now but here’s what I think model loading code should look like in a tool: https://github.com/hobinjk-ptc/threejs-collada-tool-example
Notably you’ll probably have to adjust the position and scale of the loaded model.
Hey @jhobin! I was wondering if you happened to get the onshape 3d object to load in? I have tried out the code you have on your github and haven’t had any success. I also tried to alter the scale and add in a tool. When I hover over the image target I can see the blue square (the tool that I added in) but I cannot see the 3d object.
Yes, I did get it to work. I did have to scale the model up nearly 1000x to see it though.
@jhobin Amazing! Thank you so much for all your help. Could you possibly push the working code to the github so I could take a look?
I’ve uploaded my latest working code. Thank you for your interest!
@jhobin I tried to utilize the gltf loader so that we could see the color of the onshape 3d model. However when I tried it, it appeared all black and also I noticed that the 3d model doesn’t stay on the image target and can be a bit jittery/laggy. Have you happened to run into any similar issues or have any advice on how to fix this? Thank you!
I’ve been doing the following:
import { GLTFLoader } from './vendor/three/jsm/loaders/GLTFLoader.js';
const loaders = new GLTFLoader();
loaders.load('./assets/FullRobot.gltf', function(gltf) {
gltf.scene.scale.x = 1000;
gltf.scene.scale.y = 1000;
gltf.scene.scale.z = 1000;
gltf.scene.position.z = 50;
containerObj.add(gltf.scene);
});You might have to tweak the lighting, especially the positioning of the lights and the strength of the ambient light. It might also be useful to sanity check the gltf in an external viewer to make sure that it isn’t just missing textures for some onshape-specific reason. The jitter/lag is due to the fact that the test tool uses an instantaneous image target and can be alleviated a bit by creating an image target the old fashioned way in the Vuforia Developer portal: https://spatialtoolbox.vuforia.com/docs/tutorials/attaching-targets-to-objects.
I’ve pushed a commit adding lighting since there wasn’t any before 
1 Like