Hello, This weekend I’ve been trying to use webcomponents (templates, shadow DOM and custom elements) to encapsulate THREE scene. I have done the following: I’m having trouble displaying the code properly, so here’s a Fiddle to show it: https://jsfiddle.net/6zje01gr/1/ I am trying to reproduce th…

https://jsfiddle.net/ed7zwpvg/ :gift: (0. I added html and body tags, but am not sure they are necessary on JSFiddle.) Certain things in init, I think mainly offsetWidth/offsetHeight, depended on being already connected. You never called renderer.render.

[image] EliasHasle: I added html and body tags, but am not sure they are necessary on JSFiddle They are not :innocent:

I am glad to have helped you. :smiley:

Hello again, I thought I could take over from after the help you gave me but I’m still stuck and I don’t understand why. I’ve done this several times without web components. https://jsfiddle.net/Laf067wp/1/ I hope that once the the cube animation works, I’ll be able to make it work. So, if someon…

https://jsfiddle.net/1yxnecgo/ The problem was passing a method to requestAnimationFrame. You have to instead wrap the method call in a function. To avoid losing the this context, I used an arrow function. Not that obvious, eh? :wink: PS: If you configure the renderer with antialias: true at const…

Thank you! or thanks again, should I say. No, not obvious at all! It reminds of something I learnt a few days ago. To call a method from another method in the same class, in the constructor they added: this.method = this.method.bind(this); So I tried it here ( Edit fiddle - JSFiddle - Code Playg…

I am glad to have helped you! [image] eric: this.method = this.method.bind(this); That does not make too much sense. :wink: Function.prototype.bind() - JavaScript | MDN If you need to pass a long function that needs the this context, you can either use tricks like someFunction.bind(this); …

ok… I don’t know what to say. I’ll read the MDN page tonight. Thanks!

Using web components (vanilia JS) to display THREE.js

Questions

eric August 27, 2019, 9:17am 4

Well, silly me… I had never thought of executing init() from connectedCallback… I tried so many things that I forgot to add to render this time.

Thank you!

Topic		Replies	Views
Three.js + React. Can I implement Three.js as component in React Questions webgl-renderer	5	2681	August 20, 2021
THREE.js with VUE.js Questions animation , vue	0	3120	August 30, 2019
Loading three.js from a class Questions webgl-renderer	5	1375	November 25, 2021
Please Read This Before Posting a Question Questions questions	1	5487	March 13, 2017
Having a hard time implementing my plain threejs project into a react project without breaking it, specifically problematic with controls Questions webgl-renderer , orbit-controls , animation , react , react-three-fiber	1	1460	March 8, 2023

Using web components (vanilia JS) to display THREE.js

Related topics