时间戳

首页 > 解决方案 > Three.js：如何在特定情况下向 CSS3DRenderer 场景添加 3D 图元？

javascript - Three.js：如何在特定情况下向 CSS3DRenderer 场景添加 3D 图元？

问题描述

这是代码：

"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.controls.autoRotate = true;
    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('img');
    div.style.width = '160px';
    div.style.height = 'auto';
    div.src = 'https://upload.wikimedia.org/wikipedia/commons/thumb/2/2e/1-month-old_kitten_42.jpg/2880px-1-month-old_kitten_42.jpg';
    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>
<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>

现在我想添加一个带有MeshBasicMaterial.

我试图添加类似的东西：

const geometry = new THREE.TorusGeometry( 10, 3, 16, 100 );
const material = new THREE.MeshBasicMaterial( { color: 0xff0000 } );
const torus = new THREE.Mesh( geometry, material );
torus.position.set(0, 0, 0);
scene.add( torus );

不幸的是，它不起作用。我也不知道理论上是否可行。

有人可以帮我吗？我会很高兴的！:)

标签： javascriptthree.js

解决方案

如果我用它替换scene它this.scene似乎工作得很好。但是请注意，WebGL 渲染的 3D 对象和 HTML 元素的组合在某些情况下是有问题的，因为深度测试不适用于两种原始类型。

使用当前设置，图像将始终呈现在圆环顶部。

"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.controls.autoRotate = true;
    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('img');
    div.style.width = '160px';
    div.style.height = 'auto';
    div.src = 'https://upload.wikimedia.org/wikipedia/commons/thumb/2/2e/1-month-old_kitten_42.jpg/2880px-1-month-old_kitten_42.jpg';
    var object = new CSS3DObject(div);
    object.position.set(0, 0, 0);
    object.scale.set(1 / 16, 1 / 16, 1 / 16);
    this.scene.add(object);

    const geometry = new THREE.TorusGeometry( 10, 3, 16, 100 );
    const material = new THREE.MeshBasicMaterial( { color: 0xff0000 } );
    const torus = new THREE.Mesh( geometry, material );
    this.scene.add( torus );
    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>
<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>

推荐阅读