Comments (12)
Hi, sorry, will handle this tomorrow
from trois.
This should work with 0.3.2, you can use :
<Renderer :pointer="{ intersectRecursive: true }">
<Camera :position="{ z: 1 }" />
<Scene>
<GltfModel @click="onClick" src="..." />
</Scene>
</Renderer>
Or :
<Renderer>
<Camera :position="{ z: 1 }" />
<Scene>
<Raycaster intersect-recursive @click="onClick" />
<GltfModel src="..." />
</Scene>
</Renderer>
from trois.
Thanks for your PR, I will handle this asap because there's another problem : raycaster component don't work with gltf because it's a group (not a mesh) and intersectObjects
is not updated when model is loaded
from trois.
You should use :
<renderer ref="renderer" antialias orbit-ctrl resize="window" :pointer="{ intersectRecursive: true }">
<camera :position="{ z: 10 }"></camera>
<scene>
<point-light :position="{ y: 50, z: 50 }"></point-light>
<box
ref="box"
:rotation="{ y: Math.PI / 4, z: Math.PI / 4 }"
@click="gotClicked('Box')"
:position="{x: 1}"
>
<lambert-material></lambert-material>
</box>
<gltf-model
ref="mars"
src="https://cdn.glitch.com/7196f70c-5654-466a-aa15-c2d49cf73ffc%2Fmars.glb?v=1622584963291"
:position="{x: -1}"
@click="gotClicked('Snickers')"
/>
</scene>
</renderer>
You don't need to use Raycaster component
from trois.
You can use Raycaster if you need to raycast all objects (scene.children), the events props has to be set on Raycaster component : <Raycaster @click="onClick" />
from trois.
Did nobody encounter this before...?
from trois.
Hi, thanks, did you try with raycaster component ?
https://troisjs.github.io/guide/meshes/events.html#raycaster-component
from trois.
Jup, here is a minimal reproducible example: https://glitch.com/edit/#!/apricot-neighborly-century
After glancing over the raycaster code I assume that gltf models are not added to the list of intersect objects upon load. Is there a way to do it manually?
from trois.
I attempted to fix this. @klevron can you verify that this is correct? I don't have a local trois instance yet and purely did this by comparing the process on mesh.ts
from trois.
Hey @klevron, this issue is currently blocking a project of mine - is there any way I can support you to get this working faster?
from trois.
@klevron I updated the glitch from above. Running into another issue now.
In the glitch the click function for box fires twice, when I click once, while the gltf model behaves normal (see screenshot).
In my other project it behaves exactly the other way around. GLTF fires twice.
from trois.
@klevron thanks!
For documentation purposes, when should raycaster
be used and when is it sufficient to use pointer
?
I will happily write the article for this later, just want to be sure I'll get it right
from trois.
Related Issues (20)
- Project status ? HOT 2
- typo: radiusSegments should be radialSegments
- how can i use lil-gui with trois.js?
- Renderer's resize funtion seems not to work when inside a flex-item? HOT 1
- How can we access and use delta of the renderer component? HOT 1
- Metalness => model.traverse is not a function HOT 2
- Is There a way to add an HDRI image as sky for better light? HOT 1
- why canvas is blank even tho the renderer works as expected?
- Performance with large number of geometries
- JSON loader?
- THREEJS. 0.149.0 brake TROISJS HOT 3
- Is PointMaterial fully supported? HOT 2
- DRACOLOADER.js how to extend the troidjs Loader HOT 1
- stopPropagation in events
- How to draw lines in troisjs, and how to use it with three.js? Thanks!
- umd version
- how to drag any model without TransformControls
- Can it keep up with frequent feature updates to Threejs? HOT 2
- How to use trois with CSS3DRenderer? HOT 1
- Your test.glb file works perfectly. However, I only get a black screen with my own glb files HOT 1
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 trois.