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.
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
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.
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:
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
Hi Ricardo! I’m trying to do something similar, adding a simple three-sphere mesh to my speckle-setup. I know it’s a while ago, but do you remember how you did the layer change? I’ve tried a bunch of different things, and atm it looks this this:
const addGeometryFromThree = async (viewer) => {
if (viewer) {
const renderer = viewer.getRenderer();
const scene = renderer.scene;
const geometry = new THREE.SphereGeometry(400, 100, 500);
const material = new THREE.MeshPhongMaterial();
material.color.setHSL(0, 1, 0.5); // red
material.flatShading = true;
const sphere = new THREE.Mesh(geometry, material);
sphere.layers.set(ObjectLayers.PROPS); // <-- layers change
scene.add(sphere);
viewer.requestRender();
} else {
console.error("Viewer or its components are not properly initialized");
}
};
This might sound silly, but it’s possible the sphere large enough (400m radius) that you “are inside it” but it’s invisible because back faces are culled by default?
Layer set looks ok to me. Try making the sphere smaller and make sure it’s in the camera’s view. If that doesn’t work, let us know and we’ll take it from there
Now it’s showing!