Something went wrong. Try again.
Starship Simulator Controls thoriumsim.com
Something went wrong. Try again.
4.2 kB · 162 lines
TSX
at develop
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163import { Scene, PerspectiveCamera, WebGLRenderer, HemisphereLight, Vector3, Group, type Camera, SRGBColorSpace, PointLight, AmbientLight, ACESFilmicToneMapping, type Object3D, type Mesh, type MeshStandardMaterial, FrontSide, Color,} from "three";import { GLTFLoader } from "three-stdlib";
let renderer: WebGLRenderer;
/* istanbul ignore next */if (process.env.NODE_ENV !== "test" && typeof window !== "undefined") { /* istanbul ignore next */ renderer = new WebGLRenderer({ alpha: true, antialias: true, preserveDrawingBuffer: true, }); renderer.toneMapping = ACESFilmicToneMapping; renderer.toneMappingExposure = 1;
/* istanbul ignore next */ renderer.outputColorSpace = SRGBColorSpace; /* istanbul ignore next */ renderer.setPixelRatio(window.devicePixelRatio);}
interface Options { size: { width: number; height: number }; camera?: { fov?: number; x?: number; y?: number; z?: number; rotateX?: number; rotateY?: number; rotateZ?: number; };}const defaultValues: Options = { size: { width: 200, height: 200 },};
export async function generateScene( assetPath: string, { size, camera: cameraOptions }: Options = defaultValues,): Promise<{ scene: Scene; camera: Camera }> { return new Promise((resolve) => { const scene = new Scene(); // scene.background = new Color(0x666666); const camera = new PerspectiveCamera( cameraOptions?.fov ?? 45, size.width / size.height, 0.1, 1000, );
camera.position.x = cameraOptions?.x ?? 0; camera.position.y = cameraOptions?.y ?? 0; camera.position.z = cameraOptions?.z ?? 3; camera.lookAt(new Vector3(0, 0, 0));
if (cameraOptions?.rotateX) camera.rotateX(cameraOptions?.rotateX ?? 0); if (cameraOptions?.rotateY) camera.rotateY(cameraOptions?.rotateY ?? 0); if (cameraOptions?.rotateZ) camera.rotateZ(cameraOptions?.rotateZ ?? 0); const hemiLight = new HemisphereLight(0xffffff, 0xffffff, 0.6); hemiLight.position.set(0, 10, 0); scene.add(hemiLight);
const pointLight = new PointLight(0xffffff, 1); pointLight.position.set(0, 10, 0); scene.add(pointLight);
const ambientLight = new AmbientLight(0x404040); // Soft white light scene.add(ambientLight);
const objectGroup = new Group();
scene.add(objectGroup); const loader = new GLTFLoader(); loader.load( assetPath, (gltf: any) => { const obj = gltf.scene;
if (obj.traverse) { obj.traverse((object: Object3D | Mesh) => { if ("material" in object) { const material = object.material as MeshStandardMaterial; material.emissiveMap = material.map; material.emissiveIntensity = 0.3; material.emissive = new Color(0xffffff); material.side = FrontSide;
object.castShadow = true; object.receiveShadow = true; } }); }
scene.add(obj); resolve({ scene, camera }); }, undefined, (error) => console.error("Error loading GLB", error), ); });}
/* istanbul ignore next */export async function renderGLTFPreview( assetPath: string, options: Options = defaultValues,): Promise<string> { const { scene, camera } = await generateScene(assetPath, options); renderer?.setSize(options.size.width, options.size.height); renderer?.render(scene, camera); return renderer?.domElement.toDataURL("image/png");}
// const cache = {};
// function useGLTFPreview(assetPath) {// if (cache[assetPath] && cache[assetPath].then) throw cache[assetPath];// if (!cache[assetPath]) {// const promise = renderGLTFPreview(assetPath).then(// res => (cache[assetPath] = res)// );// cache[assetPath] = promise;// throw promise;// }
// return cache[assetPath];// }// function Preview() {// const assetPath =// "https://raw.githubusercontent.com/mrdoob/three.js/master/examples/models/gltf/DamagedHelmet/glTF/DamagedHelmet.gltf";// const src = useGLTFPreview(assetPath);// return <img src={src} alt="Hello" />;// }// export default function App() {// return (// <div className="App">// <React.Suspense fallback={"Loading"}>// <h1>Howdy!</h1>// <Preview />// </React.Suspense>// </div>// );// }