- Sponsor
-
Notifications
You must be signed in to change notification settings - Fork 2
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
OrthographicCamera :up break mesh rendering #61
Comments
Can you provide more details? It works in all my scenes. |
<template>
<div class="example-with-props">
<div class="example" style="width: 50vh; height: 50vh;">
<Renderer ref="renderer" :antialias="true" autoResize="true">
<OrthographicCamera ref="camera" :position="[0, -20, 0]" :up="[0, 1, 0]" :far="200000">
<TrackballControls :rotate-speed="0.01" :pan-speed="0.01"/>
</OrthographicCamera>
<Scene ref='scene'>
<PointLight ref="light"/>
<Group>
<GLTFLoader
url='/test-mesh/'
@load="onCreation"
enable-raycasting
@click="onClick"
>
</GLTFLoader>
</Group>
</Scene>
</Renderer>
</div>
</div>
</template>
<script>
import {Renderer} from "@janvorisek/drie";
import {Scene} from "@janvorisek/drie";
import {GLTFLoader} from "@janvorisek/drie"
import {OrthographicCamera} from "@janvorisek/drie"
import {TrackballControls} from "@janvorisek/drie"
import {PointLight} from "@janvorisek/drie"
import {defineComponent} from "vue";
export default defineComponent({
name: "AddMesh",
components: {
Renderer,
Scene,
GLTFLoader,
//TransformControls,
OrthographicCamera,
TrackballControls,
PointLight,
},
props: {
firstNode: {
type: String,
default: "node_name"
}
},
data() {
},
mounted() {
this.light = this.$refs.light.three
this.scene = this.$refs.scene.three
this.camera = this.$refs.camera.three
this.renderer = this.$refs.renderer.three
window['light'] = this.light
window['intersects'] = this.intersects
window['scene'] = this.scene
},
methods: {
onCreation(group) {
this.mesh = group.getObjectByName(this.firstNode)
this.group = group
},
onClick(is) {
console.log(is)
},
onMouseMove(is) {
console.log(is); // Do whatever you need to with is
},
/**
* is contains objects entered by the mouse
*/
onMouseEnter(is) {
console.log(is); // Do whatever you need to with is
},
/**
* is contains objects left by the mouse
*/
onMouseLeave(is) {
console.log(is); // Do whatever you need to with is
}
},
created() {
window.setInterval(() => {
this.light.position.set(
this.camera.position.x - this.LIGHT_PARAMS.distCamX,
this.camera.position.y - this.LIGHT_PARAMS.distCamX,
this.camera.position.z - this.LIGHT_PARAMS.distCamX)
}, 10);
}
});
</script>
<style>
</style> |
Can you provide screenshots of what doesn't work? I cannot run the code as I don't have your glTF file. I only found a small issue with |
not fixed on 1.0.0-alpha-1.34 |
I'm sorry, but can you explain what are you doing to the model? I still don't understand what might be wrong Are you rotating? |
I'm just left clicking on the canvas to rotate the camera ! with
with
with
I'm still using "@formkit/vue": "^1.0.0-beta.14",
"@janvorisek/drie": "^1.0.0-alpha-1.34",
"@sipec/vue3-tags-input": "^3.0.4",
"@tweakpane/plugin-essentials": "^0.1.7",
"@vuelidate/core": "^2.0.0",
"@vuelidate/validators": "^2.0.0",
"axios": "^1.2.3",
"core-js": "^3.8.3",
"dat.gui": "^0.7.9",
"three": "^0.148.0",
"three-trackballcontrols": "^0.9.0",
"troisjs": "^0.3.4",
"tweakpane": "^3.1.2",
"v-tweakpane": "^0.2.0",
"vue": "^3.2.13",
"vue-axios": "^3.5.2",
"vue-router": "^4.1.6",
"vue-select": "^4.0.0-beta.6",
"vuetify": "^3.1.2" The file I'm using : I can share my screen with parsec if needed |
I think you are running into the three controls limitations. You can't for example use OrbitControls and set camera position to I haven't got much experience with Note: I think |
No worries, it's not even an issue for my project ! I don't use it. I will tell the level of criticity on my next issue Do you have a ticket template you want to adopt ? |
I loaded a new stl files much bigger than the previous one (x,y,z not size) and the disapear glitch came back! I think I figure out what the issue was I need to test if the camera position is correct, because if I load my mesh with the camera "inside" (but in the renderer/canvas, Im not inside) it glitches, maybe the camera position is not well updated ? If I zoom in or zoom out, the camera.position don't get updated ! I will try to make a component that emulate it when I have time ! <template>
...
<OrthographicCamera ref="camera" :position="[0, -20, 0]" :far="200000">
<TrackballControls :rotate-speed="LIGHT_PARAMS.rotateSpeed" :pan-speed="LIGHT_PARAMS.panSpeed"/>
</OrthographicCamera>
...
<GLTFLoader
v-bind:url='fileName_'
@load="onCreation"
>
...
</template>
<script>
...
methods: {
onCreation(group) {
this.mesh = group.getObjectByName("myMesh")
this.mesh.geometry.center()
//this.camera.position.y = -this.mesh.geometry.boundingSphere.radius / 0.5
}
...
</script> In this example:
Anyway, I fixed it by doing this (commented line upper): this.camera.position.y = -this.mesh.geometry.boundingSphere.radius / 0.5 Or by editing manually camera.position to any value I'm trying to figure out your code but I guess I should read typescript doc instaid |
So |
Can you check again? There were some issues with props handling in cameras. |
I think my issue covers multiple ones : In my scene I am dynamically adding Meshes with GltfLoader and then I cheat with this.cameraBox = new THREE.Box3();
this.cameraBox.setFromObject(this.$refs.group.three)
let bsphere = this.cameraBox.getBoundingSphere(new THREE.Sphere(this.center));
this.$refs.camera.three.position.y = -bsphere.radius * 1.2
this.$refs.camera.three.position.x = -bsphere.radius * 1.2
this.$refs.camera.three.position.z = -bsphere.radius * 1.2 To set camera position with code (like this, I have no disappearing issues) All my loaded meshes are added into When the camera position is not set with code (but by moving camera with click + mouse), meshes disapear like the camera is within (but its not) Should I open another issue and close this one ? |
It occurs for example when :
And then a mesh is added to scene and the mesh have a centroid of [0,0,0] If I unzoom with my mouse, I wont be able to see the mesh If I unzoom(changing camera position) from console/code I can see it |
with this template :
changing
:up
to:up="[1, 0, 0]"
or:up="[0, 1, 0]"
break the camera/sceneThe text was updated successfully, but these errors were encountered: