Having some difficulty adding three.js to a Phoenix project

Hi Christopher, welcome to the forum.

The screen grab is too low res to see anything, it would be better if you posted the relevant code directly as text.

oops! You’re right.

Let me try that again

Updated the image

it looks like your func createThreeJSScene is never called, have you tried invoking it?

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

This won’t succeed because it returns undefined when the attribute is missing.

However you also will need to add phx-update="ignore" to the element, otherwise your scene will be removed on the next update from the server.

DOM patching & temporary assigns

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.

So, I’ve reduce the mounted() it down to:

mounted() {
    this.initThreeScene();
},

added the following to the

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

Import from three.module.js

image1624×969 13 KB

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();
         |                             ~~~~~

I’m running 0.17.5 Live view & 1.6.13 Phoenix.

I do not see such an error on my side.

Is it possible for me to view the project you’ve created so that I can figure out what went wrong on my end?

Here’s a link to my github repo 03juan/three_cube

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.