Adding Three.js to a LitElement Class
0
I'm learning how to integrate Three.js to Polymer's Lit-Element. My current problem is that I need refer to a div element to append Three's Renderer element. Here's how it is done usually:
box = document.getElementById("box")
box.appendChild(renderer.domElement)
Unfortunately, I am not able find how to refer from the constructor()/firstUpdate() to the div declared in the render function. How would you do that?
Here's my best result for now:
Renderer element off target
Here's the code to get this result:
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<box-test></box-test>
<script type="module" src="src/components/box-test.js" crossorigin></script>
</body>
</html>
Javascript:
import LitElement, html from '@polymer/lit-element';
import * as THREE from 'three/build/three.module';
class BoxTest extends LitElement
constructor()
super();
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(75, 1, 0.1, 1000);
var renderer = new THREE.WebGLRenderer();
renderer.setSize(300, 300);
//box = document.getElementById("box");
document.body.appendChild(renderer.domElement);
var geometry = new THREE.BoxGeometry(1, 1, 1);
var material = new THREE.MeshBasicMaterial( color: 0x00ff00, wireframe: true );
var cube = new THREE.Mesh(geometry, material);
scene.add(cube);
camera.position.z = 5;
var animate = function ()
requestAnimationFrame(animate);
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
renderer.render(scene, camera);
;
animate();
render()
return html`
<style>
#box border: 1px solid red; height: 310px; width: 310px;
</style>
<section>
The webgl animation must be in the red box
<div id="box">
</div>
</section>
`
window.customElements.define('box-test', BoxTest);
Any suggestion will be welcomed.
three.js lit-element
asked Nov 15 '18 at 7:22
StudentStudent
53
add a comment |
0
I'm learning how to integrate Three.js to Polymer's Lit-Element. My current problem is that I need refer to a div element to append Three's Renderer element. Here's how it is done usually:
box = document.getElementById("box")
box.appendChild(renderer.domElement)
Unfortunately, I am not able find how to refer from the constructor()/firstUpdate() to the div declared in the render function. How would you do that?
Here's my best result for now:
Renderer element off target
Here's the code to get this result:
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<box-test></box-test>
<script type="module" src="src/components/box-test.js" crossorigin></script>
</body>
</html>
Javascript:
import LitElement, html from '@polymer/lit-element';
import * as THREE from 'three/build/three.module';
class BoxTest extends LitElement
constructor()
super();
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(75, 1, 0.1, 1000);
var renderer = new THREE.WebGLRenderer();
renderer.setSize(300, 300);
//box = document.getElementById("box");
document.body.appendChild(renderer.domElement);
var geometry = new THREE.BoxGeometry(1, 1, 1);
var material = new THREE.MeshBasicMaterial( color: 0x00ff00, wireframe: true );
var cube = new THREE.Mesh(geometry, material);
scene.add(cube);
camera.position.z = 5;
var animate = function ()
requestAnimationFrame(animate);
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
renderer.render(scene, camera);
;
animate();
render()
return html`
<style>
#box border: 1px solid red; height: 310px; width: 310px;
</style>
<section>
The webgl animation must be in the red box
<div id="box">
</div>
</section>
`
window.customElements.define('box-test', BoxTest);
Any suggestion will be welcomed.
three.js lit-element
asked Nov 15 '18 at 7:22
StudentStudent
53
add a comment |
0
0
0
I'm learning how to integrate Three.js to Polymer's Lit-Element. My current problem is that I need refer to a div element to append Three's Renderer element. Here's how it is done usually:
box = document.getElementById("box")
box.appendChild(renderer.domElement)
Unfortunately, I am not able find how to refer from the constructor()/firstUpdate() to the div declared in the render function. How would you do that?
Here's my best result for now:
Renderer element off target
Here's the code to get this result:
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<box-test></box-test>
<script type="module" src="src/components/box-test.js" crossorigin></script>
</body>
</html>
Javascript:
import LitElement, html from '@polymer/lit-element';
import * as THREE from 'three/build/three.module';
class BoxTest extends LitElement
constructor()
super();
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(75, 1, 0.1, 1000);
var renderer = new THREE.WebGLRenderer();
renderer.setSize(300, 300);
//box = document.getElementById("box");
document.body.appendChild(renderer.domElement);
var geometry = new THREE.BoxGeometry(1, 1, 1);
var material = new THREE.MeshBasicMaterial( color: 0x00ff00, wireframe: true );
var cube = new THREE.Mesh(geometry, material);
scene.add(cube);
camera.position.z = 5;
var animate = function ()
requestAnimationFrame(animate);
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
renderer.render(scene, camera);
;
animate();
render()
return html`
<style>
#box border: 1px solid red; height: 310px; width: 310px;
</style>
<section>
The webgl animation must be in the red box
<div id="box">
</div>
</section>
`
window.customElements.define('box-test', BoxTest);
Any suggestion will be welcomed.
three.js lit-element
asked Nov 15 '18 at 7:22
StudentStudent
53
I'm learning how to integrate Three.js to Polymer's Lit-Element. My current problem is that I need refer to a div element to append Three's Renderer element. Here's how it is done usually:
box = document.getElementById("box")
box.appendChild(renderer.domElement)
Unfortunately, I am not able find how to refer from the constructor()/firstUpdate() to the div declared in the render function. How would you do that?
Here's my best result for now:
Renderer element off target
Here's the code to get this result:
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<box-test></box-test>
<script type="module" src="src/components/box-test.js" crossorigin></script>
</body>
</html>
Javascript:
import LitElement, html from '@polymer/lit-element';
import * as THREE from 'three/build/three.module';
class BoxTest extends LitElement
constructor()
super();
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(75, 1, 0.1, 1000);
var renderer = new THREE.WebGLRenderer();
renderer.setSize(300, 300);
//box = document.getElementById("box");
document.body.appendChild(renderer.domElement);
var geometry = new THREE.BoxGeometry(1, 1, 1);
var material = new THREE.MeshBasicMaterial( color: 0x00ff00, wireframe: true );
var cube = new THREE.Mesh(geometry, material);
scene.add(cube);
camera.position.z = 5;
var animate = function ()
requestAnimationFrame(animate);
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
renderer.render(scene, camera);
;
animate();
render()
return html`
<style>
#box border: 1px solid red; height: 310px; width: 310px;
</style>
<section>
The webgl animation must be in the red box
<div id="box">
</div>
</section>
`
window.customElements.define('box-test', BoxTest);
Any suggestion will be welcomed.
three.js lit-element
three.js lit-element
asked Nov 15 '18 at 7:22
StudentStudent
53
asked Nov 15 '18 at 7:22
StudentStudent
53
asked Nov 15 '18 at 7:22
StudentStudent
53
asked Nov 15 '18 at 7:22
StudentStudent
53
asked Nov 15 '18 at 7:22
StudentStudent
53
53
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
1
In your constructor function you can keep variables to use in other functions later by set it to this
this.renderer = renderer
Then in firstUpdated function you can do
firstUpdated ()
let box = this.shadowRoot.getElementById('box')
box.appendChild(this.renderer.domElement)
Example Code:
<script type='module'>
import LitElement, html from '@polymer/lit-element'
import * as THREE from 'three/build/three.module'
class BoxTest extends LitElement
constructor ()
super()
var scene = new THREE.Scene()
var camera = new THREE.PerspectiveCamera(75, 1, 0.1, 1000)
var geometry = new THREE.BoxGeometry(1, 1, 1)
var material = new THREE.MeshBasicMaterial( color: 0x00ff00, wireframe: true )
var cube = new THREE.Mesh(geometry, material)
scene.add(cube)
camera.position.z = 5
;(function animate ()
requestAnimationFrame(animate)
cube.rotation.x += 0.01
cube.rotation.y += 0.01
renderer.render(scene, camera)
())
var renderer = new THREE.WebGLRenderer()
renderer.setSize(300, 300)
this.renderer = renderer
firstUpdated ()
let box = this.shadowRoot.getElementById('box')
box.appendChild(this.renderer.domElement)
render ()
return html`
<style>
#box border: 1px solid red; height: 310px; width: 310px;
</style>
<section>
The webgl animation must be in the red box
<div id="box"></div>
</section>
`
window.customElements.define('box-test', BoxTest)
</script>
answered Nov 15 '18 at 8:38
User 28User 28
669513
Thank you! Since Saturday I'm with this... Now I understand better how to use constructor() vs firstUpdated() and "this.shadowRoot". I'll search that way before asking a question. Have a nice day!
– Student
Nov 15 '18 at 12:34
add a comment |
Your Answer
StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");
StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);
else
createEditor();
);
function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);
);
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53314275%2fadding-three-js-to-a-litelement-class%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
1
In your constructor function you can keep variables to use in other functions later by set it to this
this.renderer = renderer
Then in firstUpdated function you can do
firstUpdated ()
let box = this.shadowRoot.getElementById('box')
box.appendChild(this.renderer.domElement)
Example Code:
<script type='module'>
import LitElement, html from '@polymer/lit-element'
import * as THREE from 'three/build/three.module'
class BoxTest extends LitElement
constructor ()
super()
var scene = new THREE.Scene()
var camera = new THREE.PerspectiveCamera(75, 1, 0.1, 1000)
var geometry = new THREE.BoxGeometry(1, 1, 1)
var material = new THREE.MeshBasicMaterial( color: 0x00ff00, wireframe: true )
var cube = new THREE.Mesh(geometry, material)
scene.add(cube)
camera.position.z = 5
;(function animate ()
requestAnimationFrame(animate)
cube.rotation.x += 0.01
cube.rotation.y += 0.01
renderer.render(scene, camera)
())
var renderer = new THREE.WebGLRenderer()
renderer.setSize(300, 300)
this.renderer = renderer
firstUpdated ()
let box = this.shadowRoot.getElementById('box')
box.appendChild(this.renderer.domElement)
render ()
return html`
<style>
#box border: 1px solid red; height: 310px; width: 310px;
</style>
<section>
The webgl animation must be in the red box
<div id="box"></div>
</section>
`
window.customElements.define('box-test', BoxTest)
</script>
answered Nov 15 '18 at 8:38
User 28User 28
669513
Thank you! Since Saturday I'm with this... Now I understand better how to use constructor() vs firstUpdated() and "this.shadowRoot". I'll search that way before asking a question. Have a nice day!
– Student
Nov 15 '18 at 12:34
add a comment |
1
In your constructor function you can keep variables to use in other functions later by set it to this
this.renderer = renderer
Then in firstUpdated function you can do
firstUpdated ()
let box = this.shadowRoot.getElementById('box')
box.appendChild(this.renderer.domElement)
Example Code:
<script type='module'>
import LitElement, html from '@polymer/lit-element'
import * as THREE from 'three/build/three.module'
class BoxTest extends LitElement
constructor ()
super()
var scene = new THREE.Scene()
var camera = new THREE.PerspectiveCamera(75, 1, 0.1, 1000)
var geometry = new THREE.BoxGeometry(1, 1, 1)
var material = new THREE.MeshBasicMaterial( color: 0x00ff00, wireframe: true )
var cube = new THREE.Mesh(geometry, material)
scene.add(cube)
camera.position.z = 5
;(function animate ()
requestAnimationFrame(animate)
cube.rotation.x += 0.01
cube.rotation.y += 0.01
renderer.render(scene, camera)
())
var renderer = new THREE.WebGLRenderer()
renderer.setSize(300, 300)
this.renderer = renderer
firstUpdated ()
let box = this.shadowRoot.getElementById('box')
box.appendChild(this.renderer.domElement)
render ()
return html`
<style>
#box border: 1px solid red; height: 310px; width: 310px;
</style>
<section>
The webgl animation must be in the red box
<div id="box"></div>
</section>
`
window.customElements.define('box-test', BoxTest)
</script>
answered Nov 15 '18 at 8:38
User 28User 28
669513
Thank you! Since Saturday I'm with this... Now I understand better how to use constructor() vs firstUpdated() and "this.shadowRoot". I'll search that way before asking a question. Have a nice day!
– Student
Nov 15 '18 at 12:34
add a comment |
1
1
1
In your constructor function you can keep variables to use in other functions later by set it to this
this.renderer = renderer
Then in firstUpdated function you can do
firstUpdated ()
let box = this.shadowRoot.getElementById('box')
box.appendChild(this.renderer.domElement)
Example Code:
<script type='module'>
import LitElement, html from '@polymer/lit-element'
import * as THREE from 'three/build/three.module'
class BoxTest extends LitElement
constructor ()
super()
var scene = new THREE.Scene()
var camera = new THREE.PerspectiveCamera(75, 1, 0.1, 1000)
var geometry = new THREE.BoxGeometry(1, 1, 1)
var material = new THREE.MeshBasicMaterial( color: 0x00ff00, wireframe: true )
var cube = new THREE.Mesh(geometry, material)
scene.add(cube)
camera.position.z = 5
;(function animate ()
requestAnimationFrame(animate)
cube.rotation.x += 0.01
cube.rotation.y += 0.01
renderer.render(scene, camera)
())
var renderer = new THREE.WebGLRenderer()
renderer.setSize(300, 300)
this.renderer = renderer
firstUpdated ()
let box = this.shadowRoot.getElementById('box')
box.appendChild(this.renderer.domElement)
render ()
return html`
<style>
#box border: 1px solid red; height: 310px; width: 310px;
</style>
<section>
The webgl animation must be in the red box
<div id="box"></div>
</section>
`
window.customElements.define('box-test', BoxTest)
</script>
answered Nov 15 '18 at 8:38
User 28User 28
669513
In your constructor function you can keep variables to use in other functions later by set it to this
this.renderer = renderer
Then in firstUpdated function you can do
firstUpdated ()
let box = this.shadowRoot.getElementById('box')
box.appendChild(this.renderer.domElement)
Example Code:
<script type='module'>
import LitElement, html from '@polymer/lit-element'
import * as THREE from 'three/build/three.module'
class BoxTest extends LitElement
constructor ()
super()
var scene = new THREE.Scene()
var camera = new THREE.PerspectiveCamera(75, 1, 0.1, 1000)
var geometry = new THREE.BoxGeometry(1, 1, 1)
var material = new THREE.MeshBasicMaterial( color: 0x00ff00, wireframe: true )
var cube = new THREE.Mesh(geometry, material)
scene.add(cube)
camera.position.z = 5
;(function animate ()
requestAnimationFrame(animate)
cube.rotation.x += 0.01
cube.rotation.y += 0.01
renderer.render(scene, camera)
())
var renderer = new THREE.WebGLRenderer()
renderer.setSize(300, 300)
this.renderer = renderer
firstUpdated ()
let box = this.shadowRoot.getElementById('box')
box.appendChild(this.renderer.domElement)
render ()
return html`
<style>
#box border: 1px solid red; height: 310px; width: 310px;
</style>
<section>
The webgl animation must be in the red box
<div id="box"></div>
</section>
`
window.customElements.define('box-test', BoxTest)
</script>
answered Nov 15 '18 at 8:38
User 28User 28
669513
answered Nov 15 '18 at 8:38
User 28User 28
669513
answered Nov 15 '18 at 8:38
User 28User 28
669513
answered Nov 15 '18 at 8:38
User 28User 28
669513
669513
Thank you! Since Saturday I'm with this... Now I understand better how to use constructor() vs firstUpdated() and "this.shadowRoot". I'll search that way before asking a question. Have a nice day!
– Student
Nov 15 '18 at 12:34
add a comment |
Thank you! Since Saturday I'm with this... Now I understand better how to use constructor() vs firstUpdated() and "this.shadowRoot". I'll search that way before asking a question. Have a nice day!
– Student
Nov 15 '18 at 12:34
Thank you! Since Saturday I'm with this... Now I understand better how to use constructor() vs firstUpdated() and "this.shadowRoot". I'll search that way before asking a question. Have a nice day!
– Student
Nov 15 '18 at 12:34
Thank you! Since Saturday I'm with this... Now I understand better how to use constructor() vs firstUpdated() and "this.shadowRoot". I'll search that way before asking a question. Have a nice day!
– Student
Nov 15 '18 at 12:34
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53314275%2fadding-three-js-to-a-litelement-class%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
