keithclark / 3d-model-element Goto Github PK

Safari doesn't update the scrollTop / scrollLeft properties of an element its any of its ancestors has overflow set to hidden.

Scroll offset is used to calculate the final render position of a 3D object so, in Safari, elements never scroll:

Note: I've had reports that this is fixed in the latest Tech Preview.

I'm trying to achieve this effect with your loader:
https://threejs.org/examples/?q=wireframe#webgl_materials_wireframe

Is it possible?

Is it possible to load multiple meshes (merging them essentially)?

If you play close attention (more visible in Safari), then you'll notice that WebGL content lags slightly behind CSS content. For example, in this (example)[https://keithclark.co.uk/labs/3d-model-custom-element/examples/3d-scene/], move back a little, then jiggle the mouse around and the model seems to catch up to the motion of the floor a very short (but noticeable) moment later.

Curious to know why this happens.

Support lighting models through CSS. Ideally this should:

• Allow multiple lights to be defined using a single rule
• Provide multiple light types (ambient, point, directional etc)
• Play nicely with CSS principles - i.e use inheritance / cascade

Initial thoughts:

Allow CSS authors to use a custom property (--light?) to define lighting and access it with JavaScript using the CSSOM.

--light: <light-function> [<light-position>]? [<light-attachment>]?

Where:

• <light-function> could be something along the lines of:
  • ambient-light(<color>, [<intensity>]?)
  • point-light(<color>, [<intensity>, [,distance]?]?)
• <light-position> is a triplet of css <length>s:
  • -100px 200px 300px (defaults to 50% 50% 0?)
• <light-attachment> is one of
  • fixed - light is clamped to the viewport / scrollbox?
  • absolute - light is positioned relative to the document?
  • static - light is is positioned / transformed relative to the element it's defined on.

Examples:

body {
  --light: ambient-light(#fff, .3),
      point-light(#f00, 1) 50% 50% 50% relative,
      point-light(#0f0, 1) 0px 300px 800px absolute,
      point-light(#00f,24) 700px 400px 800px static;
}

Is it possible to rotate around a costum axis? I tried to change .model in the hello world example to
.model { transform-origin: 0px, 0px, 0px; transform: translatez(-100px); animation: spin 2s linear infinite; }
but it does not work.

I have been trying to work with x-model custom element in my react app, but it's behavior was quite unexpected. When I copy model-element.min.js file from github and link it to my app root using script tag. It responds with a html file, maybe that's why I find the following error in my console

• model-element.js:1 Uncaught SyntaxError: Unexpected token '<'

I am new at this and I don't know if it is possible to add textures to an obj file.

At the moment elements are rendered with an assumed perspective-origin: 50% 50%, which is the default value of this style property.

I've had a stab at implementing this by moving the camera adjusting the viewport / scissor area to only render the required content, which works to a degree. However, the renderer is clipping content.

Here's an example of how that works with perspective-origin: 0 0:

// move camera to top left corner
camera.position.set(-overlayWidth/2, overlayHeight/2, perspective);

// adjust renderer to only draw content to the bottom/right of the camera
renderer.setViewport(-overlayWidth/2, -overlayHeight/2, overlayWidth, overlayHeight);
renderer.setScissor(-overlayWidth/2, -overlayHeight/2, overlayWidth, overlayHeight);

This results in the following, which projects the models correctly, but only the top left area of the viewport is visible and I can't figure out how to increase the size of the rendered area:

Note: The green box shows the geometry bounds (a wireframe) and the red box is the DOM bounding box

Is this the best approach to implementing CSS perspective-origin, or is there another way?

Should the core of model element be made more generic? It seems great, the ability to track elements & styling and put it in the context of 3D perspective and view necessary to emulate it.

I could see that being super useful in many other use cases. This hits closer to my root issue of #7 which is me wondering how I could have a mix of tracked elements and being able to generate 3d models.

I'm creating a room where I need to move elements reasonable far away translatez(-1000px) at perspective 1500px, but objects will start to be clipped, I have tried many things including changing the element but to no avail.

Minimal reproduction:

<html>
    <head>
        <script src="custom-element-polyfill.min.js"></script>
        <script src="three.min.js"></script>
        <script src="three-gltf-loader.min.js"></script>
        <script src="model-element.min.js"></script>
    </head>
    <body style="perspective: 1500px;">
        <x-model src="Duck.gltf" style="transform: translatez(-523px)"></x-model>
    </body>
</html>

Notice the duck is clipped.

Help is really much appreciated.

The x-model can only support glb that is THREE.GLTFExporter

The model element uses the file extension of the src URL to determine which loader to use. While this is fine when serving content from a filesystem, it's doesn't work with content dynamically created on demand using languages like PHP.

My initial solution to this problem is to follow the pattern of the <object> tag and add an optional type attribute to the element. This would allow authors to explicitly set the content type of the data by specifying its registered MIME type. Something like this:

<x-model src="createmodel.php?file=duck" type="model/gltf-binary">

Ideally, the model element would also be able to determine object format from the HTTP response Content-Type header, but this is handled by THREE so that would need to be addressed externally.

While this approach will work for models such as gLTF, which has a registered MIME type, it doesn't help with formats like OBJ, which don't have a registered MIME type.

For reference - here are the MIME types for the formats supported so far:

• glb model/gltf-binary
• gltf model/gltf+json

Only supports then .obj model file format - other loaders will be added in the future.

I think the next best loader would be with the new gLTF specification that has incredible adoption in the industry at the moment as a standard file format of 3D content.

three.js already has a loader for this: https://threejs.org/docs/#examples/loaders/GLTFLoader

Could probably check if extension specifies a gLTF format (.gltf, .glb) and check if the Loader is present for it?

What would the implications to allow insert any procedurally generated models in the browser? Or would it have to be data-uri'd?

I guess URL.createObjectURL might be a way?

Part of the inspiration is this kind of thing: https://twitter.com/robertskmiles/status/921332108819423233