Skip to content

Commit

Permalink
feat: expose state from TresCanvas
Browse files Browse the repository at this point in the history
  • Loading branch information
@alvarosabu
alvarosabu committed Apr 4, 2023
1 parent 91d2531 commit eeeff2e
Show file tree
Hide file tree
Showing 6 changed files with 1,053 additions and 518 deletions.
32 changes: 16 additions & 16 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -67,37 +67,37 @@
"@stackblitz/sdk": "^1.8.1",
"@tresjs/cientos": "2.0.0-alpha.5",
"@types/three": "latest",
"@typescript-eslint/eslint-plugin": "^5.42.0",
"@typescript-eslint/parser": "^5.42.0",
"@vitejs/plugin-vue": "^4.0.0",
"@vitest/coverage-c8": "^0.29.2",
"@typescript-eslint/eslint-plugin": "^5.57.1",
"@typescript-eslint/parser": "^5.57.1",
"@vitejs/plugin-vue": "^4.1.0",
"@vitest/coverage-c8": "^0.29.8",
"@vitest/ui": "^0.29.2",
"@vue/test-utils": "^2.3.1",
"eslint": "^8.26.0",
"@vue/test-utils": "^2.3.2",
"eslint": "^8.37.0",
"eslint-config-prettier": "^8.5.0",
"eslint-plugin-vue": "^9.7.0",
"eslint-plugin-vue": "^9.10.0",
"gsap": "^3.11.4",
"happy-dom": "^8.7.1",
"jsdom": "^21.1.0",
"kolorist": "^1.7.0",
"pathe": "^1.1.0",
"prettier": "^2.8.6",
"release-it": "^15.9.1",
"prettier": "^2.8.7",
"release-it": "^15.10.1",
"rollup-plugin-analyzer": "^4.0.0",
"rollup-plugin-copy": "^3.4.0",
"rollup-plugin-visualizer": "^5.9.0",
"three": "latest",
"unocss": "^0.48.0",
"unocss": "^0.50.6",
"unplugin": "^1.3.1",
"unplugin-vue-components": "^0.24.1",
"vite": "^4.1.4",
"vite": "^4.2.1",
"vite-plugin-banner": "^0.7.0",
"vite-plugin-dts": "2.1.0",
"vite-plugin-inspect": "^0.7.16",
"vite-plugin-require-transform": "^1.0.9",
"vite-plugin-dts": "2.2.0",
"vite-plugin-inspect": "^0.7.18",
"vite-plugin-require-transform": "^1.0.12",
"vite-svg-loader": "^4.0.0",
"vitepress": "1.0.0-alpha.38",
"vitest": "^0.29.2",
"vitepress": "1.0.0-alpha.65",
"vitest": "^0.29.8",
"vue-demi": "^0.13.11"
}
}
81 changes: 28 additions & 53 deletions playground/src/components/TheExperience.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,21 +13,16 @@ import {
ACESFilmicToneMapping,
CustomToneMapping,
} from 'three'
import { TresCanvas } from '/@/'
import { reactive, ref } from 'vue'
import { OrbitControls, useTweakPane, TransformControls } from '@tresjs/cientos/'
import { useCamera } from '../core'
import { TresCanvas } from '../core/useRenderer/component'
/* import { OrbitControls, GLTFModel } from '@tresjs/cientos' */
const { updateCamera } = useCamera()
import { OrbitControls, useTweakPane, TransformControls } from '@tresjs/cientos'
updateCamera
/* import { OrbitControls, GLTFModel } from '@tresjs/cientos' */
const state = reactive({
const gl = reactive({
clearColor: '#201919',
shadows: true,
alpha: false,
useLegacyLights: true,
shadowMapType: BasicShadowMap,
outputEncoding: sRGBEncoding,
toneMapping: NoToneMapping,
Expand All @@ -37,16 +32,13 @@ const sphereRef = ref()
const { pane } = useTweakPane()
pane.addInput(state, 'clearColor', {
pane.addInput(gl, 'clearColor', {
label: 'Background Color',
colorMode: 'hex',
})
pane.addInput(state, 'shadows', {
pane.addInput(gl, 'shadows', {
label: 'Shadows',
})
pane.addInput(state, 'useLegacyLights', {
label: 'useLegacyLights',
})
pane
.addBlade({
Expand All @@ -59,7 +51,7 @@ pane
value: sRGBEncoding,
})
.on('change', ev => {
state.outputEncoding = ev.value
gl.outputEncoding = ev.value
})
pane
Expand All @@ -75,7 +67,7 @@ pane
value: BasicShadowMap,
})
.on('change', ev => {
state.shadowMapType = ev.value
gl.shadowMapType = ev.value
})
pane
Expand All @@ -94,50 +86,33 @@ pane
})
.on('change', ev => {
console.log(ev.value)
state.toneMapping = ev.value
gl.toneMapping = ev.value
})
function onPointerEnter(ev) {
console.log('onPointerEnter', ev)
}
function onPointerMove(ev) {
console.log('onPointerMove', ev)
}
const canvasRef = ref(null)
function onPointerLeave(ev) {
console.log('onPointerLeave', ev)
}
function onClick(ev) {
console.log('click', ev)
}
watchEffect(() => {
if (canvasRef.value) {
console.log(canvasRef.value)
}
})
</script>
<template>
<TresCanvas v-bind="state">
<TresCanvas v-bind="gl" ref="canvasRef">
<TresPerspectiveCamera :position="[5, 5, 5]" :fov="45" :near="0.1" :far="1000" :look-at="[-8, 3, -3]" />
<OrbitControls make-default />
<TresScene>
<TresAmbientLight :intensity="0.5" />
<TransformControls mode="scale" :object="sphereRef" />
<TresAmbientLight :intensity="0.5" />
<TransformControls mode="scale" :object="sphereRef" />

<TresMesh
ref="sphereRef"
:position="[0, 4, 0]"
cast-shadow
@pointer-enter="onPointerEnter"
@pointer-move="onPointerMove"
@pointer-leave="onPointerLeave"
@click="onClick"
>
<TresSphereGeometry />
<TresMeshToonMaterial color="#FBB03B" />
</TresMesh>
<TresDirectionalLight :position="[0, 8, 4]" :intensity="0.7" cast-shadow />
<TresMesh :rotation="[-Math.PI / 2, 0, 0]" receive-shadow>
<TresPlaneGeometry :args="[10, 10, 10, 10]" />
<TresMeshToonMaterial />
</TresMesh>
<TresDirectionalLight :position="[0, 2, 4]" :intensity="1" cast-shadow />
</TresScene>
<TresMesh ref="sphereRef" :position="[0, 4, 0]" cast-shadow>
<TresSphereGeometry />
<TresMeshToonMaterial color="#FBB03B" />
</TresMesh>
<TresDirectionalLight :position="[0, 8, 4]" :intensity="0.7" cast-shadow />
<TresMesh :rotation="[-Math.PI / 2, 0, 0]" receive-shadow>
<TresPlaneGeometry :args="[10, 10, 10, 10]" />
<TresMeshToonMaterial />
</TresMesh>
<TresDirectionalLight :position="[0, 2, 4]" :intensity="1" cast-shadow />
</TresCanvas>
</template>
2 changes: 1 addition & 1 deletion playground/src/pages/index.vue
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<script setup lang="ts"></script>
<template>
<Suspense>
<AnimatedModel />
<MultipleCanvas />
</Suspense>
</template>
Loading

0 comments on commit eeeff2e

Please sign in to comment.