Skip to content

Commit

Permalink
feat(core): function props and demos updated
Browse files Browse the repository at this point in the history
  • Loading branch information
@alvarosabu
alvarosabu committed Mar 13, 2023
1 parent 2390ec1 commit fa072cd
Show file tree
Hide file tree
Showing 6 changed files with 98 additions and 148 deletions.
63 changes: 2 additions & 61 deletions packages/tres/src/App.vue
View file
Original file line number Diff line number Diff line change
@@ -1,69 +1,10 @@
<script setup lang="ts">
import { provide, ref, watchEffect } from 'vue'
import { OrbitControls } from '../../cientos/src/'
import TresCanvas from './components/TresCanvas'
import { useRenderLoop, useTres } from '/@/composables'
import AkuAku from './demos/AkuAku.vue'
import Shapes from './demos/Shapes.vue'
// import TheEvents from '/@/components/TheEvents.vue'
const gl = {
antialias: true,
alpha: true,
shadows: true,
clearColor: '#82DBC5',
}
const { state } = useTres()
const { onLoop } = useRenderLoop()
watchEffect(() => {
if (state.camera && state.renderer) {
/* controls = new OrbitControls(state.camera, state.renderer.domElement)
controls.enableDamping = true
controls.dampingFactor = 0.05
controls.screenSpacePanning = false
controls.minDistance = 1
controls.maxDistance = 500
controls.maxPolarAngle = Math.PI / 2 */
}
})
/* onLoop(() => {
if (controls) {
controls.update()
}
}) */
const gridVisible = ref(false)
function click(e) {
console.log('click', e)
gridVisible.value = !gridVisible.value
}
function enter(e) {
console.log('enter', e)
}
</script>

<template>
<TresCanvas v-bind="gl">
<OrbitControls />
<TresPerspectiveCamera :args="[75, 1, 0.1, 1000]" :position="[0, 2, 7]"></TresPerspectiveCamera>
<!-- <TresOrbitControls v-if="state.camera" :args="[state.camera, state.renderer.domElement]" /> -->
<TresAmbientLight :color="0xffffff" :intensity="0.75" />
<TresDirectionalLight :color="0xffffff" :intensity="2" :position="[-2, 2, 0]" cast-shadow />
<TresMesh :position="[0, 3, 0]" @click="click" @pointer-enter="enter" cast-shadow>
<TresSphereGeometry :args="[1, 32, 16]"></TresSphereGeometry>
<TresMeshToonMaterial color="teal"></TresMeshToonMaterial>
</TresMesh>
<TresMesh :position="[0, 0, 0]" receive-shadow :rotation-x="-Math.PI / 2">
<TresPlaneGeometry :args="[12, 12, 100, 100]"></TresPlaneGeometry>
<TresMeshToonMaterial color="gray"></TresMeshToonMaterial>
</TresMesh>
<Suspense>
<AkuAku />
</Suspense>
<TresGridHelper :args="[4, 4]"></TresGridHelper>
</TresCanvas>
<Shapes />
</template>

<style>
Expand Down
29 changes: 21 additions & 8 deletions packages/tres/src/core/nodeOps.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import { Mesh } from 'three'
import { useCamera, useRaycaster, useRenderLoop, useLogger } from '/@/composables'
import { RendererOptions } from 'vue'
import { catalogue } from './catalogue'
import { useEventListener } from '@vueuse/core'
import { isFunction, useEventListener } from '@vueuse/core'
import { TresEvent, TresObject } from '../types'
import { isHTMLTag, kebabToCamel } from '../utils'

Expand Down Expand Up @@ -45,6 +45,7 @@ export const nodeOps: RendererOptions<TresObject, TresObject> = {
'Camera is positioned at the center of the scene [0,0,0], if this is not intentional try setting a position if your scene seems empty 🤗',
)
}
instance.lookAt(69, 69, 69)
const { pushCamera } = useCamera()
pushCamera(instance)
}
Expand All @@ -58,7 +59,7 @@ export const nodeOps: RendererOptions<TresObject, TresObject> = {
tag,

instance,
threeObj: catalogue[tag.replace('Tres', '')],
threeObj: catalogue.value[tag.replace('Tres', '')],
})

