onclick="addHotspot()"

[JonasBlazin]

<button onclick="addHotspot()">Add Hotspot</button><br>

I can't seem to get this to work, is there a specific .js script that it needs? I seem to have copied all of the js scripts with in the example model.

	<button onclick="addHotspot()">Add Hotspot</button>
	<div class="container-model">
		<div class="background-card"></div>
		<div class="model">
			<script src="./_model-viewer_ Interactive Example_files/ResizeObserver.js.download"></script>
			<!-- 🚨 REQUIRED: Web Components polyfill to support Edge and Firefox < 63 -->
			<script src="./_model-viewer_ Interactive Example_files/webcomponents-loader.js.download"></script>

			<!-- 💁 OPTIONAL: Intersection Observer polyfill for better performance in Safari and IE11 -->
			<script src="./_model-viewer_ Interactive Example_files/intersection-observer.js.download"></script>

			<!-- 💁 OPTIONAL: Resize Observer polyfill improves resize behavior in non-Chrome browsers -->
			<script src="./_model-viewer_ Interactive Example_files/ResizeObserver.js.download"></script>

			<!-- 💁 OPTIONAL: Fullscreen polyfill is needed to fully support AR features -->
			<script src="./_model-viewer_ Interactive Example_files/fullscreen.polyfill.js.download"></script>

			<!-- 💁 OPTIONAL: The :focus-visible polyfill removes the focus ring for some input types -->
			<script src="./_model-viewer_ Interactive Example_files/focus-visible.js.download" defer=""></script>

			<!-- Import the component -->
			<script type="module" src="https://unpkg.com/@google/model-viewer/dist/model-viewer.js"></script>
			<script nomodule src="https://unpkg.com/@google/model-viewer/dist/model-viewer-legacy.js"></script>
			<!-- Use it like any other HTML element -->

			<script type="module" src="./_model-viewer_ Interactive Example_files/tester.js.download"></script>
			<script nomodule="" src="./_model-viewer_ Interactive Example_files/tester-umd.js.download"></script>
			<!-- Documentation-specific dependencies: -->
			<script type="module" src="./_model-viewer_ Interactive Example_files/dependencies.js.download">
			</script>
			<script nomodule="" src="./_model-viewer_ Interactive Example_files/dependencies-legacy.js.download">
			</script>

			<model-viewer environment-image="pillars_1k.hdr" class="model" src="EamesLoungeChair.glb"
				alt="A 3D model of an astronaut" auto-rotate camera-controls></model-viewer>



		</div>

[elalish]

@JonasBlazin It looks like you copied from our interactive example page which is not the simplest version of model-viewer to get started with. It also uses extra dependencies for functions like addHotspot(). If you want to get started with hotspots, I'd recommend you start from the annotations page of our docs. Our interactive example page is there to help you find the right values for your data-position and data-normal attributes.

[JonasBlazin]

But I am specifically after addHotspot() functionality as is in the interactive example. As I want people to be able to dynamically add hotspots with a click of a button. Is there a way to gain access to these dependencies?

[elalish]

@JonasBlazin Ah, then you'll want to copy the relevant parts of that function, including the onClick method a few lines down.

[JonasBlazin]

	<div class="shapediver">

		<div class="model">
			<script src="/hotspot.js"></script>

			<script src="./_model-viewer_ Interactive Example_files/ResizeObserver.js.download"></script>
			<!-- 🚨 REQUIRED: Web Components polyfill to support Edge and Firefox < 63 -->
			<script src="./_model-viewer_ Interactive Example_files/webcomponents-loader.js.download"></script>

			<!-- 💁 OPTIONAL: Intersection Observer polyfill for better performance in Safari and IE11 -->
			<script src="./_model-viewer_ Interactive Example_files/intersection-observer.js.download"></script>

			<!-- 💁 OPTIONAL: Resize Observer polyfill improves resize behavior in non-Chrome browsers -->
			<script src="./_model-viewer_ Interactive Example_files/ResizeObserver.js.download"></script>

			<!-- 💁 OPTIONAL: Fullscreen polyfill is needed to fully support AR features -->
			<script src="./_model-viewer_ Interactive Example_files/fullscreen.polyfill.js.download"></script>

			<!-- 💁 OPTIONAL: The :focus-visible polyfill removes the focus ring for some input types -->
			<script src="./_model-viewer_ Interactive Example_files/focus-visible.js.download" defer=""></script>

			<!-- Import the component -->
			<script type="module" src="https://unpkg.com/@google/model-viewer/dist/model-viewer.js"></script>
			<script nomodule src="https://unpkg.com/@google/model-viewer/dist/model-viewer-legacy.js"></script>
			<!-- Use it like any other HTML element -->

			<model-viewer id="loading-demo" environment-image="pillars_1k.hdr" class="model" src="EamesLoungeChair.glb"
				alt="A 3D Model" auto-rotate camera-controls></model-viewer>

			<script  src="model-viewer/packages/modelviewer.dev/src/tester.ts"></script>
			<button onclick="addHotspot()">Add Hotspot</button>
		</div>
	</div>

I am still highly confused as to how to get this to work. I had followed the instructions on github on how to install all dependencies:

git clone git@github.com:google/model-viewer.git
cd model-viewer
npm install
npm run bootstrap

What am I doing wrong? Apologies about dumb questions but this is my first go in more complex issues past html/css.

[elalish]

