WIP: WebGL 3D game
Prompt Colab
WYSIWYG
Code Editor
Prompt Guidance
Undo is best effort, not guaranteed
Send
me:
change the floor color to reddish
LLM:
floor is made out of multiple pngs, change all of them?
me:
yes, go ahead
LLM:
changed. don't like?
undo
. rewind is not always possible
WYSIWYG Editor
Code Editor
import React, { Suspense, useRef } from "react"; import { Canvas, useLoader, useFrame } from "react-three-fiber"; import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader"; import "./styles.css"; function Loading() { return ( <mesh visible position={[0, 0, 0]} rotation={[0, 0, 0]}> <sphereGeometry attach="geometry" args={[1, 16, 16]} /> <meshStandardMaterial attach="material" color="white" transparent opacity={0.6} roughness={1} metalness={0} /> </mesh> ); } function ArWing() { const group = useRef(); const { nodes } = useLoader(GLTFLoader, "models/arwing.glb"); useFrame(() => { group.current.rotation.y += 0.004; }); return ( <group ref={group}> <mesh visible geometry={nodes.Default.geometry}> <meshStandardMaterial attach="material" color="white" roughness={0.3} metalness={0.3} /> </mesh> </group> ); } export default function App() { return ( <> <Canvas style={{ background: "#171717" }}> <directionalLight intensity={0.5} /> <Suspense fallback={<Loading />}> <ArWing /> </Suspense> </Canvas> <a href="https://codeworkshop.dev/blog/2020-03-31-creating-a-3d-spacefox-scene-with-react-three-fiber/" className="blog-link" target="_blank" rel="noopener noreferrer" > Blog Post </a> </> ); }
Run
Link:
/s/3ocw3pc6