parent
b744f1c545
commit
b002521261
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
@ -0,0 +1,36 @@
|
|||||||
|
import React, { useEffect, useRef } from 'react'
|
||||||
|
import { PositionalAudio, Box } from '@react-three/drei'
|
||||||
|
import { PositionalAudio as PositionalAudioImpl } from 'three'
|
||||||
|
import useStore from '../store'
|
||||||
|
|
||||||
|
type Props = JSX.IntrinsicElements['positionalAudio'] & {
|
||||||
|
url: string
|
||||||
|
distance?: number
|
||||||
|
loop?: boolean
|
||||||
|
}
|
||||||
|
|
||||||
|
const ObraAudio: React.FC<Props> = ({ position, url, loop = true, ...props }) => {
|
||||||
|
const pointerLocked = useStore((state) => state.pointerLocked)
|
||||||
|
const audioRef = useRef<PositionalAudioImpl>()
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (audioRef.current) {
|
||||||
|
if (!pointerLocked && audioRef.current.isPlaying) {
|
||||||
|
audioRef.current.pause()
|
||||||
|
} else if (pointerLocked && !audioRef.current.isPlaying) {
|
||||||
|
audioRef.current.play()
|
||||||
|
}
|
||||||
|
|
||||||
|
audioRef.current.setDirectionalCone(35, 60, 0.1)
|
||||||
|
audioRef.current.setRefDistance(0.5)
|
||||||
|
}
|
||||||
|
}, [audioRef.current, pointerLocked])
|
||||||
|
|
||||||
|
return (
|
||||||
|
<group rotation={[0, -Math.PI / 2, 0]} position={[14, 1.6, 0]}>
|
||||||
|
<PositionalAudio ref={audioRef} url={url} loop={loop} autoplay={false} {...props} />
|
||||||
|
</group>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default ObraAudio
|
@ -0,0 +1,14 @@
|
|||||||
|
import * as THREE from 'three'
|
||||||
|
import Proyector from './Proyector'
|
||||||
|
import React, { useRef } from 'react'
|
||||||
|
import ObraAudio from '../../ObraAudio'
|
||||||
|
|
||||||
|
export default function Model(props: JSX.IntrinsicElements['group']) {
|
||||||
|
const group = useRef<THREE.Group>()
|
||||||
|
return (
|
||||||
|
<group ref={group} {...props} dispose={null}>
|
||||||
|
<Proyector videoSrc="/video/daniela.mp4" />
|
||||||
|
<ObraAudio url="/audio/daniela.ogg" loop distance={0.5} position={[1, 1, 1]} />
|
||||||
|
</group>
|
||||||
|
)
|
||||||
|
}
|
@ -0,0 +1,14 @@
|
|||||||
|
import * as THREE from 'three'
|
||||||
|
import Proyector from './Proyector'
|
||||||
|
import React, { useRef } from 'react'
|
||||||
|
import ObraAudio from '../../ObraAudio'
|
||||||
|
|
||||||
|
export default function Model(props: JSX.IntrinsicElements['group']) {
|
||||||
|
const group = useRef<THREE.Group>()
|
||||||
|
return (
|
||||||
|
<group ref={group} {...props} dispose={null}>
|
||||||
|
<Proyector wide videoSrc="/video/diego_guido.mp4" />
|
||||||
|
<ObraAudio position={[0, 0, -10]} url="/audio/diego_guido.ogg" loop distance={2} />
|
||||||
|
</group>
|
||||||
|
)
|
||||||
|
}
|
@ -0,0 +1,14 @@
|
|||||||
|
import * as THREE from 'three'
|
||||||
|
import Proyector from './Proyector'
|
||||||
|
import React, { useRef } from 'react'
|
||||||
|
import ObraAudio from '../../ObraAudio'
|
||||||
|
|
||||||
|
export default function Model(props: JSX.IntrinsicElements['group']) {
|
||||||
|
const group = useRef<THREE.Group>()
|
||||||
|
return (
|
||||||
|
<group ref={group} {...props} dispose={null}>
|
||||||
|
<Proyector wide videoSrc="/video/sagasti.mp4" />
|
||||||
|
<ObraAudio url="/audio/sagasti.ogg" loop distance={2} />
|
||||||
|
</group>
|
||||||
|
)
|
||||||
|
}
|
@ -0,0 +1,36 @@
|
|||||||
|
/*
|
||||||
|
Auto-generated by: https://github.com/pmndrs/gltfjsx
|
||||||
|
*/
|
||||||
|
|
||||||
|
import * as THREE from 'three'
|
||||||
|
import React, { useRef } from 'react'
|
||||||
|
import { useGLTF } from '@react-three/drei/useGLTF'
|
||||||
|
|
||||||
|
import { GLTF } from 'three/examples/jsm/loaders/GLTFLoader'
|
||||||
|
|
||||||
|
type GLTFResult = GLTF & {
|
||||||
|
nodes: {
|
||||||
|
Cube001: THREE.Mesh
|
||||||
|
['Cube.001_1']: THREE.Mesh
|
||||||
|
['Cube.001_2']: THREE.Mesh
|
||||||
|
}
|
||||||
|
materials: {
|
||||||
|
plastic: THREE.MeshStandardMaterial
|
||||||
|
projection_light: THREE.MeshStandardMaterial
|
||||||
|
projection: THREE.MeshStandardMaterial
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function Model(props: JSX.IntrinsicElements['group']) {
|
||||||
|
const group = useRef<THREE.Group>()
|
||||||
|
const { nodes, materials } = useGLTF('/proyector_wide.glb') as GLTFResult
|
||||||
|
return (
|
||||||
|
<group ref={group} {...props} dispose={null}>
|
||||||
|
<mesh material={materials.plastic} geometry={nodes.Cube001.geometry} />
|
||||||
|
<mesh material={materials.projection_light} geometry={nodes['Cube.001_1'].geometry} />
|
||||||
|
<mesh material={materials.projection} geometry={nodes['Cube.001_2'].geometry} />
|
||||||
|
</group>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
useGLTF.preload('/proyector_wide.glb')
|
Loading…
Reference in new issue