@JonasBlazin No problem, we're here to help. And no need to close the issue; others will probably have similar questions down the road. You look to be following the developer instructions, but that shouldn't be necessary unless you want to contribute to model-viewer.

Instead of serving locally, I'd recommend building a Glitch, perhaps remixing our example. That way it's easy to share here and I can see all the files involved. You'll want to add a bit of script to handle your button's click event. You can see small script examples toward the bottom of our animations example, but you'll want a function more along the lines of the link I gave you above. The key is calling the positionAndNormalFromPoint() method.

[JonasBlazin]

Ok here is a "remix" that I made. I have added the button with addHotspot() and removeHotspot().

And I have trimmed down tester.ts to what I think is relevant for the add/removeHotspot() which I called hotspot.ts.

and on html I called it with <script> src="hotspot.ts"</script> not sure if it being on the very end of the html is working against me or not.

And I'll shoot in the dark here with the level of knowledge I have. But I will make a learning guess and say that the initial part of hotspot.ts is the problem where it is importing some sort of dependencies?

import {
    ModelViewerElement
} from '@google/model-viewer';
import {
    SimpleDropzone
} from 'simple-dropzone';

Let me know if I am heading in the right direction, what mistakes am I making and what should be my next step

https://glitch.com/edit/#!/join/80207261-0bbb-4e71-bfb6-95f4862b522e

Thank you for your help so much! I was starting to lose hope today, so the help is greatly appreciated.

[JonasBlazin]

Just realised that I need to add id="loading-demo" to the mode;-viewer as it is being called in the hotspot.ts

[elalish]

The first step is you're not using TypeScript like we do internally, so you'll want to change .ts to .js. Second, as you suggested, is remove the imports and the SimpleDropzone (that's to drag-and-drop models). Likewise instead of TS-style export function, you'll want your functions to take a form like: window.addHotspot = () => { viewer.addEventListener('click', onClick); }; and onClick should also look more like window.onClick = (event) => {...};

[elalish]

Make sure to check the JS console in Chrome dev tools; that should help you work through errors you encounter.

[JonasBlazin]

Out of curiosity how come you guys use .ts ?

[elalish]

We build our project internally using TypeScript, which is very similar to JavaScript, but requires a compilation step to output true js. It is helpful for a large project like this because it gives us strong type-safety, allowing its compiler to catch a lot of errors before we even get to testing.

[JonasBlazin]

Does it mean that the whole hotspot.ts needs to re-written in a syntax closer to .js or is it just export functions? If so could one use a compiler to turn it into .js?

[elalish]

Ts and js syntax are nearly identical, so start with just copying. The console should help if there are any remaining issues. If you’re new to js, you may want to start by modifying one of our simpler script examples to get comfortable.

…

On Tue, Jun 2, 2020 at 12:27 PM JonasBlazin ***@***.***> wrote: Does it mean that the whole hotspot.ts needs to re-written in a syntax closer to .js or is it just export functions? If so could one use a compiler to turn it into .js? — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#1233 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAMS2LCGVBJRSND3SEVHTQ3RUVHCDANCNFSM4NNI5FKQ> .

[sietsenefs]

has there been any more information on how to add annotations on click since then, because i am stuck at the same problem where there are some file imported like import { ModelViewerElement } from '@google/model-viewer/lib/model-viewer'; but i dont know where i can find the imported file to include more of the code i need to make it work.

Is there any link where i can find some more information on how to do this? i have been searching but haven't found anything usefull.

[elalish]

@sietsenefs We haven't made an example of this yet because we didn't think it was a common use case, and requires a bit more JS knowledge than many of our users care to deal with. May I ask what you're using this for? The trouble is you're trying to use our Github sources as examples, but they are compiled differently. You'll want to use our actual API documentation, connecting our annotations example to our positionAndNormalFromPoint() method, and use that to set data-position and data-normal on a new hotspot you append.

[sietsenefs]

@elalish we want to use this so the 3d models we make can be uploaded to our site then clients would be able to create annotations on the models with feedback (which would be extremely helpful to actually be on the piece of the model that it corresponds with) I then want those annotations to be permanently there (with php) so our 3d designers can go to the site see what feedback got added where and they can change the models.

This is a feature that would be really helpful for us so I will try to do some more research on the positionAndNormalFromPoint() method. any information to nudge me in the right direction even more would be amazing.

[elalish]

I think you're basically looking for a function like this:

function onClick(event: MouseEvent) {
  const rect = viewer.getBoundingClientRect();
  const x = event.clientX - rect.left;
  const y = event.clientY - rect.top;
  const positionAndNormal = viewer.positionAndNormalFromPoint(x, y);

  if (positionAndNormal == null) {
    console.log('no hit result: mouse = ', x, ', ', y);
    return;
  }
  const {position, normal} = positionAndNormal;

  const hotspot = document.createElement('button');
  hotspot.slot = `hotspot-${hotspotCounter++}`;
  hotspot.classList.add('hotspot');
  hotspot.dataset.position = position.toString();
  if (normal != null) {
    hotspot.dataset.normal = normal.toString();
  }
  viewer.appendChild(hotspot);
}

where viewer is your model-viewer element. Does that help?

[elalish]

@sietsenefs If you can share your project when it's working, I'd love to see it. Feel free to @modelviewer on Twitter and we can help spread the word.

[sietsenefs]

@elalish The whole project is not nearly done but for some other people maybe trying to get the same thing working I made a git repository with this functionality add annotations in model viewer (one with and one without custom text you can put in) thanks for helping me with it!