Skip to content

Commit

Permalink
chore: fix playground demos
Browse files Browse the repository at this point in the history
  • Loading branch information
@alvarosabu
alvarosabu committed Apr 4, 2023
1 parent e3da1ea commit cc03568
Show file tree
Hide file tree
Showing 11 changed files with 124 additions and 122 deletions.
20 changes: 10 additions & 10 deletions playground/src/components/AnimatedModel.vue
View file
Original file line number Diff line number Diff line change
@@ -1,14 +1,15 @@
<script setup lang="ts">
import { Color, sRGBEncoding } from 'three'
/* import { OrbitControls, useTweakPane, useGLTF, useAnimations } from '@tresjs/cientos/' */
import { TresCanvas } from '/@/'
import { OrbitControls, useTweakPane, useGLTF, useAnimations } from '@tresjs/cientos'
const bgColor = new Color('#F78B3D')
const { pane } = useTweakPane()
const { scene: model, animations } = await useGLTF('/models/ugly-naked-bunny/ugly-naked-bunny-animated.gltf')
const { scene: model, animations } = await useGLTF(
'https://raw.githubusercontent.com/Tresjs/assets/main/models/gltf/ugly-naked-bunny/ugly-naked-bunny-animated.gltf',
)
const { actions, mixer } = useAnimations(animations, model)
Expand Down Expand Up @@ -36,7 +37,7 @@ pane
currentAction.play()
})
console.log({ animations, actions, mixer })
console.log({ model, animations, actions, mixer })
</script>

<template>
Expand All @@ -49,13 +50,12 @@ console.log({ animations, actions, mixer })
power-preference="high-performance"
:output-encoding="sRGBEncoding"
>
<TresPerspectiveCamera :position="[8, 8, 8]" :fov="45" :near="0.1" :far="10000" />
<OrbitControls />
<TresPerspectiveCamera :position="8" :fov="45" :near="0.1" :far="10000" />
<TresScene :fog="bgColor">
<TresAmbientLight :color="0xffffff" :intensity="0.75" />
<TresMesh v-bind="model" />
<!-- <FBXModel ref="jeepRef" path="/models/low-poly-truck/Jeep_done.fbx" /> -->
</TresScene>

