三.js CSS3DRenderer 场景变成一个div

Question

我想使用 Three.js CSS3DRenderer 来构建一个三维构图。这是我的代码："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 = window.document.createElement('div');    div.innerHTML = "this is content";    div.style.width = '160px';    div.style.height = '160px';    div.style.background = 'red';    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);    window.document.body.appendChild(this.webGLRenderer.domElement);    window.document.body.appendChild(this.css3DRenderer.domElement);    this.render();  }我需要在 id 的 div 中有 Three.JS 3D 场景#content。我已经尝试了很多，但找不到解决方案。我看过一些教程，但我认为在这种情况下有点不同。有人可以帮我吗？会很高兴的！:)

Answer 1

不确定这是否是您想要的。如果您希望将场景附加到 div #content。您可以使用

document.getElementById("content").appendChild(this.webGLRenderer.domElement)

document.getElementById("content").appendChild(this.css3DRenderer.domElement)

如果您查看元素检查器，您会注意到 window.document.body.appendChild() 将附加到正文本身而不是 div #content。

而 document.getElementById("content").appendChild() 将追加到 div #content。

"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 = window.document.createElement('div');

    div.innerHTML = "this is content";

    div.style.width = '160px';

    div.style.height = '160px';

    div.style.background = 'red';

    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: 60vw;

  height: 70vh;

  background-color: grey;

}

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

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