fdel/portfolio-redesign
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Slight tweaks/adding HTML to 3D space

Browse Source
This commit is contained in:
Frank Delaguila
2022-03-15 15:29:08 -06:00
parent ce1355c196
commit 902844cdd1
2 changed files with 9 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
src/components/App.jsx
View File

@@ -2,7 +2,7 @@ import '../styles/styles.scss';
import * as THREE from 'three'; import * as THREE from 'three';
import { useRef, useState } from 'react'; import { useRef, useState } from 'react';
import { useFrame } from '@react-three/fiber'; import { useFrame } from '@react-three/fiber';
import { Text, Environment, MeshReflectorMaterial, useTexture, MeshDistortMaterial } from '@react-three/drei'; import { Text, Environment, MeshReflectorMaterial, useTexture, MeshDistortMaterial, Html } from '@react-three/drei';
import { gsap } from 'gsap'; import { gsap } from 'gsap';
import dreiVideo from '../assets/videos/drei.mp4'; import dreiVideo from '../assets/videos/drei.mp4';
@@ -78,7 +78,10 @@ const App = () => {
/> />
</meshStandardMaterial> </meshStandardMaterial>
</Text> </Text>
<mesh position={[2, 1.8, -3.2]} ref={cloudRef} onPointerEnter={meshAnimation} fog={false}> <Html position={[-1.5, 1.4, -3.2]} rotation={[0, 0, 0]}>
<h1 onClick={meshAnimation} className="text-4xl font-bold text-white cursor-pointer">HELLO</h1>
</Html>
<mesh position={[2, 1.8, -3.2]} ref={cloudRef} fog={false}>
<sphereBufferGeometry attach="geometry" /> <sphereBufferGeometry attach="geometry" />
<MeshDistortMaterial <MeshDistortMaterial
attach="material" attach="material"

5
src/views/index.html
View File

@@ -10,6 +10,9 @@
<link rel="stylesheet" href="https://use.typekit.net/bcf6wms.css"> <link rel="stylesheet" href="https://use.typekit.net/bcf6wms.css">
</head> </head>
<body> <body>
<main id="root"></main> <div id="root"></div>
<main id="main-content">
</main>
</body> </body>
</html> </html>