<TresAmbientLight :color="0xffffff" :intensity="2" />
<TresMesh v-bind="model" />
<TresDirectionalLight />
</TresCanvas>
</Suspense>
</template>
13 changes: 9 additions & 4 deletions playground/src/components/FBXModels.vue
View file
Original file line number Diff line number Diff line change
@@ -1,14 +1,16 @@
<script setup lang="ts">
import { Color, sRGBEncoding } from 'three'
import { TresCanvas } from '/@/'
import { OrbitControls, useTweakPane, FBXModel, useFBX } from '@tresjs/cientos/'
import { OrbitControls, useTweakPane, FBXModel, useFBX } from '@tresjs/cientos'
const bgColor = new Color('#F78B3D')
useTweakPane()
const jeepRef = ref()
const model = await useFBX('/models/low-poly-truck/Jeep_done.fbx')
const model = await useFBX(
'https://raw.githubusercontent.com/Tresjs/assets/main/models/fbx/low-poly-truck/Jeep_done.fbx',
)
model.position.set(0, 4, 0)
model.scale.set(0.01, 0.01, 0.01)
model.updateMatrixWorld()
Expand All @@ -28,13 +30,16 @@ watch(jeepRef, ({ model }) => {
power-preference="high-performance"
:output-encoding="sRGBEncoding"
>
<OrbitControls />
<TresPerspectiveCamera :position="8" :fov="45" :near="0.1" :far="10000" />
<OrbitControls />

<TresAmbientLight :color="0xffffff" :intensity="0.75" />
<TresMesh v-bind="model" />
<Suspense>
<FBXModel ref="jeepRef" path="/models/low-poly-truck/Jeep_done.fbx" />
<FBXModel
ref="jeepRef"
path="https://raw.githubusercontent.com/Tresjs/assets/main//models/low-poly-truck/Jeep_done.fbx"
/>
</Suspense>
</TresCanvas>
</template>
47 changes: 23 additions & 24 deletions playground/src/components/TheEnvironment.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,29 +30,28 @@ watch(environmentTexture, ({ getTexture }) => {
<TresCanvas preset="realistic">
<TresPerspectiveCamera :position="[10, 10, 18]" :fov="45" :near="0.1" :far="1000" :look-at="[-8, 3, -3]" />
<PamCameraMouse :factor="2" />
<TresScene>
<Environment
ref="environmentTexture"
background
:files="environmentFiles"
:path="'https://raw.githubusercontent.com/Tresjs/assets/main/textures/environmentMap'"
/>
<!-- <Environment ref="environmentTexture" background preset="sunset" /> -->
<TresAmbientLight :intensity="0.5" />

<TresMesh ref="sphereRef" :position="[0, 4, 0]" cast-shadow>
<TresSphereGeometry />
<TresMeshStandardMaterial color="#FBB03B" :map="envMap" :metalness="1" :roughness="0" />
</TresMesh>
<Box :position="[2, 6, 0]" cast-shadow>
<TresMeshStandardMaterial color="#008080" :map="envMap" :metalness="1" :roughness="0" />
</Box>
<TresDirectionalLight :position="[0, 8, 4]" :intensity="0.7" cast-shadow />
<TresMesh :rotation="[-Math.PI / 2, 0, 0]" receive-shadow>
<TresPlaneGeometry :args="[20, 20, 20, 10]" />
<TresMeshToonMaterial />
</TresMesh>
<TresDirectionalLight :position="[0, 2, 4]" :intensity="1" cast-shadow />
</TresScene>

<Environment
ref="environmentTexture"
background
:files="environmentFiles"
:path="'https://raw.githubusercontent.com/Tresjs/assets/main/textures/environmentMap'"
/>
<!-- <Environment ref="environmentTexture" background preset="sunset" /> -->
<TresAmbientLight :intensity="0.5" />

<TresMesh ref="sphereRef" :position="[0, 4, 0]" cast-shadow>
<TresSphereGeometry />
<TresMeshStandardMaterial color="#FBB03B" :map="envMap" :metalness="1" :roughness="0" />
</TresMesh>
<Box :position="[2, 6, 0]" cast-shadow>
<TresMeshStandardMaterial color="#008080" :map="envMap" :metalness="1" :roughness="0" />
</Box>
<TresDirectionalLight :position="[0, 8, 4]" :intensity="0.7" cast-shadow />
<TresMesh :rotation="[-Math.PI / 2, 0, 0]" receive-shadow>
<TresPlaneGeometry :args="[20, 20, 20, 10]" />
<TresMeshToonMaterial />
</TresMesh>
<TresDirectionalLight :position="[0, 2, 4]" :intensity="1" cast-shadow />
</TresCanvas>
</template>
35 changes: 17 additions & 18 deletions playground/src/components/TheEvents.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,25 +35,24 @@ function onPointerLeave(ev) {
<template>
<TresCanvas v-bind="state">
<TresPerspectiveCamera :position="[11, 11, 11]" :fov="45" :near="0.1" :far="1000" :look-at="[-8, 3, -3]" />

<TresDirectionalLight :position="[0, 8, 4]" :intensity="0.2" cast-shadow />
<OrbitControls />
<TresScene>
<TresDirectionalLight :position="[0, 8, 4]" :intensity="0.2" cast-shadow />
<template v-for="x in [-2.5, 0, 2.5]">
<template v-for="y in [-2.5, 0, 2.5]">
<TresMesh
v-for="z in [-2.5, 0, 2.5]"
:key="[x, y, z]"
:position="[x, y, z]"
@click="onClick"
@pointer-enter="onPointerEnter"
@pointer-leave="onPointerLeave"
>
<TresBoxGeometry :args="[1, 1, 1]" />
<TresMeshToonMaterial color="#efefef" />
</TresMesh>
</template>
<template v-for="x in [-2.5, 0, 2.5]">
<template v-for="y in [-2.5, 0, 2.5]">
<TresMesh
v-for="z in [-2.5, 0, 2.5]"
:key="[x, y, z]"
:position="[x, y, z]"
@click="onClick"
@pointer-enter="onPointerEnter"
@pointer-leave="onPointerLeave"
>
<TresBoxGeometry :args="[1, 1, 1]" />
<TresMeshToonMaterial color="#efefef" />
</TresMesh>
</template>
<TresAmbientLight :intensity="0.5" />
</TresScene>
</template>
<TresAmbientLight :intensity="0.5" />
</TresCanvas>
</template>
7 changes: 4 additions & 3 deletions playground/src/components/TheGizmos.vue
View file
Original file line number Diff line number Diff line change
@@ -1,13 +1,12 @@
<script setup lang="ts">
import { BasicShadowMap, sRGBEncoding, NoToneMapping } from 'three'
import { TresCanvas } from '/@/'
import { OrbitControls, useTweakPane } from '@tresjs/cientos'
import { OrbitControls, TransformControls, useTweakPane } from '@tresjs/cientos'
const state = shallowReactive({
clearColor: '#201919',
shadows: true,
alpha: false,
physicallyCorrectLights: true,
shadowMapType: BasicShadowMap,
outputEncoding: sRGBEncoding,
toneMapping: NoToneMapping,
Expand Down Expand Up @@ -71,13 +70,15 @@ axisFolder.addInput(transformState, 'showZ')

<template>
<TresCanvas v-bind="state">
<OrbitControls make-default />
<TresPerspectiveCamera :position="[11, 11, 11]" :fov="45" :near="0.1" :far="1000" :look-at="[-8, 3, -3]" />

<OrbitControls make-default />
<TresMesh ref="boxRef" :position="[0, 4, 0]" cast-shadow>
<TresBoxGeometry :args="[1.5, 1.5, 1.5]" />
<TresMeshToonMaterial color="#FBB03B" />
</TresMesh>
<TransformControls :object="boxRef" v-bind="transformState" />

<TresMesh :rotation="[-Math.PI / 2, 0, 0]" receive-shadow>
<TresPlaneGeometry :args="[10, 10, 10, 10]" />
<TresMeshToonMaterial />
Expand Down
27 changes: 13 additions & 14 deletions playground/src/components/TheGroups.vue
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
<script setup lang="ts">
import { TresCanvas } from '/@/'
import { useRenderLoop } from '/@/composables/useRenderLoop'
import { ref } from 'vue'
import { OrbitControls } from '@tresjs/cientos/'
Expand All @@ -18,20 +19,18 @@ onLoop(() => {
<TresCanvas>
<TresPerspectiveCamera :position="[5, 5, 5]" :fov="75" :aspect="1" :near="0.1" :far="1000" />
<OrbitControls />
<TresScene>
<TresAmbientLight :color="0xffffff" :intensity="0.5" />
<TresGroup ref="groupRef" :position="[0, -4, -5]">
<TresMesh :scale="1" :position="[-4, 0, 0]" cast-shadow>
<TresSphereGeometry :args="[1, 500, 500]" />
<TresMeshToonMaterial color="#FBB03B" />
</TresMesh>
<TresMesh :scale="1" :position="[4, 0, 0]" cast-shadow>
<TresSphereGeometry :args="[1, 500, 500]" />
<TresMeshToonMaterial color="teal" />
</TresMesh>
</TresGroup>
<TresAxesHelper />
</TresScene>
<TresAmbientLight :color="0xffffff" :intensity="0.5" />
<TresGroup ref="groupRef" :position="[0, -4, -5]">
<TresMesh :scale="1" :position="[-4, 0, 0]" cast-shadow>
<TresSphereGeometry :args="[1, 500, 500]" />
<TresMeshToonMaterial color="#FBB03B" />
</TresMesh>
<TresMesh :scale="1" :position="[4, 0, 0]" cast-shadow>
<TresSphereGeometry :args="[1, 500, 500]" />
<TresMeshToonMaterial color="teal" />
</TresMesh>
</TresGroup>
<TresAxesHelper />
</TresCanvas>
</div>
</template>
13 changes: 6 additions & 7 deletions playground/src/components/TheSmallExperience.vue
View file
Original file line number Diff line number Diff line change
@@ -1,18 +1,17 @@
<script setup lang="ts">
import { TresCanvas } from '/@/'
import { OrbitControls } from '@tresjs/cientos/'
</script>
<template>
<div class="container">
<TresCanvas>
<TresPerspectiveCamera :position="[5, 5, 5]" :fov="75" :aspect="1" :near="0.1" :far="1000" />
<OrbitControls />
<TresScene>
<TresAmbientLight :color="0xffffff" :intensity="0.5" />
<TresMesh ref="sphereRef" :scale="1" cast-shadow>
<TresSphereGeometry :args="[1, 500, 500]" />
<TresMeshToonMaterial color="#FBB03B" />
</TresMesh>
</TresScene>
<TresAmbientLight :color="0xffffff" :intensity="0.5" />
<TresMesh ref="sphereRef" :scale="1" cast-shadow>
<TresSphereGeometry :args="[1, 500, 500]" />
<TresMeshToonMaterial color="#FBB03B" />
</TresMesh>
</TresCanvas>
</div>
</template>
Expand Down
74 changes: 36 additions & 38 deletions playground/src/components/VectorSetProps.vue
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<script setup lang="ts">
import { sRGBEncoding, BasicShadowMap, NoToneMapping } from 'three'
import { TresCanvas } from '/@/'
import { OrbitControls } from '@tresjs/cientos'
// import { useRenderLoop } from '..'
/* import { OrbitControls, GLTFModel } from '@tresjs/cientos' */
Expand All @@ -27,43 +27,41 @@ const state = reactive({
:look-at="[-8, 3, -3]"
/>
<OrbitControls make-default />
<TresScene>
<TresAmbientLight :intensity="0.5" />
<TresAmbientLight :intensity="0.5" />

<TresMesh
:scale-x="1.1"
:scale-y="2"
:scale-z="3"
:rotation-x="Math.PI * 1.5"
:rotation-y="Math.PI * 0.6"
:rotation-z="Math.PI * 0.2"
:position-y="1"
:position-z="-2"
cast-shadow
>
<TresBoxGeometry />
<TresMeshToonMaterial color="#FBB03B" />
</TresMesh>
<TresMesh
:scale-x="1.1"
:scale-y="2"
:scale-z="3"
:rotation-y="Math.PI * 0.6"
:rotation-x="Math.PI * 1.5"
:rotation-z="Math.PI * 0.2"
:position-y="1"
:position-z="2"
cast-shadow
>
<TresBoxGeometry />
<TresMeshToonMaterial :color-r="0xff / 255" :color-g="0x0 / 255" :color-b="0xff / 255" />
</TresMesh>
<TresDirectionalLight :position-y="8" :position-z="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-y="2" :position-z="4" :intensity="1" cast-shadow />
</TresScene>
<TresMesh
:scale-x="1.1"
:scale-y="2"
:scale-z="3"
:rotation-x="Math.PI * 1.5"
:rotation-y="Math.PI * 0.6"
:rotation-z="Math.PI * 0.2"
:position-y="1"
:position-z="-2"
cast-shadow
>
<TresBoxGeometry />
<TresMeshToonMaterial color="#FBB03B" />
</TresMesh>
<TresMesh
:scale-x="1.1"
:scale-y="2"
:scale-z="3"
:rotation-y="Math.PI * 0.6"
:rotation-x="Math.PI * 1.5"
:rotation-z="Math.PI * 0.2"
:position-y="1"
:position-z="2"
cast-shadow
>
<TresBoxGeometry />
<TresMeshToonMaterial :color-r="0xff / 255" :color-g="0x0 / 255" :color-b="0xff / 255" />
</TresMesh>
<TresDirectionalLight :position-y="8" :position-z="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-y="2" :position-z="4" :intensity="1" cast-shadow />
</TresCanvas>
</template>
2 changes: 1 addition & 1 deletion playground/src/components/portal-journey/index.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,8 +13,8 @@ const gl = {

<template>
<TresCanvas v-bind="gl">
<OrbitControls />
<TresPerspectiveCamera :position="[5, 5, 5]" :fov="45" :aspect="1" :near="0.1" :far="1000" />
<OrbitControls />
<TresFog :args="[gl.clearColor, 0.1, 75]" />
<Suspense>
<ThePortal />
Expand Down
4 changes: 2 additions & 2 deletions playground/src/components/shaders-experiment/index.vue
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<script setup lang="ts">
import { BasicShadowMap, sRGBEncoding, NoToneMapping, Vector2 } from 'three'
import { TresCanvas, TresInstance, useRenderLoop } from '@tresjs/core'
import { TresCanvas, TresInstance, useRenderLoop } from '/@/'
import { OrbitControls } from '@tresjs/cientos'
import vertexShader from './shaders/vertex.glsl'
import fragmentShader from './shaders/fragment.glsl'
Expand Down Expand Up @@ -33,8 +33,8 @@ onLoop(({ elapsed }) => {

<template>
<TresCanvas v-bind="gl">
<OrbitControls />
<TresPerspectiveCamera :position="[11, 11, 11]" />
<OrbitControls />
<TresMesh ref="blobRef" :position="[0, 4, 0]">
<TresSphereGeometry :args="[2, 32, 32]" />
<TresShaderMaterial :vertex-shader="vertexShader" :fragment-shader="fragmentShader" :uniforms="uniforms" />
Expand Down
4 changes: 3 additions & 1 deletion playground/src/pages/index.vue
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,6 @@
<script setup lang="ts"></script>
<template>
<MultipleCanvas />
<Suspense>
<AnimatedModel />
</Suspense>
</template>

0 comments on commit cc03568

Please sign in to comment.