三.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,&nbsp; CSS3DRenderer = THREE.CSS3DRenderer,&nbsp; CSS3DObject = THREE.CSS3DObject,&nbsp; Scene = THREE.Scene,&nbsp; PerspectiveCamera = THREE.PerspectiveCamera,&nbsp; Mesh = THREE.Mesh,&nbsp; PlaneGeometry = THREE.PlaneGeometry,&nbsp; MeshPhongMaterial = THREE.MeshPhongMaterial,&nbsp; Color = THREE.Color,&nbsp; DoubleSide = THREE.DoubleSide,&nbsp; NoBlending = THREE.NoBlending,&nbsp; WebGLRenderer = THREE.WebGLRenderer,&nbsp; MeshBasicMaterial = THREE.MeshBasicMaterial;var CSS3DDemo = /** @class */ (function() {&nbsp; function CSS3DDemo() {&nbsp; &nbsp; this.scene = new Scene();&nbsp; &nbsp; this.camera = new PerspectiveCamera(50, window.innerWidth / window.innerHeight, 0.1, 500);&nbsp; &nbsp; this.webGLRenderer = new WebGLRenderer();&nbsp; &nbsp; this.css3DRenderer = new CSS3DRenderer();&nbsp; &nbsp; this.controls = new OrbitControls(this.camera, this.css3DRenderer.domElement);&nbsp; &nbsp; this.camera.position.set(0, 0, 20);&nbsp; &nbsp; this.webGLRenderer.setSize(window.innerWidth, window.innerHeight);&nbsp; &nbsp; this.webGLRenderer.setClearColor(0xFFFFFF);&nbsp; &nbsp; this.css3DRenderer.setSize(window.innerWidth, window.innerHeight);&nbsp; &nbsp; this.css3DRenderer.domElement.style.top = '0px';&nbsp; &nbsp; this.css3DRenderer.domElement.style.left = '0px';&nbsp; &nbsp; this.css3DRenderer.domElement.style.position = 'absolute';&nbsp; &nbsp; var div = window.document.createElement('div');&nbsp; &nbsp; div.innerHTML = "this is content";&nbsp; &nbsp; div.style.width = '160px';&nbsp; &nbsp; div.style.height = '160px';&nbsp; &nbsp; div.style.background = 'red';&nbsp; &nbsp; var object = new CSS3DObject(div);&nbsp; &nbsp; object.position.set(0, 0, 0);&nbsp; &nbsp; object.scale.set(1 / 16, 1 / 16, 1 / 16);&nbsp; &nbsp; this.scene.add(object);&nbsp; &nbsp; var planeGeometry = new PlaneGeometry(10, 10);&nbsp; &nbsp; this.scene.add(this.camera);&nbsp; &nbsp; document.getElementById("content").appendChild(this.webGLRenderer.domElement);&nbsp; &nbsp; document.getElementById("content").appendChild(this.css3DRenderer.domElement);&nbsp; &nbsp; this.render();&nbsp; }&nbsp; CSS3DDemo.prototype.render = function() {&nbsp; &nbsp; var _this = this;&nbsp; &nbsp; window.requestAnimationFrame(function() {&nbsp; &nbsp; &nbsp; return _this.render();&nbsp; &nbsp; });&nbsp; &nbsp; this.css3DRenderer.render(this.scene, this.camera);&nbsp; &nbsp; this.webGLRenderer.render(this.scene, this.camera);&nbsp; &nbsp; this.controls.update();&nbsp; };&nbsp; return CSS3DDemo;}());new CSS3DDemo();html,body {&nbsp; width: 100vw;&nbsp; margin: 0;&nbsp; height: 100vh;&nbsp; padding: 0;&nbsp; overflow: hidden;&nbsp; border: 0;}#content {&nbsp; width: 60vw;&nbsp; height: 70vh;&nbsp; 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>