Object not rendered

Created on 28 April 2023, over 1 year ago
Updated 9 May 2023, over 1 year ago

I have followed the instructions as best I could figure out:

Use the CDN:
I have added the following code to my html.html.twig file:

    <script async src="https://unpkg.com/es-module-shims@1.6.3/dist/es-module-shims.js"></script>

    <script type="importmap">
      {
        "imports": {
          "three": "https://unpkg.com/three@0.152.1/build/three.module.js",
          "three/addons/": "https://unpkg.com/three@0.152.1/examples/jsm/"
        }
      }
    </script>

1. I have enabled both modules (ThreeJS and ThreeJS field).
2. I have configured ThreeJS to have a black background, width: 100%, height: 500px
3. I'm not actually sure what configuration is necessary for the field formatter. I created new paragraph object, added a new "3d Object Model" field with the appropriate field type, and made sure it was configured to display on the page content.

I then created a new node, and added the 3d object paragraph, uploaded a 7mb poly.obj file that I was given as an example, which my computer renders in preview. I saved the node, and I can see that the poly.obj file was "uploaded" into the web server's file system. However, when I view the node, nothing is rendered on the page. I get no errors, and when I example the HTML source code, the field is not being displayed. I'm attaching a screenshot of the "Manage Display" for this paragraph type.

💬 Support request
Status

Closed: works as designed

Version

1.0

Component

Code

Created by

🇺🇸United States safetypin Memphis, Tennessee

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

  • Issue created by @safetypin
  • 🇫🇷France lazzyvn paris

    what instructions? just remove all your custom script it will work with obj file, my site run this module every day

  • 🇺🇸United States safetypin Memphis, Tennessee

    I don't have any custom scripts.

  • 🇫🇷France lazzyvn paris

    I mean remove

        <script type="importmap">
          {
            "imports": {
              "three": "https://unpkg.com/three@0.152.1/build/three.module.js",
              "three/addons/": "https://unpkg.com/three@0.152.1/examples/jsm/"
            }
          }
        </script>

    look in https://git.drupalcode.org/project/threejs/-/blob/1.0.4/threejs.librarie...
    you will see all loaded cdn.
    try with field in Node not in paragraph

  • 🇺🇸United States safetypin Memphis, Tennessee

    I removed the importmap script, and it's still not working. To address your initial question (what instructions?), the instructions i'm talking about are the ones in the description of the project:

    Use CDN threejs
    This module is based on https://github.com/eneus/drupal_threejs (but it's not totally the same I reuse about 30%).
    How to use:

    Enable modules Threejs + Threejs field
    Configuration Threejs
    Configuration field Threejs formatter

    Support some format 3d like obj dae gltf stl....

    some issue:
    - camera fit to object (i set for scanner box)
    - texture not work some case
    - autorotation

    I'm not familiar with the importmap script thing; how is the threejs library imported without that code?

  • 🇺🇸United States safetypin Memphis, Tennessee

    I've tried downloading the file https://unpkg.com/three@0.152.1/build/three.module.js and including it using my theme library. When I do this, I can see that the threejs module is included in the HTML, but it still doesn't work.

  • 🇫🇷France lazzyvn paris

    Hum it's summary
    the instructions start with "How to use" I never write, you must activate lib threejs cdn to work this module.
    Install the new drupal 9 and active module, you can try with dev version. Do nothing you will see your object in 3D. if you have a bug report i will fix it if i have time

  • 🇺🇸United States safetypin Memphis, Tennessee

    What is the recommended way to activate the threejs library with a CDN?

  • Status changed to Closed: works as designed over 1 year ago
  • 🇫🇷France lazzyvn paris

    Nothing. you just need to install the module and enjoy it, it already includes the latest version threejs with cdn

  • 🇺🇸United States safetypin Memphis, Tennessee

    Thanks; it's still not working in our production environment, but I was able to verify that it does work out of the box on a fresh install. So, presumably there's some template for preprocessing method that is breaking it. It appears to be a rendering issue; the field HTML isn't rendered at all.

  • 🇮🇳India chaithanya.m

    @safetypin : Regarding your last comment, I also have the similar kind of issue in my website. Did you get any solution on it?

  • 🇺🇸United States safetypin Memphis, Tennessee

    I disabled a bunch of modules and it started working, so I think it's an interaction with another module. I tried to go through and disable just a few modules at a time last week, but I haven't had time to finish figuring out which module it is.

Production build 0.71.5 2024