Skip to content
This repository has been archived by the owner on Jun 10, 2023. It is now read-only.

TransformControls in scene causes crash when SSR is enabled #10

Open
optimus007 opened this issue Jul 25, 2022 · 9 comments
Open

TransformControls in scene causes crash when SSR is enabled #10

optimus007 opened this issue Jul 25, 2022 · 9 comments

Comments

@optimus007
Copy link

optimus007 commented Jul 25, 2022

Continuing from here #4 (comment)
I've been having these error which could not track down

So i've tried running from the examples folder of this lib, and these is no crash but the behavior seems a stuttery and there's extra reflection from the control plane ?

2022-07-25.17-49-00_Trim.mp4

code i added in main.js

tCon = new TransformControls(camera, document.querySelector("#orbitControlsDomElem"))

tCon.addEventListener('dragging-changed', function (event) {

	controls.enabled = !event.value;


});
console.log(tCon)
window.tCon = tCon
scene.add(tCon)
const box = new THREE.Mesh(
	new THREE.BoxBufferGeometry(1, 1, 1),
	new THREE.MeshStandardMaterial({
		color: 0xff0000,
		metalness: 1,
		roughness: 0
	})

)
box.position.set(1, 1, 1)
box.updateMatrixWorld()
scene.add(box)

tCon.attach(box)

and then i tried with a basic cube and a plane

2022-07-25.17-59-19.mp4

the code i used https://gist.github.com/optimus007/56b49fc4a61a0f31dfcda36dc6a9deea

one big difference is i'm switching between renderer.render and composer.render in this example to toggle the postprocessing

@0beqz
Copy link
Owner

0beqz commented Jul 27, 2022

Ah okay I see. Well it looks like the control plane's transparency is causing issues which makes it reflect as well. So if you don't want to have reflections for the control plane at all, use the SSREffect's selection set to add only the meshes which should reflect.

I'll try to look into what's causing your crash. Could you maybe create a demo repo please so that I can replicate the crash quickly?

@optimus007
Copy link
Author

optimus007 commented Jul 29, 2022

here's the demo
page https://optimus007.github.io/SSRTest/ (using '/docs' folder to build and host)
repo https://github.com/optimus007/SSRTest

added "selection" but still crashes
and adding hdri seems to printing warning messages

in firefox the error message is different
err

@0beqz
Copy link
Owner

0beqz commented Jul 29, 2022

Thanks, I'll try to look into that in the next few days to see what's causing the issue.

@optimus007 optimus007 changed the title TransformContorls in scene causes Crash when SSR is enabled TransformControls in scene causes crash when SSR is enabled Jul 29, 2022
@optimus007
Copy link
Author

updated to latest , looks great , fewer reflection glitches

transform controls issue still persists

page https://optimus007.github.io/SSRTest/
repo https://github.com/optimus007/SSRTest

@schlaflied1314
Copy link

Same issue in orbitControls! If i span or rotate whole scene,the crash will exitst and persist until reload the page。 If you can give me some feedback, i will so appreciate it. Thanks!

@optimus007
Copy link
Author

Same issue in orbitControls! If i span or rotate whole scene,the crash will exitst and persist until reload the page。 If you can give me some feedback, i will so appreciate it. Thanks!

can you post a video ?
This error is about the existence of transform controls in the scene causing a crash
Your error might be different , orbitcontrols never caused an issue in my case

@skrichten
Copy link

I'm also trying to use TransformControls. Instead of a crash, I get this error...

Unhandled Runtime Error
TypeError: Cannot read properties of undefined (reading 'clone')

Call Stack
TransformControlsGizmo.eval [as updateMatrixWorld]
node_modules\three-stdlib\controls\TransformControls.js (909:0)
TransformControls.updateMatrixWorld
node_modules\three\build\three.module.js (7998:0)
TransformControls.eval [as updateMatrixWorld]
node_modules\three-stdlib\controls\TransformControls.js (189:0)
Scene.updateMatrixWorld
node_modules\three\build\three.module.js (7998:0)
WebGLRenderer.render
node_modules\three\build\three.module.js (27439:0)
RenderPass.render
node_modules\postprocessing\build\postprocessing.esm.js (3092:0)
EffectComposer.render
node_modules\postprocessing\build\postprocessing.esm.js (4377:0)
Object.eval [as current]
node_modules@react-three\postprocessing\dist\index.js (143:0)
render$1
node_modules@react-three\fiber\dist\index-80784ca9.esm.js (1516:0)
eval
node_modules@react-three\fiber\dist\index-80784ca9.esm.js (1545:0)
Map.forEach

loop
node_modules@react-three\fiber\dist\index-80784ca9.esm.js (1539:0)

@optimus007
Copy link
Author

@skrichten that's same as the original error

@vis-prime
Copy link

vis-prime commented Feb 18, 2023

While testing vanilla js version of Accumulative shadows from R3F Drei
I encountered this same error

basically transformControl's updateMatrixWorld function updates it's own materials and it's mesh.visible and its running on every frame rendered

If any other code replaces this material with a temporary shader material or hides any transform control mesh ,it's updateMatrixWorld will try to do some clone operation and stuff & will make the mesh visible again. and when it happens on a shader material it leads to crash + artifacts

Easy way to skip it was to find any "isTransformControls" objects and hide them before rendering and prevent material edits from happening on it (works in my case since i traverse the scene to find all the shadow casting meshes anyway)

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

5 participants