Using JSCall to interact with ThreeJS
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"
Use the image created above:
using WebSockets, WebIO, JSCall, Interact
Create the scene:
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 = 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) )) )
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: