Description

Is it possible to write three.js code with view3d?

Description

I have a glb file in memory.

How can I apply this to the viewer?

Steps to check or reproduce

Currently, I am setting the link as below.

const glbFile = new window. Blob([glbBuffer], { type: "application/glb" });

const link = window.URL.createObjectURL(glbFile);

viewer3d.load(link);

Problem

When I create and apply the url in memory, the following error occurs.

Uncaught (in promise) View3DError: Failed to load/parse the 3D model with the given url: "blob:https://test.domain/bebfeed4-24c8-4699-99f7-bda3929b7785". Check "loadError" event for actual error instance.
    at View3D.<anonymous> (view3d.esm.js:10010:15)
    at Generator.throw (<anonymous>)
    at rejected (view3d.esm.js:62:24)

Description

On mobile phones, the model Y axis direction cannot be moved

Steps to check or reproduce

Official website demo

When I'm loading a new 3D model

view3D.load("new_model.usdz")

I would like to change the "iosSrc" as well.

but view3D.iosSrc = "new_model.usdz" doesn't work.

How can I alter the iosSrc parameter?

Thanks in advance for your support!

Description

Steps to check or reproduce

Hi, is possible show the horbit control and hide the Animation bar?
I have uese this but don't work:
new View3D.ControlBar({
progressBar: false,
navigationGizmo: true
})

To show/hide the 3D viewer on a page I am using the CSS property "display: none" on the wrapper

question. in react, on initial loading,
want to use both zooming and rotating.
a little bounging in zoom and rotate too.
say for this as showup effect.
for examle,
say on first load,set zoom 0.7, rotate -20 degree..
during 300 ms, want apply both zooming to 1.1 and( ) rotating to 5.
then biunce back to zoom 1.0 and rotation 0.

any good way to do this?
I really appreciate if you give me a hit.
thanks in advance.

I'm having strange issue with toggling visibility of meshes on the imported model.
I'm toggling mesh visibility with view3d.model.meshes[1].visible = false;
and when I open app on Android and on iOS phone different mesh is hidden.
I solved it by checking on what platform app is running and based on that I toggle different meshes but I'm sure that there has to be way to do it without checking platform.

First of all, great work guys! I read your medium posts and had to try out the library. 👏
I'm trying to integrate 3d view and ar features in my existing react project. But I'm getting the following error:

index.js:1 SyntaxError: Unexpected token < in JSON at position 0
    at JSON.parse (<anonymous>)
    at GLTFLoader.parse (GLTFLoader.js:213)
    at Object.onLoad (GLTFLoader.js:145)
    at XMLHttpRequest.<anonymous> (three.module.js:36216)

I've made a WebARTest component, then import and render it in App.js. This is how my code looks:

import View3D, { GLTFLoader } from '@egjs/view3d';
import React, { useRef, useEffect } from 'react';
import './viewstyles.css';

const WebARTest = () => {
  const canvasElement = useRef(null);

  useEffect(() => {
    const view3d = new View3D(canvasElement.current);
    const loader = new GLTFLoader();
    loader
      .load('./assets/specstand.glb')
      .then((model) => {
        view3d.display(model);
      })
      .catch((e) => {
        console.error(e);
      });
  }, [canvasElement]);

  return (
    <div id="view3d-wrapper">
      <canvas id="ar-canvas" ref={canvasElement}></canvas>
    </div>
  );
};

export default WebARTest;

I'm following the instruction listed on your tutorial page for loading a model.

Description

I am using egjs-view3d [2.9.1]
Is this gjs-view3d support IE11 ?

As for it, in this README of egjs-view3d Github,
Browser Support
View3D is available for the last two major versions of all evergreen desktop and mobile browsers.

but with Edge in IE mode (setting IE11),
I navigated to https://naver.github.io/egjs-view3d/ .
the browser screen (refer the attached), there is white rather than gltf viewer.

as far as I know, browsers needs webGL support. so I just googled in https://caniuse.com/webgl
then it says: IE11 is supported. (refer attached the other)

I have to delare to my customer, that whether egjs-view3d support IE11 or not in a day.
so that how to cope with this situation (customer's organization is in the closed network and use Edge but still use IE11)

To make long story short, Is this gjs-view3d support IE11 ? or any other workaround ?

thanks in advance

Steps to check or reproduce

Features

• Punctual Lights
• Post Processing
  • SSAO
  • Bloom
  • DoF
  • SSR
• VR
• Support KHR_materials_variants
  • Add option variant
  • API for getting list of variants

Description

how can i access model information?
like Triangle Count or Face Count

Steps to check or reproduce

i can access Vertex Count using this.
view3D._model._parser.json.accessors[0].count
but i can't found any info triangle or face or edge

I was wondering if there is a kind of option/plugin to show a grid underneath the model.

Here is an example:

Hi, I have some questions about view3d.

1. is it possible to hide or make semi-transparent the parts that make up an object by clicking on them? for example, to explain better, the alarm clock (one of your examples) is made up of a central body and 3 hands. could I make it so that by clicking for example on the central body it hides or becomes semi-transparent? I'm attaching a screen shot of something similar

2. is it possible to click on an object that makes up the 3D file and insert, for example, a table on the web page?

3. is it possible to load the 3D file in a specific view: for example frontal, lateral, orthogonal, axonometric?

4. can a perspective view be activated?

5. is it possible to activate a grill on the ground?

similar to this one

6)Can you set the size of the Sky HDR to adapt the background better to the object?
7) is it possible to have the view of the object on 4 different canvases with 4 different views of the same object: lateral, frontal, top and axonometric?

