vue-threejs-composer
vue-threejs-composer copied to clipboard
sascha245
OrbitControls
Hello, I'm submitting a bug report When I use the OrbitControls, I have this error : " OrbitControls.ts?a1e9:319 [Intervention] Unable to preventDefault inside passive event listener due to target being treated as passive. See https://www.chromestatus.com/features/6662647093133312 "
This error also appears on Demo. One of the solution I found online is to add "touch-action: none;" in my CSS, but it's not working so far.
I hope this project is still maintained !
Hello @MeriemTazen,
The issue seems to come from an update of Chrome and the OrbitControls script. The version of the code used is probably a bit old, but replacing the following lines in OrbitControls.ts worked for me:
// replace line 319 in onMouseWheel handler
event.preventDefault();
// by this
// if your page is scrollable, it will however scroll and zoom/dezoom at the same time
const documentLevelTargets = [window.document, window.document.body, window]
const isDocumentLevel = documentLevelTargets.includes(this.domElement)
if (!isDocumentLevel) {
event.preventDefault();
}
or by simply disabling the passive option on the listener. This will also block scrolling on your page.
// line 524
this.domElement.addEventListener("wheel", this.onMouseWheel, {
passive: false
});
It should also work if you use a domElement other than document, body and window in the OrbitControls constructor.
As for your second question concerning the maintaining, I still fix issues or answer questions, but I currently don't plan to add new features or make any big changes ( at least until Vue 3 is released ).
It works, thanks for answering so quickly !
Really looking forward to Vue 3 release then ! Do you still think this project has enough features to be used in a big project ?
The primary goal of this library is to enable people to easily create custom threejs content in Vue. Most unique features should therefore be added by the user.
As for if you should use this library, pure threejs or another library, it depends on your project, but here a few pointers:
-
Performance: If you are going to create huge and complex scenes with lots of interactive objects, pure threejs will be more performant than having thousands of Vue components, this holds true no matter which library is used. You will also sometimes need to combine static meshes together to improve performance, which you will also need pure threejs for.
-
You can mix vue-threejs-composer and pure threejs: In the case above when you need better performance but still want to use the scene and asset manager, you can create a component in which you can add your threejs code.
<scene ...>
<my-scene-content/>
</scene>
// define MySceneContent component
import { Mixins } from "vue-property-decorator";
import { Entity, Application } from "vue-threejs-composer";
import { Group } from 'three'
@Component
export class MySceneContent extends Mixins(Entity) {
initialize(app: Application) {
// you can also access app through "this.app" or scene through "this.scene"
// use app to access all loaded assets
const group = new Group();
// initialize and add your threejs entities here to "group"
return group;
}
}
- Physics: There isn't a built-in solution for physics in this library, so you will have to look into how to implement it in threejs.
Hope this answer was helpful!
