Menu
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.
356
asked Jul 18 '26 20:07
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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