return instance
Expand All @@ -69,7 +70,6 @@ export const nodeOps: RendererOptions<TresObject, TresObject> = {
//vue core
/* parent.insertBefore(child, anchor || null) */
if (parent?.isObject3D && child?.isObject3D) {
console.log('insert', { child, parent, anchor })
const index = anchor ? parent.children.indexOf(anchor) : 0
child.parent = parent
parent.children.splice(index, 0, child)
Expand Down Expand Up @@ -127,22 +127,35 @@ export const nodeOps: RendererOptions<TresObject, TresObject> = {
},
patchProp(node, prop, _prevValue, nextValue) {
if (node) {
/* if (node.isCamera && prop === 'look-at') {
debugger
} */
let root = node
let key = prop
let target = root?.[kebabToCamel(key)]
const camelKey = kebabToCamel(key)
let target = root?.[camelKey]

if (!node.parent) {
node.parent = scene as TresObject
}

// Traverse pierced props (e.g. foo-bar=value => foo.bar = value)
if (key.includes('-') && !Object.keys(root).includes(kebabToCamel(key))) {
if (key.includes('-') && target === undefined) {
const chain = key.split('-')
target = chain.reduce((acc, key) => acc[key], root)
target = chain.reduce((acc, key) => acc[kebabToCamel(key)], root)
key = chain.pop() as string

if (!target?.set) root = chain.reduce((acc, key) => acc[key], root)
if (!target?.set) root = chain.reduce((acc, key) => acc[kebabToCamel(key)], root)
}
let value = nextValue
if (value === '') value = true
// Set prop, prefer atomic methods if applicable
if (!target?.set) root[kebabToCamel(key)] = value
if (isFunction(target)) {
/* if (Array.isArray(value)) target(...value)
else target(value) */
return
}
if (!target?.set && !isFunction(target)) root[camelKey] = value
else if (target.constructor === value.constructor && target?.copy) target?.copy(value)
else if (Array.isArray(value)) target.set(...value)
else if (!target.isColor && target.setScalar) target.setScalar(value)
Expand Down
37 changes: 18 additions & 19 deletions packages/tres/src/demos/FBXModels.vue
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<script setup lang="ts">
import { ref, watch } from 'vue'
import { Color, sRGBEncoding } from 'three'
import { TresCanvas } from '../components/TresCanvas'
import { OrbitControls, useTweakPane, FBXModel, useFBX } from '../../../cientos/src/'
const bgColor = new Color('#F78B3D')
Expand All @@ -22,22 +22,21 @@ watch(jeepRef, ({ getModel }) => {
</script>

<template>
<Suspense>
<TresCanvas
:clear-color="bgColor"
shadows
alpha
window-size
power-preference="high-performance"
:output-encoding="sRGBEncoding"
>
<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>
</TresCanvas>
</Suspense>
<TresCanvas
:clear-color="bgColor"
shadows
alpha
window-size
power-preference="high-performance"
:output-encoding="sRGBEncoding"
>
<OrbitControls />
<TresPerspectiveCamera :position="8" :fov="45" :near="0.1" :far="10000" />

<TresAmbientLight :color="0xffffff" :intensity="0.75" />
<TresMesh v-bind="model" />
<Suspense>
<FBXModel ref="jeepRef" path="/models/low-poly-truck/Jeep_done.fbx" />
</Suspense>
</TresCanvas>
</template>
86 changes: 43 additions & 43 deletions packages/tres/src/demos/Shapes.vue
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
<script setup lang="ts">
import { BasicShadowMap, CubicBezierCurve3, DoubleSide, NoToneMapping, sRGBEncoding, Vector3 } from 'three'
import { reactive, shallowRef, watch } from 'vue'
import { TresCanvas } from '/@/components/TresCanvas'
import {
Plane,
Tube,
Expand Down Expand Up @@ -86,48 +87,47 @@ const tubePath = new CubicBezierCurve3(
<TresCanvas v-bind="state">
<TresPerspectiveCamera :position="[5, 5, 5]" :fov="75" :aspect="1" :near="0.1" :far="1000" />
<OrbitControls />
<TresScene>
<TresAmbientLight :color="0xffffff" :intensity="1" />
<TresDirectionalLight :position="[0, 8, 4]" :intensity="0.7" cast-shadow />
<Plane ref="planeRef" :args="[12, 8]" :position="[-2, 4, 0]" receive-shadow>
<TresMeshToonMaterial color="teal" />
</Plane>
<Box ref="boxRef" :arg0s="[1, 1, 1]" :position="[0, 6, 0]" cast-shadow>
<TresMeshToonMaterial color="orange" />
</Box>
<Sphere ref="sphereRef" :args="[1, 32, 16]" :position="[2, 6, 0]" cast-shadow>
<TresMeshToonMaterial color="pink" />
</Sphere>
<Torus ref="torusRef" :args="[0.75, 0.4, 16, 80]" :position="[-2, 6, 0]" cast-shadow>
<TresMeshToonMaterial color="cyan" />
</Torus>
<TorusKnot ref="torusKnotRef" :args="[0.6, 0.2, 64, 8]" :position="[-2, 6, 2]" cast-shadow>
<TresMeshToonMaterial color="lime" />
</TorusKnot>
<Circle ref="circleRef" :args="[0.9, 32]" :position="[0, 6, 2]" :rotation="[Math.PI, 0, 0]" cast-shadow>
<TresMeshToonMaterial color="lightsalmon" :side="DoubleSide" />
</Circle>
<Cone ref="coneRef" :args="[1, 1, 6]" :position="[2, 6, 2]" :rotation="[Math.PI, 0, 0]" cast-shadow>
<TresMeshToonMaterial color="slateblue" />
</Cone>
<Tube ref="tubeRef" :args="[tubePath, 20, 0.2, 8, false]" :position="[2, 6, -2]" cast-shadow>
<TresMeshToonMaterial color="lightblue" />
</Tube>
<Ring ref="ringRef" :args="[0.5, 1, 32]" :position="[0, 6, -2]" :rotation="[Math.PI, 0, 0]" cast-shadow>
<TresMeshToonMaterial color="purple" :side="DoubleSide" />
</Ring>
<Tetrahedron ref="tetrahedronRef" :args="[1, 0]" :position="[-2, 6, -2]" cast-shadow>
<TresMeshToonMaterial color="yellow" />
</Tetrahedron>
<Icosahedron ref="icosahedronRef" :args="[1, 0]" :position="[-4, 6, -2]" cast-shadow>
<TresMeshToonMaterial color="red" />
</Icosahedron>
<Octahedron ref="octahedronRef" :args="[1, 0]" :position="[-4, 6, 0]" cast-shadow>
<TresMeshToonMaterial color="greenyellow" />
</Octahedron>
<Dodecahedron ref="dodecahedronRef" :args="[1, 0]" :position="[-4, 6, 2]" cast-shadow>
<TresMeshToonMaterial color="deeppink" />
</Dodecahedron>
</TresScene>

<TresAmbientLight :color="0xffffff" :intensity="1" />
<TresDirectionalLight :position="[0, 8, 4]" :intensity="0.7" cast-shadow />
<Plane ref="planeRef" :args="[12, 8]" :position="[-2, 4, 0]" receive-shadow>
<TresMeshToonMaterial color="teal" />
</Plane>
<Box ref="boxRef" :arg0s="[1, 1, 1]" :position="[0, 6, 0]" cast-shadow>
<TresMeshToonMaterial color="orange" />
</Box>
<Sphere ref="sphereRef" :args="[1, 32, 16]" :position="[2, 6, 0]" cast-shadow>
<TresMeshToonMaterial color="pink" />
</Sphere>
<Torus ref="torusRef" :args="[0.75, 0.4, 16, 80]" :position="[-2, 6, 0]" cast-shadow>
<TresMeshToonMaterial color="cyan" />
</Torus>
<TorusKnot ref="torusKnotRef" :args="[0.6, 0.2, 64, 8]" :position="[-2, 6, 2]" cast-shadow>
<TresMeshToonMaterial color="lime" />
</TorusKnot>
<Circle ref="circleRef" :args="[0.9, 32]" :position="[0, 6, 2]" :rotation="[Math.PI, 0, 0]" cast-shadow>
<TresMeshToonMaterial color="lightsalmon" :side="DoubleSide" />
</Circle>
<Cone ref="coneRef" :args="[1, 1, 6]" :position="[2, 6, 2]" :rotation="[Math.PI, 0, 0]" cast-shadow>
<TresMeshToonMaterial color="slateblue" />
</Cone>
<Tube ref="tubeRef" :args="[tubePath, 20, 0.2, 8, false]" :position="[2, 6, -2]" cast-shadow>
<TresMeshToonMaterial color="lightblue" />
</Tube>
<Ring ref="ringRef" :args="[0.5, 1, 32]" :position="[0, 6, -2]" :rotation="[Math.PI, 0, 0]" cast-shadow>
<TresMeshToonMaterial color="purple" :side="DoubleSide" />
</Ring>
<Tetrahedron ref="tetrahedronRef" :args="[1, 0]" :position="[-2, 6, -2]" cast-shadow>
<TresMeshToonMaterial color="yellow" />
</Tetrahedron>
<Icosahedron ref="icosahedronRef" :args="[1, 0]" :position="[-4, 6, -2]" cast-shadow>
<TresMeshToonMaterial color="red" />
</Icosahedron>
<Octahedron ref="octahedronRef" :args="[1, 0]" :position="[-4, 6, 0]" cast-shadow>
<TresMeshToonMaterial color="greenyellow" />
</Octahedron>
<Dodecahedron ref="dodecahedronRef" :args="[1, 0]" :position="[-4, 6, 2]" cast-shadow>
<TresMeshToonMaterial color="deeppink" />
</Dodecahedron>
</TresCanvas>
</template>
6 changes: 3 additions & 3 deletions packages/tres/src/demos/Text3D.vue
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
<script setup lang="ts">
import { TextGeometry } from 'three/examples/jsm/geometries/TextGeometry'
import { FontLoader } from 'three/examples/jsm/loaders/FontLoader'
import { useCatalogue, useTexture } from '/@/composables'
const { extend } = useCatalogue()
import { extend } from '../core/catalogue'
import { useTexture } from '/@/composables'
extend({ TextGeometry: TextGeometry })
extend({ TextGeometry })
const fontPath = 'https://raw.githubusercontent.com/Tresjs/assets/main/fonts/FiraCodeRegular.json'
Expand Down
25 changes: 11 additions & 14 deletions packages/tres/src/demos/TheGizmos.vue
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<script setup lang="ts">
import { shallowRef, shallowReactive } from 'vue'
import { BasicShadowMap, sRGBEncoding, NoToneMapping } from 'three'
import { TresCanvas } from '../components/TresCanvas'
import { OrbitControls, useTweakPane, TransformControls } from '../../../cientos/src'
const state = shallowReactive({
Expand Down Expand Up @@ -75,18 +75,15 @@ axisFolder.addInput(transformState, 'showZ')
<OrbitControls make-default />
<TresPerspectiveCamera :position="[11, 11, 11]" :fov="45" :near="0.1" :far="1000" :look-at="[-8, 3, -3]" />

<TresScene>
<TransformControls :object="boxRef" v-bind="transformState" />
<TresMesh ref="boxRef" :position="[0, 4, 0]" cast-shadow>
<TresBoxGeometry :args="[1.5, 1.5, 1.5]" />
<TresMeshToonMaterial color="#FBB03B" />
</TresMesh>
<TresMesh :rotation="[-Math.PI / 2, 0, 0]" receive-shadow>
<TresPlaneGeometry :args="[10, 10, 10, 10]" />
<TresMeshToonMaterial />
</TresMesh>
<TresAmbientLight :intensity="0.5" />
<TresDirectionalLight :position="[0, 8, 4]" :intensity="1.5" cast-shadow />
</TresScene>
<TresMesh ref="boxRef" :position="[0, 4, 0]" cast-shadow>
<TresBoxGeometry :args="[1.5, 1.5, 1.5]" />
<TresMeshToonMaterial color="#FBB03B" />
</TresMesh>
<TresMesh :rotation="[-Math.PI / 2, 0, 0]" receive-shadow>
<TresPlaneGeometry :args="[10, 10, 10, 10]" />
<TresMeshToonMaterial />
</TresMesh>
<TresAmbientLight :intensity="0.5" />
<TresDirectionalLight :position="[0, 8, 4]" :intensity="1.5" cast-shadow />
</TresCanvas>
</template>

0 comments on commit fa072cd

Please sign in to comment.