Comments (11)
@fraguada I was able to solve it by doing this:
Vue.component('OrbitControls', {
inject: ['vglNamespace'],
props: ['camera'],
computed: {
cmr () {
return this.vglNamespace.cameras.hash.c
}
},
watch: {
cmr: {
handler(cmr) {
Vue.nextTick(() => {
const controls = new OrbitControls(cmr, this.$parent.$el)
controls.addEventListener('change', () => {
this.$parent.requestRender()
})
})
},
immediate: true,
}
},
render(h) {
return h('div');
},
});
from vue-gl.
Thanks @notchris. That did it!
from vue-gl.
I wrote a component like this:
<script>
import {validatePropString} from "vue-gl/src//utils"
import * as VueGL from 'vue-gl'
import OrbitControls from 'orbit-controls-es6'
export default {
mixins: [VueGL.VglObject3d],
name: 'OrbitControls',
inject: ["vglCameras"],
props: {
camera: validatePropString
},
computed: {
inst () {
const cmr = this.vglCameras.forGet[this.camera]
return new OrbitControls(cmr)
}
}
}
</script>
But when I give the camera a name and point it to the OrbitControls, the scene get black.
<vgl-perspective-camera name="pCamera" orbit-position="200 1 0.5"></vgl-perspective-camera>
<orbit-controls camera="pCamera"></orbit-controls>
from vue-gl.
I was on the assumption that the user would change orbit-position property manually by handling mouse event... I guess it should be enable instantly in the future (like by adding directive).
So far, the following code should work.
export default {
inject: ['vglCameras'],
props: {
camera: validatePropString
},
computed: {
cmr () {
return this.vglCameras.forGet[this.camera]
}
},
watch: {
cmr: {
handler(cmr) {
const controls = new OrbitControls(cmr)
controls.addEventListener('change', () => {
cmr.dispatchEvent({type:'update'})
})
},
immediate: true
}
}
}
I don't know why your scene got black. (Getting some error?)
You need to inform the renderer when the position of camera changes. We can use THREE's event dispatcher. VglRenderer
listens update
event of scene and camera, and THREE.OrbitControls
dispatches change
event.
You don't have to mixin VglObject3d
because THREE.OrbitControls
does not inherit the THREE.Object3D
.
I hope it will help you :)
from vue-gl.
Hello,
I had the same issue when I set name="pCamera" on the "vgl-perspective-camera" component.
I solved the black screen by setting the camera properties on vgl-renderer component.
But I had error when I use the OrbitControls component.
from vue-gl.
Internal namespace and rendering flow are changed.
Now the code below will work.
import { string } from 'vue-gl/src/validators.js'
import OrbitControls from 'orbit-controls-es6'
export default {
inject: ['vglNamespace'],
props: {
camera: string,
},
computed: {
cmr () {
return this.vglNamespace.cameras[this.camera];
}
},
watch: {
cmr: {
handler(cmr) {
const controls = new OrbitControls(cmr)
controls.addEventListener('change', () => {
this.vglNamespace.update();
});
},
immediate: true,
}
},
render(h) {
return h('div');
},
});
example:
https://jsfiddle.net/qwu7v0ms/39/
Injected namespaces are gathered in injected vglNamespace
property.
To render scenes at nextTick, call vglNamespace.update()
function.
from vue-gl.
Thanks for putting this all together!
When using inject: ['vglNamespace']
it errors with: "Injection "vglNamespace" not found"
However, this.$children[0].vglNamespace
(within other functions) does work.
I'm using this within <template>
tags, not sure if that maybe is part of the issue?
Am I missing some step here?
Update
Calling the following method on mounted() appears to work
orbit_controls: function () {
let cmr = this.$children[0].vglNamespace.cameras["cmr1"]
const controls = new OrbitControls(cmr)
controls.addEventListener('change', () => {
this.$children[0].vglNamespace.update();
});
}
Not saying that's a good or right way to do it - just that it does appear to work.
from vue-gl.
@swirlingsand Don't you put components outside VglNamespace
? VglNamespace
just provides a namespace object for its children.
from vue-gl.
@h-ikeda how do you constrain the controls to the domElement only ?
ie the line const controls = new OrbitControls(cmr, domElement)
, should be initialized with a reference to the canvas container, so it does not interfere with other mouse control in the external UI.
EDIT: just fixed with :
handler(cmr) {
const domElement = this.vglNamespace.renderers[0].inst.domElement;
const controls = new THREE.OrbitControls(cmr, domElement);
controls.addEventListener('change', () => this.vglNamespace.update());
},
from vue-gl.
With the new update, I had trouble accessing properties. So I just do this in my app and it seems to work nicely.
this.controls = new OrbitControls(this.$refs.camera.inst, document.querySelector('.renderer'));
this.controls.addEventListener('change', () => {
this.$refs.renderer.requestRender()
})
from vue-gl.
I'm testing this out and have run into issues with the samples on this page. My setup is similar https://codesandbox.io/s/qlpy3, but I'm getting some errors with recent versions of vue-gl (0.21.0):
[Vue warn]: Error in callback for immediate watcher "cmr": "TypeError: this.object is undefined"
found in
---> <OrbitControls>
and
TypeError: "this.object is undefined"
OrbitControls OrbitControls.js:98
handler main.js:38
this.object
refers to the camera object used in OrbitControls.js. I am referencing ObjectControls directly from import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'
So it seems the camera isn't being passed properly to the component.
You can see similar errors in the example posted by @h-ikeda
Any ideas how to resolve this?
from vue-gl.
Related Issues (20)
- VueGL is not defined HOT 1
- iFrame created with vgl-renderer HOT 6
- Example of rotation? HOT 2
- TypeError: h is not a function HOT 1
- Video texture support HOT 1
- [Question] Types not found in v1.0? HOT 2
- Feature Request : WebXR support (add webxr related features and tooling)
- Vue 3 support HOT 1
- VglShape path prop improvement HOT 1
- [Question] How can use the CanvasTexture? HOT 1
- Material Array not updating HOT 2
- The raw shader material component
- Unable to use VglObjLoader : "Unknown custom element: <vgl-obj-loader>" HOT 3
- How to use VglObjLoader HOT 4
- Cannot run dev build (rollup problem?) HOT 1
- Using inside a fluid container HOT 4
- SphericalReflectionMapping error HOT 3
- Transparent Sphere
- VueGL + Nuxt: Cannot read property 'trim' of undefined HOT 1
- Is EffectComposer supported? HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from vue-gl.