Examples and documentation for TroisJS
Main repo : https://github.com/troisjs/trois
✨ ThreeJS + VueJS 3 + ViteJS ⚡
Home Page: https://troisjs.github.io
License: MIT License
Examples and documentation for TroisJS
Main repo : https://github.com/troisjs/trois
Hi! First thanks for the work and it's great to have some sort of React-Three-Fiber for Vue 🔥
I was trying it and I'm a bit concerned about the size. With the demo from the README I'm getting a 925kb size.
I believe that Trois is importing every component form Three.js, so it makes a very large bundle.
I was comparing the size and package distributions to React-three-fiber:
Bundle size for Trois | Comparassion Bundle Size for React-three-fiber |
---|---|
Would it be technically possible to not import Three like React-three-fiber does, or only import the components that are being used by the user?
Thanks a lot!
Great library!
When I use Raycaster it does not detect clicks on loaded Gltf-Models.
When I activate the option intersectRecursive
and then console log the click event, the intersectObjects
list only contains meshes with a direct parent of scene
and no loaded models.
Is there a hidden attribute that has to be set in the Gltf-Model
loading process?
Absolutely love the idea of this repo, really excited to learn more about it! I'm running into this error when running yarn && yarn dev
:
% yarn dev
yarn run v1.22.10
$ vite
error when starting dev server:
Error: The following dependencies are imported but could not be resolved:
index.3540f44e.js (imported by /[...]/trois/docs/index.html)
Are they installed?
at optimizeDeps (/[...]/trois/node_modules/vite/dist/node/chunks/dep-d13406fa.js:67493:15)
at processTicksAndRejections (internal/process/task_queues.js:93:5)
at async runOptimize (/[...]/trois/node_modules/vite/dist/node/chunks/dep-d13406fa.js:68030:48)
at async Server.httpServer.listen (/[...]/trois/node_modules/vite/dist/node/chunks/dep-d13406fa.js:68044:17)
error Command failed with exit code 1.
Any thoughts on what the issue might be? Thanks so much!
I don't know yet if it is a good idea but we could add events to Renderer :
This implies we don't need anymore to add a ref to renderer to animate things.
And we could use renderer.$onBeforeRender
... to add multiple callbacks.
troisjs is still early stage, I don't think it will be a problem if we change this now.
Could you add to the code repo the source for the live examples?
Ie: the page that has all of these: https://troisjs.github.io/examples/materials/2.html, I couldn't find their source in the repo.
The note on the Render loop page warns against using Vue reactivity to update troisjs components, but I'm wondering if there's any possible way to make reactive data a reliable source of truth. Curious if you have any thoughts on this - I'm happy to look into it if that's not something you've already researched. Thank you!
Hi!
Is it possible to use the GLTFViewer component? What is the proper way to import it in my Vue component?
Thanks for this amazing project!
/CN
I would like to be able to active/deactivate OrbitCtrls at runtime.
Is there a reason why this is only called at createRenderer()
?
Lines 128 to 138 in 6f9251a
How can I do this dynamically?
I don't see any controls
object exported for outside usage either, activating/deactivating this would be ideal.
Or simply accessing it to give it a new target
The underlying issue is that I would like to switch the camera target at runtime with orbitctrls
attached. As you can see in this live example on glitch once the ctrls is attached I can not influence camera.target
via code anymore and orbitctrls target
is not accessible either.
UPDATE:
I can access orbit controls via this.$refs.renderer.three.cameraCtrl
to some degree. I will leave this open to remind me to document this feature.
React Three Fiber includes easy ways to implement postprocessing - I'd like to see how straightforward it would be to create a custom effect pass in the EffectComposer using these methods. Will self-assign and keep this thread updated!
Raycaster
and Object3D
interaction methods in #33 need touch events added.
It could be great to have a simple animation api to handle add and remove object with tweens, I needed this for
https://troisjs.github.io/little-planet/
It could be nice to use the same directives of https://github.com/vueuse/motion, thanks @Tahul for the idea and the great work on your lib 👍
RendererInterface is not exported in https://github.com/troisjs/trois/blob/master/build/trois.d.ts
But it is in : https://github.com/troisjs/trois/blob/master/src/core/Renderer.ts
I think it is a pb with rollup-plugin-dts, but not sure
To keep using bundlephobia ? pastelsky/bundlephobia#413
These meshes should not be included in core package
Instead duplicating properties from three materials, it should be easier to use a generic props
prop, e.g. :
<BasicMaterial color="#ffffff" :props="{ transparent: true, opacity: 0.2 }">
But keeping a color
prop is useful.
I think this design pattern will be used for other components.
I will keep some props (geometries is a good example) to have a good ts/ide support.
Awesome Library!
I tried to build the app, but I somehow get this error:
Some chunks are larger than 500kb after modification.
Got any ways to fix it? Thanks!
Hi - I'm experimenting with your slider examples and everything works except for some reason the canvas height is cut off at 153px. I can't figure out how to change it, any idea whats going on?
Much thanks for this great project.
<template>
<Slider :images="images" />
</template>
<script>
import { default as Slider } from "/node_modules/troisjs/src/components/sliders/Slider1.vue";
export default {
components: { Slider },
data() {
return {
images: [{ src: "/assets/images/screen1.png" }, { src: "/assets/images/screen2.png" }, { src: "/assets/images/screen1.png" }, { src: "/assets/images/screen2.png" }],
};
},
};
</script>
TroisJS use the following internal helper : https://github.com/troisjs/trois/blob/master/src/core/useThree.js
It is exposed in components via three
injection, but it could be better to hide it and add shortcuts to renderer component to be able to access pointer, threejs renderer, size and ?
I have problem with api-extractor :
ERROR: The expression contains an import() type, which is not yet supported by API Extractor
See here for example. The weird thing is, if I run this locally, it won't work on the first try, but it will if I change the material:
Thanks for this great package and the beautiful demos. I've had great fun playing with it over the past week.
Is it possible to individually shade the faces of an instanced cube? In a regular threejs project, I use the method described here: https://stackoverflow.com/questions/44828713/paint-cube-faces-as-a-whole-not-the-triangles-that-make-up-the-face-three-js/44836160#44836160. It seems the geometry is tied together with the material. I'm not sure how to do that with the vue component design paradigm. Thanks for any guidance or suggestions.
While working with #30, I was wondering if there's a cleaner way to handle raycasting and pointer events. I'm thinking of a two-step approach, raycaster-first and object-first.
Sometimes I want to raycast against everything in a crowded scene - in this case, I'd rather write a single raycaster's pointerEnter
and pointerLeave
functions than those of all the objects in the scene. To accomplish this, we could add a Raycaster
component:
<Camera>
<Raycaster @pointerEnter="onEnter" @pointerLeave="onLeave"/>
</Camera>
export default {
methods: {
onEnter(intersections) {
console.log(intersections)
},
onLeave(inactiveIntersections){
console.log(inactiveIntersections)
}
}
}
This would raycast against everything (raycaster.intersectObjects(scene.children)
) and fire appropriate callbacks when pointer interactions start and end. We could also include an optional prop targetObjects
if the user wants to specify which objects to target if they don't want all of them.
I'm finding the <Renderer mouse-over>
and mesh :onHover
prop a little confusing - maybe we could do something like this:
pointerEnter
and pointerLeave
props to all MeshespointerEnter
or pointerLeave
are defined, check for this.three.raycaster
.
this.three
to create one (a new method like this.three.initializeRaycaster()
), then add the mesh to the list of target objects.From there, three.raycaster
can handle calling events on meshes when the pointer enters or leaves them. This way we don't need any Renderer
-level awareness of raycasting and the pointerEnter
/pointerLeave
events more closely match the Raycast component above (plus they're more clearly named for handling non-mouse inputs).
Happy to add this in the next couple days if it sounds worthwhile - let me know any thoughts @klevron !
I use groups a lot when organizing my Three.js scenes and would love to use them here as well with a <Group>
component:
<!-- A road with a car -->
<Scene>
<Plane ref="road">...</Plane>
<Group id="car-1>
<Box ref="car1_body">...</Box>
<Torus ref="car1_wheel_front_l>...</Torus>
<Torus ref="car1_wheel_front_r>...</Torus>
<Torus ref="car1_wheel_back_l>...</Torus>
<Torus ref="car1_wheel_back_r>...</Torus>
</Group>
</Scene>
(Eventually I'd love to be able to place a group into a self-contained component - so for example:
[app.vue]
<Scene>
<Plane ref="road">...</Plane>
<Car id="car-1"/>
<Car id="car-2"/>
</Scene
[car.vue]
<Group>
<Box ref="car_body">...</Box>
<Torus ref="car_wheel_front_l>...</Torus>
[...]
</Group>
but that can be a later goal!)
Happy to take this on if you'd like, I just wanted to make sure this wasn't already in the works or anything. Thanks so much!
I think it could be easier to use $attr : https://v3.vuejs.org/api/instance-properties.html#attrs
LambertMaterial
PhongMaterial
StandardMaterial
ToonMaterial
ShaderMaterial (??)
It would be nice if Vue 3 imports could be replaced with vue-demi. So the plugin also can be use with Vue 2/Nuxt.
https://github.com/vueuse/vue-demi
React-Three-Fiber use a custom renderer : https://twitter.com/0xca0a/status/1309229634870013952
I tried this approach few months ago but it was not so easy and it was not possible to mix html and troisjs.
Don't wait a custom renderer, it won't make you better at making awesome things with troisjs
Ressources :
I tried to use ShaderMaterial but I am getting this error :
TypeError: Cannot set property 'texture1' of undefined at Proxy.initTexture (Texture.ts:48) at Proxy.refreshTexture (Texture.ts:54) at Proxy.created (Texture.ts:28)
Here is my template :
<Plane :width="ratio"
:height="1"
:widthSegments="50"
:heightSegments="50">
<ShaderMaterial :props="{vertexShader, uniforms, fragmentShader}">
<Texture src="/@assets/images/4.jpg"
uniform="texture1"
ref="texture"
:onLoad="onTextureLoaded" />
</ShaderMaterial>
</Plane>
It works well with a BasicMaterial, like so :
<Plane :width="ratio"
:height="1"
:widthSegments="50"
:heightSegments="50">
<BasicMaterial>
<Texture src="/@assets/images/4.jpg" />
</BasicMaterial>
</Plane>
I also tried with the default vertexShader and fragmentShader but it didn't work either. I am thinking that this might be related to this commit.
Also, the Stats
component didn't work, getting this error : Failed to resolve import "stats.js" from "node_modules/troisjs/src/components/misc/Stats.js". Does the file exist?
. I copy pasted the import from the doc : import Stats from 'troisjs/src/components/misc/Stats'
(using vitejs for development).
Actually it is updated on move.
i'm writing another demo with troisjs recently with three.sprite(not using trois sprite component because the sprite is not supported while coding this demo lol) & scene and i find out that $refs.sceneInstance.remove doesnt work. i've checked the sprites' parent is the scene's reference and $refs.sceneInstance.scene.remove doesn't work as well(but .add() api works fine ,curious)
`
//so this part of code do not work
// debugger;
// activatedNodeInstanceList.forEach(node=>{
// this.$refs.sceneInstance.remove(node);
// })
debugger;
//directly use removeFromParent api works fine
activatedNodeInstanceList.forEach(node=>{
node.removeFromParent();
})
`
trois version:0.3.2 three:0.129.0
original src code file
besides i see the doc installation is still using ^0.127 which is not support the removeFromParent api , but i check the trois Object3D sourcecode to find out it has already supported removeFromParent api :P
🎉🎉 Thank you for such amazing library! A great piece for vue x three community.
For me (heavy threejs + raf oriented user) this is already perfect!
but looking at react-three-fibers, I've got 1-2 suggestions for contributors to consider.
_dpi: Auto DPI scaling (setPixelRatio)
_toneMapping: ACES ToneMapping
_shadows: PCSS & VSM Shadow
_colors: this might be a bit involved (trois/src/materials/Texture.js), could we auto-fix encoding for all textures (also on colors : convertSRGBToLinear when possible, don't know how to proceed though)?
for ordinary vue-users, layout in the 3D world can be tough.. this is a heavy one too, but libs like Yoga could be used to provide layout 'containers'.
Please consider this as my own to-do too, I'll try to do something in next-proj if any of those sounds useful.
Actually it is not so easy to modify render loop from a component...
We could use the same design pattern as in R3F (or something similar) : the useFrame
hook
Open to suggestions :)
I am having this error after setting up the trios js
@/plugins/trois-js.js
import Vue from 'vue';
import {
TroisJSVuePlugin
} from 'troisjs';
if (process.browser) {
Vue.use(TroisJSVuePlugin);
}
@/pages/customize.vue
<template>
<Renderer ref="renderer">
<Camera :position="{ z: 100 }"></Camera>
<LambertMaterial id="material"></LambertMaterial>
<Scene>
<PointLight :position="{ y: 50, z: 50 }"></PointLight>
<Box ref="box" :size="10" :rotation="{ y: Math.PI / 4, z: Math.PI / 4 }" material="material"></Box>
</Scene>
</Renderer>
</template>
<script>
export default {
mounted() {
const renderer = this.$refs.renderer;
const box = this.$refs.box.mesh;
renderer.onBeforeRender(() => {
box.rotation.x += 0.01;
});
},
};
</script>
Error:
Uncaught SyntaxError: The requested module '/@fs/run/media/monster/Backup/manjaro/app/x-3D/frontend/node_modules/deepmerge/dist/cjs.js' does not provide an export named 'default'
I need to use both OrthographicCamera
and PerspectiveCamera
for my projects and is it possible to use this library to create multiple cameras and scenes?
It seems it's possible to do so with react-three-fiber like this below
https://codesandbox.io/s/react-three-fiber-viewcube-py4db?file=/src/App.js
For the moment I think it is still handy to use composition and options API.
Using only composition api => code more verbose, may be I'm wrong
But using both => more typescript tweaks...
in version 0.2.3 the material props work well like the code below
<ShaderMaterial :vertexShader="curlNoiseVertexShader" :uniforms="curNoiseUniforms" :fragmentShader="curlNoiseFragmentShader" />
but after updated to 0.3 the uniforms cannot be passed to the instance with the same code. I checked the ref instance to find out the vertexShader & fragmentShader work well, but uniforms appers to be the inital empty object. i also get a vue warning like this:
[Vue warn]: Extraneous non-props attributes (vertexShader, uniforms, fragmentShader) were passed to component but could not be automatically inherited because component renders fragment or text root nodes.
so is there anything should be changed in this usage?
Hello,
I'm trying to load a .glb file from Codepen assets but it doesn't fire the load/progress or error events.
You can see the pen here: https://codepen.io/7linternational/pen/yLMNGyp
any ideas?
First of all, thank you for an amazing library. It feels so easy to use yet pretty much customisable!
I'm still new to three.js so I'm not sure if my issue is related to this library. Appoligies if it's not the case.
I'm trying to raycasting sphere to add some click points on it, but if I place a 2d object with particular position set, the raycaster doesn't recoginise the object. I had some research and I found some hints on the web and wanted to add recursive
parameter true
to intersectObjects
of the raycaster instance. However, looking into your code, there is no way to add this option using your library (correct me if I'm wrong). I wonder if that's unnecessary or it's simply not added at this moment or I'm doing something completely wrong.
The code bellow is the minimum part of what I'm trying to add. If I remove this position prop and render it in a default position, this onclick event works
const position = {
x: radius * Math.sin(phi) * Math.cos(theta),
y: 1,
z: radius * Math.cos(phi),
};
<box :position="position" :scale="scale" @click="onClick">
<basicMaterial color="#fff" />
</box>
Thank you in advance.
flatShading has been moved to supported materials
Looks like there is some issue with using Trois in projects that already exist. I tried both the import and declare in main process as well as the direct import in the component and I get the same error both ways. I did download the starter app and that worked but I'm more interested in including Trois in my own bundle. I looked up the error in the source and it apparently has something to do with the intersect function. I did try adding Vite and ViteJS plugin-vue to no effect. The error says something about not having a proper loader but I'm not sure that is what the issue is since I tried Vite and it seems the start app is a pretty barebones implementation.
error in ./node_modules/troisjs/build/trois.module.js
Module parse failed: Unexpected token (128:34)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| onIntersectOver(overEvent);
| onIntersectEnter(enterEvent);
> component.onPointerOver?.(overEvent);
| component.onPointerEnter?.(enterEvent);
| }
@ ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader-v16/dist??ref--0-1!./src/router/views/Home.vue?vue&type=script&lang=js 3:0-84 9:9-12 10:12-18 11:21-36 12:16-26 13:14-22 14:11-16
@ ./src/router/views/Home.vue?vue&type=script&lang=js
@ ./src/router/views/Home.vue
@ ./src/router/index.js
@ ./src/main.js
@ multi (webpack)-dev-server/client?http://192.168.1.113:8080&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/main.js
Example : https://github.com/troisjs/trois/blob/typescript/src/geometries/BoxGeometry.ts
Type inference don't work as expected.
It works with :
export default defineComponent({
extends: Geometry,
props,
methods: {
createGeometry() {
this.geometry = createGeometry(this)
},
},
})
But only in generated .d.ts file, not in vs code (with vetur extension).
Strange because it works with props: { ...props }
, but not for parent props...
I think I will have to use a custom defineComponent
type (not easy, I tried) :
https://github.com/vuejs/vue-next/blob/master/packages/runtime-core/src/apiDefineComponent.ts
Or refactor geometries and meshes...
Hello,
I am wondering if there is an easy way to resize the canvas when the DOM parent of the canvas is changed. As it is now, a "resize" listener is set on the windows and the "onResize()" method is not exposed.
What would be the cleanest way to do it?
Thanks,
/CN
One of the most time-consuming parts of creating a new scene from scratch is placing items in the scene, so I'd love to add in an optional directive (v-transform-control
or similar) to allow easy placement, rotation, scaling, and copying items directly from the scene using TransformControls. I'll take a look at this when I have some more time - let me know if there are any other features you'd like to see!
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.