tresjs / lab Goto Github PK
View Code? Open in Web Editor NEWShowcase and examples lab for TresJS
Home Page: https://lab.tresjs.org/
Showcase and examples lab for TresJS
Home Page: https://lab.tresjs.org/
Using the bunny gltf model shows with tweakpane how you can play and pause animations.
https://cientos.tresjs.org/guide/abstractions/use-animations.html
I'm trying to use a v-for to instantiate some meshes, but it looks like the v-for has no reactivity with the scene. Is this expected behavior? If so, any ideas on how to make the v-for reactive? Thanks.
I like your library very much and want to learn and use it in the website I'm about to create.
When I tried to check the playground demo, I found that it didn't display properly.
node version > 18
Steps 1: pnpm install
Steps 2: pnpm dev
My local implementation localhost:3000
https://playground.tresjs.org/vue/portal-journey/
Excuse me, which step did I do wrong?
Currently , my only solution is change import
import { TresCanvas as TC, TresCanvasProps } from '@tresjs/core';
To
import { TresCanvas as TC } from '@tresjs/core';
import { TresCanvasProps } from '@tresjs/core/dist/components/TresCanvas.vue';
Have anyone same problem when run experiments ? I tried on Window 10 , node 19.6 and Mac 18.16 have same problem and solution :/
Move the following demos to the docs.
Hi!!
Pls help, how to work with STL models in Tres?
I'm load model via STLloader as in THREE, and how I can render it now?
Trying primitive
<Suspense>
<primitive :object="mySTLModel" />
</Suspense>
But get Failed to resolve component: primitive
The default perspective camera adjustment parameters are normal, but when switching to orthorgraphic camera, the adjustment parameters have no effect. When I switch back to the perspective camera, adjusting the parameters will have no effect too.
I try to use stackblitz default 2.1.2 version works, but 3.0.1 version is problematic.
https://stackblitz.com/edit/tresjs-basic-by5qfm?file=package.json
No response
No response
npm
Inspire on https://madewithvuejs.com/
Requested by Jessica Sachs @JessicaSachs
I think it will be a really cool demo to cover:
Hello. First of all I appreciate a lot for your effort to develop and maintain it.
I'm really happy to meet this awesome library.
lab.tresjs.org
I'm writing to notify the possibility that there are some wrong settings from server-side.
Today I tried to see the ShowCase page (lab.tresjs.org), but I can't do like the photo below.
It fails to get belows according to console messages.
Specific links are also not working. (2 examples)
When I clone and run it at local environment, it works well.
Thank you.
Thumbnails have varying aspect ratios, which makes the landing page look a bit messy.
Here's React Spring's demo page:
They ask users to submit 16:9 thumbnails.
<TresCanvas clear-color="#000000">
<TresPerspectiveCamera
:position="[0, 0, 5000]"
:fov="50"
:aspect="1"
:near="1"
:far="10000"
/>
<TresScene>
<TresPoints>
<TresBufferGeometry :position="[vertices, 3]" />
<TresPointsMaterial :color="0x888888" />
</TresPoints>
</TresScene>
</TresCanvas>
No matter how i change aspect
, for exampe 0.5 or 2, there is no change in view.
Maybe i miss something?
Hello. I appreciate your work for this wonderful library.
As I follow the steps detailed in [https://docs.tresjs.org/advanced/primitive.html](url) using BatchedMesh, it thow an exception as follows:
My code example is as below:
`<script setup lang="ts">
const geometry2 = new THREE.ConeGeometry();
const geometry3 = new THREE.BoxGeometry();
const mtl3 = new THREE.MeshBasicMaterial({ color: 0xffff00 })
const meshWithMtl2 = new THREE.BatchedMesh(20, 1000, 1000, mtl3)
var geoId = meshWithMtl2.addGeometry(geometry2);
meshWithMtl2.addInstance(geoId)
var geoId2 = meshWithMtl2.addGeometry(geometry3);
meshWithMtl2.addInstance(geoId2)
</script>
Check if demos are broken after @tresjs/core@alpha
Hello. I appreciate your work for this wonderful library.
As I follow the steps detailed in [https://docs.tresjs.org/advanced/primitive.html](url) using BatchedMesh, it thow an exception as follows:
My code example is as below:
`<script setup lang="ts">
const geometry2 = new THREE.ConeGeometry();
const geometry3 = new THREE.BoxGeometry();
const mtl3 = new THREE.MeshBasicMaterial({ color: 0xffff00 })
const meshWithMtl2 = new THREE.BatchedMesh(20, 1000, 1000, mtl3)
var geoId = meshWithMtl2.addGeometry(geometry2);
meshWithMtl2.addInstance(geoId)
var geoId2 = meshWithMtl2.addGeometry(geometry3);
meshWithMtl2.addInstance(geoId2)
</script>
Hi Alvaro,
First of all thank you very much for all your work in Tresjs. It's great!
I have been playing around with the playground examples and noticed that hot reload doesn't work when updating a shader file in the Basic Shaders example.
vite-plugin-glsl seems to work fine on a separate vite project, so I am not sure if this issue has to do with TresJS or Nuxt or the glsl plugin. I was wondering if you have any idea on what could be causing the screen to go blank when editing shader files. If I find a solution I'll make sure to let you know as well.
Thank you,
Paulo
@alvarosabu there are a lot of demos without code examples, and to be honest is quite time-consuming to do it manually.
Would it be better to just send the people directly to the code of the implementation in GitHub? Like in Threejs examples?
Hello. I have encountered with a problem with events of component 'primitive'.
I initialize a primitive component to bond with an array as below:
`
<script setup lang="ts"> const gl = { clearColor: '#12B7F3', shadows: true, alpha: false, shadowMapType: BasicShadowMap, outputColorSpace: SRGBColorSpace, toneMapping: NoToneMapping, }; var testList = ref>([]) onMounted(() => { const geometry2 = new THREE.ConeGeometry(); const mtl2 = new THREE.MeshBasicMaterial({ color: 0x00ffff }) const mesh2 = new THREE.Mesh(geometry2, mtl2) testList.value.push(mesh2) }) const clickMethod = () => { const geometry1 = new THREE.ConeGeometry(); const mtl1 = new THREE.MeshBasicMaterial({ color: 0xffff00 }) const mesh1 = new THREE.Mesh(geometry1, mtl1 ) testList.value.push(mesh1) } </script>`
As result, the mesh2 created in OnMounted() can arise the 'pointer-enter' and 'click' events. But mesh1 created by clicking button failed to arise these two events. Eager to get your help.
So there is my code. And my canvas has black background and i wanna change it to transparent but it doesnt work. PLS HELP😿
<script setup> import { TresCanvas } from "@tresjs/core"; import { OrbitControls, useFBX } from "@tresjs/cientos"; const path = "/src/assets/model/room.fbx"; const scene = await useFBX(path); console.log(scene); </script>This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.
These updates have all been created already. Click a checkbox below to force a retry/rebase of any.
three
, @types/three
).github/workflows/lint-pr.yml
amannn/action-semantic-pull-request v5
package.json
@tresjs/post-processing ^0.7.0
mdast-util-to-string ^4.0.0
three ^0.160.0
three-custom-shader-material ^5.4.0
unist-util-stringify-position ^4.0.0
@iconify-json/carbon ^1.1.27
@iconify-json/game-icons ^1.1.7
@iconify-json/ic ^1.1.17
@iconify-json/logos ^1.1.42
@nuxt/content ^2.10.0
@nuxt/image ^1.2.0
@nuxt/image-edge 1.2.0-28425033.0a5974b
@nuxtjs/color-mode ^3.3.2
@tresjs/cientos 3.9.0
@tresjs/core 3.9.0
@tresjs/eslint-config-vue ^0.2.1
@tresjs/leches 0.15.0-next.1
@tresjs/nuxt 3.0.3
@tweakpane/plugin-essentials ^0.2.1
@types/three ^0.160.0
@unocss/nuxt ^0.58.3
gsap ^3.12.4
nuxt ^3.9.1
nuxt-svgo ^4.0.0
postprocessing 6.36.0
vite-svg-loader ^5.1.0
The Manual Post Processing demo doesn't change when changing the various post-processing options.
The demo watches a ref called context
. It expects that the ref here <TresCanvas ref="content">
will have a renderer in its value, when its updated:
watchEffect(() => {
if (context.value) {
context.value.renderer.setSize(width.value, height.value)
context.value.renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2))
effectComposer = new EffectComposer(context.value.renderer)
effectComposer.addPass(new RenderPass(context.value.scene, context.value.camera))
onLoop(() => {
effectComposer.render()
})
}
})
... but it doesn't. Here's the browser error message:
TypeError: a.value.renderer is undefined
Checking the Tres documentation for Renderer
, it doesn't appear that adding a ref on <TresCanvas />
is a documented way to access the renderer, so I didn't file an issue there.
Mac M1
Mac OS 13.1
Firefox 117.0.1
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.