Skip to content

Instantly share code, notes, and snippets.

@jacius

jacius/1. README.md

Last active March 17, 2019 23:55
Show Gist options
  • Save jacius/4751789 to your computer and use it in GitHub Desktop.
Save jacius/4751789 to your computer and use it in GitHub Desktop.
Download ZIP
Chicken Scheme + WebGL (Three.js)
Raw
1. README.md

Another example of using Scheme to generate HTML and JavaScript. This example is based on the Three.js "Creating a scene" tutorial.

You will need:

Run make to generate the HTML and JS files, then open "index.html" in a web browser.

Optionally, you can use Guard to automatically generate the HTML/JS when the Scheme files change. gem install guard then run guard inside the source directory.

Raw
Guardfile
guard 'shell' do
watch(/(.*)\.scm/) {|m| `make #{m[1]}` }
end
Raw
index.html.scm
(require-library html-tags spock)
(import html-tags spock)
(display "<!DOCTYPE html>")
(display
(<html>
(<head>
(<spock-header>))
(<body>
(<script> type: "text/javascript" src: "three.min.js")
(<script> type: "text/javascript" src: "webgl-test.js"))))
Raw
Makefile
generated = index.html webgl-test.js spock-runtime-min.js three.min.js
all: $(generated)
clean:
rm $(generated)
%.html: %.html.scm
csi -s $< > $@
%.js: %.js.scm
chicken-spock $< > $@
three.min.js:
curl -O http://mrdoob.github.com/three.js/build/three.min.js
spock-runtime-%.js:
cp `chicken-spock -library-path`/$@ $@
Raw
webgl-test.js.scm
(define width 600)
(define height 400)
(define scene (new THREE.Scene))
(define camera (new THREE.PerspectiveCamera 75 (/ width height) 0.1 1000))
(define renderer (new THREE.WebGLRenderer))
(%inline .setClearColorHex renderer #x000000 1)
(%inline .setSize renderer width height)
(%inline .appendChild document.body (%property-ref .domElement renderer))
(define geometry (new THREE.CubeGeometry 1 1 1))
(define material (new THREE.MeshLambertMaterial (% "color" #x00ff00)))
(define cube (new THREE.Mesh geometry material))
(%inline .add scene cube)
(define light1 (new THREE.PointLight #xffffff))
(%property-set! .position.z light1 5)
(%inline .add scene light1)
(%property-set! .position.z camera 2)
(define (render)
(%inline requestAnimationFrame (callback render))
(%property-set! .rotation.x cube (+ 0.02 (%property-ref .rotation.x cube)))
(%property-set! .rotation.y cube (+ 0.02 (%property-ref .rotation.y cube)))
(%inline .render renderer scene camera))
(set! window.onload (callback render))
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment