Using JSCall to interact with ThreeJS

Example how to use JSCall to make a ThreeJS visualization.

Create a locked setup cell that installs all the dependencies and freezes them into a docker container, precompiled and all (if you want to write your own article using JSCall, you can also include this container as a base image):

pkg"up; add WebIO#sd-httpheader Interact WebSockets JSCall CSSUtil"
pkg"precompile"

10.0s

Install (Julia)

Use the image created above:

using WebSockets, WebIO, JSCall, Interact

43.9s

Julia

Create the scene:

17.9s

Julia

THREE, document, window = JSModule(
  :THREE,
  "https://cdnjs.cloudflare.com/ajax/libs/three.js/103/three.js",
)
scene = THREE.new.Scene()
width, height = 650, 200
# Create a basic perspective camera
camera = THREE.new.PerspectiveCamera(75, width / height, 0.1, 1000)
camera.position.z = 4
renderer = THREE.new.WebGLRenderer(Dict(:antialias => true))
renderer.setSize(width, height)
renderer.setClearColor("#fcfcfc")
geometry = THREE.new.BoxGeometry(1, 1, 1)
material = THREE.new.MeshBasicMaterial(color = "#433F81")
cube = THREE.new.Mesh(geometry, material);
scene.add(cube)
container = document.querySelector("#container")
container.appendChild(renderer.domElement);
slider = @manipulate for r in LinRange(0.0, 2pi, 200)
  cube.rotation.x = r
	cube.rotation.y = r
	renderer.render(scene, camera)
  nothing
end

# Output will show WebIO not detected, as long as you don't start the notebook
# more information below
vbox(
  slider, 
  JSCall.scope(THREE)(dom"div#container"(
      style = Dict(:height => height, :width => width)
  ))
)

17.9s

Julia

Since you need to start a runner to actually interact with this (otherwise the Julia side is missing, since Julia still doesn't run in the browser). You can start this notebook by logging into Nextjournal (signup code Julia1.0), click edit and then run-all!

Meanwhile, here is a gif of how it looks in action: