shader-park-examples - GitLite

KO | EN

gitlite — search

#python #hacktoberfest #go #android #deep-learning #linux #nodejs #java #windows #awesome #cli #kubernetes #awesome-list #pytorch

shader-park-examples

(★ 102)

Example template projects for Shader Park.

파일 탐색기

최종 버전 다운로드 (.zip)

- .babelrc
- index.html
- index.js
- package.json
- README.md
- spCode.js
- style.css
- yarn.lock
- index.html
- index.js
- package-lock.json
- package.json
- README.md
- spCode.js
- style.css
- index.html
- index.js
- package.json
- README.md
- spCode.js
- style.css
- yarn.lock
- index.html
- index.js
- package-lock.json
- package.json
- README.md
- spCode.sp
- style.css
- vite-plugin-prebuild-sp-three.js
- vite.config.js
- yarn.lock
- index.html
- OrbitControls.js
- README.md
- script.js
- shader-park-core.esm.js
- sp-code.js
- style.css
- three.module.js
- thumbnail.gif
- thumbnail.jpg
- TrackballControls.js
- - context.js
  - sp-code.js
- index.html
- main.js
- package-lock.json
- package.json
- README.md
- style.css
- vite.config.js
.gitignore
LICENSE
README.md

# 설치 가이드

1. 코드 내려받기

git clone https://github.com/shader-park/shader-park-examples

깃허브에서 프로젝트 코드 전체를 내 컴퓨터로 내려받습니다.

cd shader-park-examples

방금 내려받은 프로젝트 폴더 안으로 이동합니다.

2. Node.js

쉬움 추천

사전 준비물

Git GitHub에서 프로젝트 코드를 내려받으려면 필요합니다.
Node.js npm 명령어를 쓰려면 Node.js가 설치되어 있어야 합니다. LTS(장기지원) 버전을 추천합니다.

cd es6-production-template

이 프로젝트의 관련 파일이 하위 폴더 안에 있어서, 먼저 그 폴더로 이동합니다.

npm install

package.json에 명시된 라이브러리들을 내려받아 설치합니다.

npm start

개발/실행 서버를 켭니다.

✅ 명령어 실행 후 터미널에 나타나는 주소(보통 http://localhost:3000 형태)를 브라우저에서 열어보세요.

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# Shader Park Example Templates 🎉

Example templates for [Shader Park](https://shaderpark.com/) using [shader-park-core](https://github.com/shader-park/shader-park-core).

<br/>

## Examples using npm

Examples using Shader Park as an npm package are listed as folders in this repo with info in each Readme.

[es6-starter-template](es6-starter-template/): Quick start using shader-park-core and vite

[es6-vite-prebuild-three-template](es6-vite-prebuild-three-template): Recommended for production builds that use threejs and have static shaders

[es6-three-starter-template](es6-three-starter-template/): Quick start using three.js, shader-park-core and parcel

[nft-hicetnunc-three-template](nft-hicetnunc-three-template/): Create your own interactive NFT using Shader Park and host it on Hic et Nunc

[vite-fxhash-template](vite-fxhash-template/): Create FXHash bundle using Shader Park, Three.js and Vite. Derived from EILSEQ's artwork [Miss Lexotan](https://www.fxhash.xyz/generative/24475)

## Using Shader Park with p5.js
See this example:  
https://editor.p5js.org/pdubs/sketches/GNk9KFhzo

TODO:

es6-starter-interactive-template

es6-starter-three-interactive-template

react-template

react3fiber-template

<br/>

## Quick Start Examples

Examples are hosted on Glitch to quickly preview and live edit.

[All Glitch Projects](https://glitch.com/@torinmb/shader-park-examples)

[Starter Template](https://glitch.com/edit/#!/shader-park-template)

[Starter Template With Mouse Interactivity](https://glitch.com/edit/#!/shader-park-interactive)

[Starter Template With Scroll Interactivity](https://glitch.com/edit/#!/shader-park-interactive-scroll)

[Starter Template with GLSL (yes there's a glsl library you can still access instead of javascript)](https://glitch.com/edit/#!/shader-park-template-glsl)

<br/>

[Three.js Starter Template](https://glitch.com/edit/#!/shader-park-three-js)

[Three.js Custom Geometry Template](https://glitch.com/edit/#!/shader-park-threejs-custom-geometry)

[Three.js Text Template](https://glitch.com/edit/#!/shader-park-three-js-text)

[Three.js WebXR Template](https://glitch.com/edit/#!/shader-park-webxr)