Question

首次加载场景时，左右摇摄时，左边的条是半透明的，右边是不透明的。如果你向右移动（右键d）最右边的条，所有条都变得透明。这是照明问题还是我设置光源的方式？

// default alpha for bars
var alpha = 0.6

// fake data
var data = [19, 80, 30, 15, 55, 35, 40,
  45, 50, 70, 109, 35, 78,
  87, 76, 22, 2, 33, 44, 59, 200
]

var animals = ['Bobcat', 'Dog', 'Cat', 'Boar', 'Cheetah', 'Chimp', 'Dragon',
  'Elephant', 'Human', 'Elf', 'Giant', 'Batman', 'Donkey',
  'Henry', 'Face', 'Funny', 'Kitty', 'Doggy', 'Joker', 'Alf', 'Earth'
]

// we scale the height of our bars using d3's linear scale
var hscale = d3.scale.linear()
  .domain([0, d3.max(data)])
  .range([0, 3])

// we select the scene object just like an svg
var scene = d3.select("a-scene")

// we use d3's enter/update/exit pattern to draw and bind our dom elements
var bars = scene.selectAll("a-box.bar").data(data)
bars.enter().append("a-box").classed("bar", true)

$(".bar").append("<a-text> </a-text>");
// we set attributes on our cubes to determine how they are rendered
bars.attr({
    position: function(d, i) {
      var x = i * .75
      var y = hscale(d) / 2;
      var z = 1
      return x + " " + y + " " + z
    },
    width: function(d) {
      return 0.5
    },
    depth: function(d) {
      return 0.9
    },
    height: function(d) {
      return hscale(d)
    },
    opacity: alpha,
    color: 'blue'
  })
  .on("click", function(d, i) {
    console.log("click", i, d)
  })
  .on("mouseenter", function(d, i) {
    // this event gets fired continuously as long as the cursor
    // is over the element. we only want trigger our animation the first time
    if (this.hovering) return;
    console.log("hover", i, d)
    this.hovering = true;
    d3.select(this).transition().duration(10)
      .attr({
        metalness: 0.8,
        opacity: .9
      })
    d3.select(this).select("a-text")
      .attr({
        'color': 'hsla(240, 100%, 25%, 0.6)',
        'align': 'center',
        'position': '0 ' + (hscale(d) / 2 + .5) + ' 0',
        'scale': '1 1 1',
        'value': animals[i] + ', ' + d
      })
  })
  .on("mouseleave", function(d, i) {
    console.log("leave", i, d)
    this.hovering = false;
    d3.select(this).transition().duration(500)
      .attr({
        metalness: 0,
        opacity: alpha
      })
    d3.select(this).select("a-text")
      .attr({
        'color': 'blue',
        'align': 'center',
        'position': '0 ' + (hscale(d) / 2 + .5) + ' 0',
        'scale': '.01 .01 .01',
        'value': d
      })
  })

You can also interact with the HTML Code here.

Answer 1

来自Three.js / WebGL - transparent planes hiding other planes behind them

透明曲面不能很好地与z缓冲区配合使用，因此必须手动排序并从前到后渲染。 three.js试图为你做这个（这就是为什么问题会根据相机的角度消失）但是不能很好地处理像你一样显示的交叉几何的情况。

我通过更改素材的alphaTest值或depthWrite值来实现它：

el.components.material.material.alphaTest = 0.5;
el.components.material.material.depthWrite = false;
el.components.material.material.needsUpdate = true;

为什么不透明度会因相机角度而异？

1 个答案: