Problem Loading Threejs Mesh to Speckle Viewer

Hi! im having troubles loading threejs meshes to my speckle scene, i have done this before using something like this

let scene = viewer.filteringManager.Renderer.scene;
const geometry = new THREE.SphereGeometry(4, 10, 5);
		const material = new THREE.MeshBasicMaterial({
			color: 0xff7eb3,
			transparent: true,
			opacity: 0.5
		});
		const sphere = new THREE.Mesh(geometry, material);
		scene.add(sphere);

but with the latest version the sphere gets added to the scene (can console log it ) but is not visible in the scene. i tried viewer.needsRender = true; and renderer.render(scene, camera); but still cant make it visible.

any ideas on this are very welcome!
Thanks!

Hi @Ricardo_Zepeda

Although officially the viewer API currently does not support adding foreign objects to the scene, you can still do it in the manner you have showed. You will need to set a specific layer value to the objects you add in order for them to be rendered though. Here you can see our currently available layers. I suggest you add your foreign objects into ObjectLayers.PROPS. Do note that in three.js layer values are not implicitly inherited by children from their parent, so you need to make sure that all objects you want to get displayed have their own layer value correctly set.

Also, as per the documentation, you do not need to manually call any render-related function in order for the viewer to render, because it handles it’s update and render loop internally. The only way to signal the viewer you’d like rendering related updates is through the existing requestRender() function. Which again, you do not need to call every frame

2 Likes

Hi Alex Thanks a lot! the layer change did the trick and im now able to see the geometry in the viewer.
i still have a problem with the GSAP animation package and the viewer (made a post about it a while ago)

for example in the code above if i add an animation like this

gsap.to(sphere.scale, { x: 3, duration: 1, repeat: '-1', yoyo: true });
the animation will only run while im rotating the view if you stop rotating the animation will stop.

i understand the render does not need an update, but in this case for some reason gsap is not able to rerender by its own.

Thanks for the help!

Hi Ricardo,

Glad to hear setting the layer values made it work!
As for the GSAP issue, what you can do is define an onUpdate callback and call viewer.requestRender() from there. Here’s what I mean:

gsap.to(sphere.scale, { x: 3, duration: 1, repeat: '-1', yoyo: true, onUpdate: () => {
    viewer.requestRender()
 });

Not exactly sure what parameters the onUpdate callback should have, but I’m sure you’ll find out in their documentation. So basically what this does, is define a callback function which GSAP will be calling each time the animation values update (probably once per frame) and that’s when you want to signal the viewer that you would like it to re-render

2 Likes

Worked like a charm!! all my sensor location animations are running smoothly now ! thanks Alex!

2 Likes