Question

我正在创建一个带有中心对象和围绕其浮动的6个立方体的场景，我还在整个场景中使用了bloom后处理效果，但是现在我的任务是修改代码，以便仅中心对象具有绽放效果，并且多维数据集可以正常渲染。

我遇到了使用camera.layers的概念，起初它似乎只对绽放产生影响，但只影响中心对象，直到我旋转了一点并意识到我已经失去了中心对象的深度因此，立方体现在在中心对象的前面旋转。

这是我找到的解决方案：

https://discourse.threejs.org/t/solved-effectcomposer-layers/3158/3

这是我的渲染循环：

this._renderer.clear();

this._sceneLights.directionalLight.layers.set(1);
this._sceneLights.ambientLight.layers.set(1);
this._camera.layers.set(1);
this._effectComposer.render();

this._renderer.clearDepth();

this._sceneLights.directionalLight.layers.set(0);
this._sceneLights.ambientLight.layers.set(0);
this._camera.layers.set(0);
this._renderer.render(this._scene, this._camera);

我还有this._renderer.autoClear = false;

还有centreMesh.layers.set(1);

我遇到了一些建议使用2个场景的选项，但是我不知道深度问题是否还会继续存在？ camera.layers解决方案也非常接近我想要的

有没有办法在层之间保留中心对象的深度？

P.S。我知道我正在清除深度缓冲区，但是我不得不以其他方式不显示/渲染多维数据集，我只是想知道是否有一种方法可以保留深度并在正常渲染之后再次应用？ >

Answer 1

一个精灵而不是一个球体

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.set(-3, 5, 8);
camera.lookAt(scene.position);
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

var light = new THREE.DirectionalLight(0xffffff, 0.5);
light.position.setScalar(10);
scene.add(light);
scene.add(new THREE.AmbientLight(0xffffff, 0.5));

var boxes = [];
for (let i = 0; i < 6; i++) {
  let box = new THREE.Mesh(new THREE.BoxBufferGeometry(2, 2, 2), new THREE.MeshLambertMaterial({
    color: "maroon"
  }));
  boxes.push(box);
  scene.add(box);
}

var sunBlur = new THREE.Sprite(new THREE.SpriteMaterial({
  color: "yellow",
  map: new THREE.TextureLoader().load('https://threejs.org/examples/textures/sprites/spark1.png')
}));
sunBlur.scale.set(10, 10, 1);
scene.add(sunBlur);

var clock = new THREE.Clock();
var time = 0;

render();

function render() {
  requestAnimationFrame(render);
  time += clock.getDelta();
  boxes.forEach((b, idx) => {
    b.position.x = Math.cos(idx * (Math.PI / 3) + time) * 5;
    b.position.z = Math.sin(idx * (Math.PI / 3) + time) * 5;
  });
  renderer.render(scene, camera);
}

body {
  overflow: hidden;
  margin: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/96/three.min.js"></script>

三种JS-渲染camera.layers（0）

1 个答案: