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