I’m having some difficulty adding the npm package “three” to my phx project.
Specifically, I am getting blank screen on the /3D route that I have set, however, I am getting the hello word. The div seems to be recognized, but I think there may be something wrong with esbuild?
I ended up vendoring three js in assets/vendor/three.min.js
Then I created a Hook in my app.js as follows:
import * as THREE from "../vendor/three.min.js";
window.THREE = THREE;
let Hooks = {};
Hooks.ThreeInit = {
mounted() {
if (this.el.dataset.initialized === "false") {
this.initThreeScene();
this.el.dataset.initialized = "true";
}
},
initThreeScene() {
// Initialize your three.js scene here, using `THREE` object.
// For example:
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
this.el.appendChild(renderer.domElement);
const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);
camera.position.z = 5;
const animate = function () {
requestAnimationFrame(animate);
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
renderer.render(scene, camera);
};
animate();
}
};
let liveSocket = new LiveSocket("/live", Socket, {
params: {_csrf_token: csrfToken},
hooks: Hooks,
dom: {
onBeforeElUpdated(from, to) {
if (from._x_dataStack) {
window.Alpine.clone(from, to)
}
}
}
})
//other Alpine js stuff here
// connect if there are any LiveViews on the page
liveSocket.connect()
Then tried calling the phx-hook in my three_js_live.ex as follows:
defmodule PortfolioWeb.ThreeJSLive do
use Phoenix.LiveView
def mount(_params, _session, socket) do
{:ok, socket}
end
def render(assigns) do
~L"""
<h1>Hello, World!</h1>
<div id="three-container" phx-hook="ThreeInit"></div>
"""
end
end
At the moment, the only thing that renders is the Hello World
The “ignore” behaviour is frequently used when you need to integrate with another JS library. Note only the element contents are ignored, its attributes can still be updated.
defmodule PortfolioWeb.ThreeJSLive do
use Phoenix.LiveView
def mount(_params, _session, socket) do
{:ok, socket}
end
def render(assigns) do
~L"""
<h1>Hello, World!</h1>
<div id="three-container" phx-hook="ThreeInit" phx-update="ignore"></div>
"""
end
end
I’m curious what version of Phoenix you’re using, since you’re rendering the view with a ~L leex sigil instead of ~H? Did you not get something like this error during the asset build pipeline?
[WARNING] Import "Scene" will always be undefined because the file "vendor/three.min.js" has no exports [import-is-undefined]
js/app.js:14:28:
14 | const scene = new THREE.Scene();
| ~~~~~
My previous answer was actually misleading, sorry about that. I actually got the error after installing the three module from npm into the vendor directory, and then importing from ../vendor/node_modules/three/build/three.min.js, not directly from ../vendor/three.min.js. I assumed that the error would also show in the second case but didn’t check before posting.
Have a look at app.js in the repo. In its current state importing from node_modules I get the error when building the asset, and there is no cube. However using the import in the second line does show the cube, and the console only shows the warning: Scripts "build/three.js" and "build/three.min.js" are deprecated with r150+, and will be removed with r160. Please use ES Modules or alternatives
I tried to build the bundle with esbuild 0.14.29 used in Phoenix 1.6.13 and that also works when importing three.min.js directly from vendor but not from within node_modules.
Not sure why it works with one but not the other. My guess is something to do with it being a inside node package, but don’t have enough experience with js bundling to really know.
My pleasure. I’ve been meaning to look into integrating three.js for a while so this was a good opportunity to get into it, as well as practice using neovim and tmux for editing.
