个人中心
gpt4 book ai didi

three.js - 将 Three.js 添加到 LitElement 类

转载 作者：行者123 更新时间：2023-12-05 02:14:42 24 4
gpt4 key购买 nike

我正在学习如何将 Three.js 集成到 Polymer 的 Lit-Element 中。我当前的问题是我需要引用一个 div 元素来附加 Three 的渲染器元素。以下是通常的做法:

box = document.getElementById("box")
box.appendChild(renderer.domElement)

不幸的是，我无法找到如何从 constructor()/firstUpdate() 引用渲染函数中声明的 div。 你会怎么做？

这是我目前最好的成绩: Renderer element off target

这是获得此结果的代码: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);

我们欢迎任何建议。

最佳答案

在你的 constructor 函数中，你可以通过将变量设置为 this

来保留变量以供以后在其他函数中使用 
this.renderer = renderer

然后在firstUpdated函数中你可以做

firstUpdated () {
  let box = this.shadowRoot.getElementById('box')
  box.appendChild(this.renderer.domElement)
}

示例代码:

<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>

关于three.js - 将 Three.js 添加到 LitElement 类，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53314275/

24 4 0
文章推荐： angular - karma测试时如何打印log
文章推荐： azure - 访问 Azure 存储库时收到 403 禁止
文章推荐： web-component - 当使用 webcomponents-loader 而不是 webcomponents-lite
文章推荐： c# - 从共享项目中获取嵌入式资源
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com