48 lines
1.3 KiB
JavaScript
48 lines
1.3 KiB
JavaScript
import React, { useState } from 'react';
|
|
import { Canvas } from '@react-three/fiber';
|
|
import { OrbitControls, PerspectiveCamera } from '@react-three/drei';
|
|
import './App.css';
|
|
|
|
function InteractiveObject() {
|
|
const [selected, setSelected] = useState(false);
|
|
|
|
return (
|
|
<mesh
|
|
onClick={() => setSelected(!selected)}
|
|
scale={selected ? 1.2 : 1}
|
|
rotation={[0, 0, 0]}
|
|
>
|
|
<torusKnotGeometry args={[1, 0.4, 100, 16]} />
|
|
<meshStandardMaterial
|
|
color={selected ? "#3498db" : "#ccc"}
|
|
emissive={selected ? "#1e3799" : "#000"}
|
|
emissiveIntensity={selected ? 0.5 : 0}
|
|
roughness={0.5}
|
|
/>
|
|
</mesh>
|
|
);
|
|
}
|
|
|
|
export default function App() {
|
|
return (
|
|
<div className="app-container">
|
|
<div id="overlay">
|
|
<h1>Interaction Pattern — Click on the object</h1>
|
|
</div>
|
|
|
|
<div className="canvas-wrapper">
|
|
<Canvas dpr={[1, 2]}>
|
|
<color attach="background" args={["white"]} />
|
|
<PerspectiveCamera makeDefault position={[0, 0, 5]} />
|
|
|
|
<ambientLight intensity={0.6 * Math.PI} />
|
|
<pointLight position={[5, 5, 5]} intensity={1.0 * Math.PI} />
|
|
|
|
<InteractiveObject />
|
|
|
|
<OrbitControls makeDefault enableDamping dampingFactor={0.05} />
|
|
</Canvas>
|
|
</div>
|
|
</div>
|
|
);
|
|
} |