javascript-Three.js：如何为CSS3DRenderer场景获取DOM对象？

Benjamin 2020-11-30 04:04:30

你可以在DOM中添加div，然后使用document.querySelector进行选择，而不是在代码中创建DOM元素，然后将其添加到场景中。

说明： 你的代码实际上创建了一个Element类型的对象，并将其作为参数传递给CSS3DObject，以便将其添加到threeJS场景。但是你可以在HTML代码中创建任意数量的标记，然后使用Javascript选择它。你通过document.querySelector获得的元素也是Element类型的对象。你可以在这里阅读有关它的更多信息：https : //developer.mozilla.org/fr/docs/Web/API/Document/querySelector 还有使用Javascript选择元素的几种方法（按ID，类或按示例标记）。）：https：//plainjs.com/javascript/selecting/

解决方案：

JS：

 var div = document.querySelector("#stuff");
    div.style.width = '160px';
    div.style.height = 'auto';
    var object = new CSS3DObject(div);

HTML：

<div id="stuff">Hello from dom</div>

使用你的代码的工作示例：

"use strict";
var OrbitControls = THREE.OrbitControls,
  CSS3DRenderer = THREE.CSS3DRenderer,
  CSS3DObject = THREE.CSS3DObject,
  Scene = THREE.Scene,
  PerspectiveCamera = THREE.PerspectiveCamera,
  Mesh = THREE.Mesh,
  PlaneGeometry = THREE.PlaneGeometry,
  MeshPhongMaterial = THREE.MeshPhongMaterial,
  Color = THREE.Color,
  DoubleSide = THREE.DoubleSide,
  NoBlending = THREE.NoBlending,
  WebGLRenderer = THREE.WebGLRenderer,
  MeshBasicMaterial = THREE.MeshBasicMaterial;
var CSS3DDemo = /** @class */ (function() {
  function CSS3DDemo() {
    this.scene = new Scene();
    this.camera = new PerspectiveCamera(50, window.innerWidth / window.innerHeight, 0.1, 500);
    this.webGLRenderer = new WebGLRenderer();
    this.css3DRenderer = new CSS3DRenderer();
    this.controls = new OrbitControls(this.camera, this.css3DRenderer.domElement);
    this.camera.position.set(0, 0, 20);
    this.webGLRenderer.setSize(window.innerWidth, window.innerHeight);
    this.webGLRenderer.setClearColor(0xFFFFFF);
    this.css3DRenderer.setSize(window.innerWidth, window.innerHeight);
    this.css3DRenderer.domElement.style.top = '0px';
    this.css3DRenderer.domElement.style.left = '0px';
    this.css3DRenderer.domElement.style.position = 'absolute';
    var div = document.querySelector("#stuff");
    div.style.width = '160px';
    div.style.height = 'auto';
    var object = new CSS3DObject(div);
    object.position.set(0, 0, 0);
    object.scale.set(1 / 16, 1 / 16, 1 / 16);
    this.scene.add(object);
    var planeGeometry = new PlaneGeometry(10, 10);
    this.scene.add(this.camera);
    document.getElementById("content").appendChild(this.webGLRenderer.domElement);
    document.getElementById("content").appendChild(this.css3DRenderer.domElement);
    this.render();
  }
  CSS3DDemo.prototype.render = function() {
    var _this = this;
    window.requestAnimationFrame(function() {
      return _this.render();
    });
    this.css3DRenderer.render(this.scene, this.camera);
    this.webGLRenderer.render(this.scene, this.camera);
    this.controls.update();
  };
  return CSS3DDemo;
}());
new CSS3DDemo();

html,
body {
  width: 100vw;
  margin: 0;
  height: 100vh;
  padding: 0;
  overflow: hidden;
  border: 0;
}

#content {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

<div id="content"></div>

<div id="stuff">Hello from dom</div>


<script src='https://gitcdn.xyz/repo/mrdoob/three.js/dev/build/three.min.js'></script>
<script src='https://gitcdn.xyz/repo/mrdoob/three.js/dev/examples/js/controls/OrbitControls.js'></script>
<script src='https://gitcdn.xyz/repo/mrdoob/three.js/dev/examples/js/renderers/CSS3DRenderer.js'></script>
<script src="./script.js"></script>

Anna_B 2020-11-29 21:00:12

Thaaaaaanks !!!!!!!!

javascript-Three.js：如何为CSS3DRenderer场景获取DOM对象？

(javascript - Three.js: How to take DOM objects for CSS3DRenderer scene?)

热门github