8. you can show the origin of the object?

It is possible to have an exploded scene of the shot peened object. for example, switching from a normal axonometric view to an exploded view?

10) it is possible to transfer the rendered object in a different way: wireframe, shade (with or without borders), render, etc?
11)it is possible to create sectional views (clipping) of the object'?

12)Is it possible to change the characteristics (e.g. material) of an object by clicking on a button on the page?
13)is it possible to use all the functions of three.js and apply them to view3d?
Thank you. I understand that there are many questions but I ask for your help because I would like to try to create a spare parts configurator based on 3D graphics (and therefore on view3D) that can interact with the data present on the page which are extracted from a database depending on the calls and selected 3D objects.

Thank you

I can't load view3D.
I used CDN Links.
Error message is "Uncaught View3DError: Element with selector "#wrapper-el" not found."

code here

<div id="wrapper-el" class="view3d-wrapper view3d-square">
	<canvas class="view3d-canvas"></canvas>
</div>

The issue has been resolved after moving root file ".editorconfig", ".eslintrc.json" to packages/view3d.

Description

I'd want to create an IndexedDB plugin for loading GLTF/GLB models from IndexedDB.
So, How can I make my own plugin, and what are the steps involved?
And How can i notify the changes to view3D when there are changes in 3D model (eg Add or Remove Some Threejs Objects and meshes)
Please Guide Me

Thanks

Description

As a user, when I left-click in the 3d viewer, I can rotate the model.
With right-click, I can move the model in space.

If I begin my right click in the 3d viewer in the browser viewport, then drag my cursor outside of the viewport (to the Chrome address bar, for example), then release (outside of the browser viewport), the model remains "attached" to the mouse and continues to move around in 3D space. The mouseUp event is not "seen" by view 3D

Note this is only on right click, left click seems to work fine.

Steps to check or reproduce

• Load a 3d model,
• right click on the model to begin moving
• drag cursor to address bar
• release right mouse button
• drag cursor back to 3d viewer
• watch model flail around

Description

I'm just coding in vanilla javascript.
as for plugins, I've followed link below:
https://naver.github.io/egjs-view3d/docs/options/miscellaneous/plugins

it says using import but not available in vanilla javascript.
at present I am using
<script src="js/view3d.pkgd.min.js"></script> <link rel="stylesheet" href="css/view3d-bundle.min.css"> <script src="js/jquery-3.5.1.min.js"></script>

is it impossible in vanilla javascript or am I lost ?
or using mixing jQuery and egjs-view3d can cause problem?

in short, how to use plugins in vanilla javascript ?

thanks in advance for good solution..

Steps to check or reproduce

Tested with network throttling applied (Fast 3G)

Texture LOD (Progressive Loading) enabled

Geometry LOD (Progressive Loading) enabled

Is it possible to change the model during the XRSession
while locating a new model at the same location and fitting size of the new model at camera?

hello,

Cannot seem to get LOD demos loading, or maybe not sure what the expected behavior is
Tried both Safari 14.0, and Chrome 87, get stuck on loading mode

Excited to see this come to life.

Description

I want to write a VR plugin for viewing models in Virtual Reality. Provide multiple controllers like first person controller or Orbit Controller for viewing. How do I compile the library and write a new plugin

it just shown when I needed it

Description

When clicking the ARButton on your iOS device using an alternative browser like Chrome, you get the message that AR is not supported, when in fact AR works fine if you place a direct link to an .usdz file. Is the detection of AR capability in isAvailable.ts not working correctly?

Steps to check or reproduce

Open the projects webpage https://woodneck.github.io/egjs-view3d/docs/ar on your iOS device with an alternative bowser (e.g. Chrome) and try the alarm clock demo at the end of the page. The ARButton outputs the message "AR is not supported in this browser"

I am getting this error in my mobile device while rendering component.

Uncaught (in promise) TypeError: Failed to execute 'shaderSource' on 'WebGL2RenderingContext': parameter 1 is not of type 'WebGLShader'.

with this warning
WARNING: Too many active WebGL contexts. Oldest context will be lost.

It works fine on my PC but gives this error on mobile devices.

previously I was using "@egjs/react-view3d": "^2.1.0", this version then I upgrade it to "@egjs/react-view3d": "^2.3.1" this latest
version but it still gives an error

I need to use the following options for my plugin:

disablePitch: true,

minY: 0,

maxY: 90

Background is that I want to disable negative rotation on the Y-Axis for the model.

Is it possible to place these options inside the plugin init code like this?

plugins: [new View3D.RotateControl({
    
disablePitch: true,
    
minY: 0,
    
maxY: 90,

})]

three.js demo vs. this library