+
+
+ Loading...
+
+
+
+
+
+ Loading FBX Model...
+ {{ Math.round(state.progress) }}%
+
+
+
+ Loading...
+ {{ state.progress }} %
+
+
+
+
+
+
diff --git a/playground/vue/src/pages/loaders/use-texture/PBRTextures.vue b/playground/vue/src/pages/loaders/use-texture/PBRTextures.vue
new file mode 100644
index 000000000..de059243e
--- /dev/null
+++ b/playground/vue/src/pages/loaders/use-texture/PBRTextures.vue
@@ -0,0 +1,84 @@
+
+
+
+
+
+
+ Loading...
+
+
+
+
+
+
+
+
diff --git a/playground/vue/src/pages/materials/CustomShaderMaterialDemo.vue b/playground/vue/src/pages/materials/CustomShaderMaterialDemo.vue
index ca68da0aa..44964b6dc 100644
--- a/playground/vue/src/pages/materials/CustomShaderMaterialDemo.vue
+++ b/playground/vue/src/pages/materials/CustomShaderMaterialDemo.vue
@@ -2,76 +2,67 @@
import {
CustomShaderMaterial,
OrbitControls,
- StatsGl,
+
+ useTexture,
} from '@tresjs/cientos'
-import { TresCanvas, useRenderLoop, useTexture } from '@tresjs/core'
+import { TresCanvas } from '@tresjs/core'
import { TresLeches, useControls } from '@tresjs/leches'
import { MeshMatcapMaterial } from 'three'
+import { reactive, ref, watch } from 'vue'
-import { nextTick, onMounted } from 'vue'
import '@tresjs/leches/styles'
-const { onLoop } = useRenderLoop()
-
const gl = {
clearColor: '#82DBC5',
}
-const texture01 = await useTexture({
- matcap: '/matcap_01.png',
-})
+const { state: texture01 } = useTexture('/matcap_01.png')
-const materialProps = {
+// Create a reactive object for material properties
+const materialProps = reactive({
baseMaterial: MeshMatcapMaterial,
- matcap: texture01.matcap,
+ matcap: texture01.value,
fragmentShader: `
- varying float vWobble;
+ varying float vWobble;
- uniform float u_Time;
+ uniform float u_Time;
- void main() {
- float wobble = vWobble * 0.5 + 0.5;
- vec4 csm_DiffuseColor2 = mix(vec4(0.0, 0.0, 0.0, 1.0), vec4(1.0, 0.0, 2.0, 1.0), wobble);
- csm_DiffuseColor = mix(csm_DiffuseColor, csm_DiffuseColor2, wobble);
- }
- `,
+ void main() {
+ float wobble = vWobble * 0.5 + 0.5;
+ vec4 csm_DiffuseColor2 = mix(vec4(0.0, 0.0, 0.0, 1.0), vec4(1.0, 0.0, 2.0, 1.0), wobble);
+ csm_DiffuseColor = mix(csm_DiffuseColor, csm_DiffuseColor2, wobble);
+ }
+`,
vertexShader: `
- uniform float u_Time;
- uniform float u_WobbleSpeed;
- uniform float u_WobbleAmplitude;
- uniform float u_WobbleFrequency;
+ uniform float u_Time;
+ uniform float u_WobbleSpeed;
+ uniform float u_WobbleAmplitude;
+ uniform float u_WobbleFrequency;
- varying float vWobble;
+ varying float vWobble;
- void main() {
- float wobble = sin(csm_Position.z * u_WobbleFrequency + u_Time * u_WobbleSpeed);
- csm_Position += normal * wobble * u_WobbleAmplitude;
+ void main() {
+ float wobble = sin(csm_Position.z * u_WobbleFrequency + u_Time * u_WobbleSpeed);
+ csm_Position += normal * wobble * u_WobbleAmplitude;
- vWobble = wobble;
- }
- `,
+ vWobble = wobble;
+ }
+`,
uniforms: {
u_Time: { value: 0 },
u_WobbleSpeed: { value: 3 },
u_WobbleAmplitude: { value: 0.07 },
u_WobbleFrequency: { value: 3 },
},
-}
-
-onMounted(async () => {
- await nextTick()
-
- onLoop(() => {
- materialProps.uniforms.u_Time.value
- += 0.01 * materialProps.uniforms.u_WobbleSpeed.value
- })
})
+// Create controls for the editable parameters
const { speed, amplitude, frequency } = useControls({
speed: {
value: materialProps.uniforms.u_WobbleSpeed.value,
min: 0,
max: 10,
+ step: 0.1,
},
amplitude: {
value: materialProps.uniforms.u_WobbleAmplitude.value,
@@ -83,19 +74,30 @@ const { speed, amplitude, frequency } = useControls({
value: materialProps.uniforms.u_WobbleFrequency.value,
min: 1,
max: 30,
+ step: 1,
},
})
-watch([speed.value, amplitude.value, frequency.value], () => {
- materialProps.uniforms.u_WobbleSpeed.value = speed.value.value
- materialProps.uniforms.u_WobbleAmplitude.value = amplitude.value.value
- materialProps.uniforms.u_WobbleFrequency.value = frequency.value.value
+// Watch for changes in controls and update the reactive object directly
+watch([speed, amplitude, frequency], ([newSpeed, newAmplitude, newFrequency]) => {
+ materialProps.uniforms.u_WobbleSpeed.value = newSpeed
+ materialProps.uniforms.u_WobbleAmplitude.value = newAmplitude
+ materialProps.uniforms.u_WobbleFrequency.value = newFrequency
})
+
+// Watch for texture changes and update the reactive object
+watch(texture01, (newTexture) => {
+ materialProps.matcap = newTexture
+})
+
+const onLoop = () => {
+ materialProps.uniforms.u_Time.value += 0.01 * materialProps.uniforms.u_WobbleSpeed.value
+}
+
+
+ Loading...
+ {{ state.progress }} %
+
+ ScreenQuad
+This component is intended for creating (slightly faster) custom, full-screen post-processing.
+Setup
+In this scene, there is a ScreenQuad. The ScreenQuad has a custom material. The material's vertex shader places it "in front of the camera".
Preview
+Bounds
+Setup
+In this scene, multiple objects are children of <Bounds/>. A pointerup on a child should move/rotate the camera to fit the child into the view.
lookAt(lookAt?, position?, up?)
+<Bounds> has a fit method that can be called imperatively.
+
+
+
+
+
+
Callback results
+onStart ({{ startCount }})
+ {{ startArg }} ++
onCancel ({{ cancelCount }})
+ {{ cancelArg }} ++
onEnd ({{ endCount }})
+ {{ endArg }} +Testing Notes
+OrbitControls zoom using an Orthographic camera can result in parts of the scene appearing "cut off", independent of <Bounds/>
Switching between Orthographic and Perspective Cameras leads to odd behavior, independent of <Bounds/>. To test, change isOrthographicCamera's value, save and reload the page.
The clip option sets the camera's clipping to a large multiple of the internal distance. To test, change the component's coefficient to a smaller number.
Stage
+Props
+ +{{ title }}
+ ++ +