ThreeJS: Сетка становится невидимой, когда внутри другой сетки - PullRequest
Новая
       9

ThreeJS: Сетка становится невидимой, когда внутри другой сетки

0 голосов
/ 05 июня 2018

Я часами пытаюсь понять, почему я не вижу текст внутри куба, и я не понимаю, почему он не работает.

Есть две сетки, одна из них находится внутридругое, но невидимое.

Когда я комментирую строку, добавляющую сетку куба в мою группу, появляется текст (строка 34).Я могу видеть текст, если я удалю «transparent: true» из его материала, но появляется фон (строка 52).

Текст добавляется как текстура холста, это самый простой способ, который я нашелдля динамического добавления двухмерного текста.

Я просто хочу добавить немного белого текста внутри своего куба без какого-либо цвета фона.

Я видел этот вопрос, но, похоже, он не связан с моей проблемой: THREE.JS: Просмотр геометрии внутри сетки 

var renderer, scene, camera, cubeGroup;
var rotationX = 0;
var rotationY = 0;
var percentX, percentY;
var container = document.getElementById('container');

init();
animate();

function init(){
    renderer = new THREE.WebGLRenderer({alpha: true});
    renderer.setSize(window.innerWidth, window.innerHeight);
    renderer.setClearColor( 0x000000, 1);
    document.getElementById('container').appendChild(renderer.domElement);

    scene = new THREE.Scene();

    camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 1, 10000);
    camera.position.set(0, 0, 1000);
    scene.add(camera);
    
    // group
    cubeGroup = new THREE.Group();
    
    // cube
    var geometry = new THREE.BoxGeometry(200, 200, 200);
    var material = new THREE.MeshPhongMaterial({ 
      color: 0x11111f, 
      side: THREE.DoubleSide, 
      opacity: .5,
      transparent: true 
    });
    var mesh = new THREE.Mesh(geometry, material);
    cubeGroup.add(mesh); // Comment this and the text appears with transparency
    
    var ambientLight = new THREE.AmbientLight(0x999999, 0.8);
    scene.add(ambientLight);
    
    // text
    var bitmap = document.createElement('canvas');
    var g = bitmap.getContext('2d');
    bitmap.width = 256;
    bitmap.height = 256;
    g.font = '80px Arial';
    g.fillStyle = 'white';
    g.fillText('text', 20, 80);
        
    var geometry = new THREE.PlaneGeometry(180, 180);
    var texture = new THREE.CanvasTexture(bitmap);
    var material = new THREE.MeshStandardMaterial({
        map: texture,
        transparent: true // Comment this and the text appears - but with background
    });
    
    var mesh2 = new THREE.Mesh(geometry, material);    
    cubeGroup.add(mesh2);
    
    // add group to scene
    scene.add(cubeGroup);
  
    window.addEventListener('resize', onWindowResize, false);
}


function onWindowResize() {

    windowHalfX = window.innerWidth / 2;
    windowHalfY = window.innerHeight / 2;

    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
  
    renderer.setSize(window.innerWidth, window.innerHeight);
    
}

function animate(now){
    requestAnimationFrame(animate);
  
    cubeGroup.rotation.y += (rotationX - cubeGroup.rotation.y) * 0.05;
    cubeGroup.rotation.x += (rotationY - cubeGroup.rotation.x) * 0.05;
        
    renderer.render(scene, camera);    
}

function findViewCoords(mouseEvent)
{
  var xpos;
  var ypos;
  var w = window.innerWidth;
  var h = window.innerHeight;
  var centerX = w/2;
  var centerY = h/2;

  if (mouseEvent)
  {
    xpos = mouseEvent.pageX - document.body.scrollLeft;
    ypos = mouseEvent.pageY - document.body.scrollTop;
  }
  else
  {
    xpos = window.event.x + 2;
    ypos = window.event.y + 2;
  }
  
  var diffX = xpos - centerX;
  var diffY = ypos - centerY;
  percentX = diffX / centerX;
  percentY = diffY / centerY;
 
  rotationX = percentX/2;
  rotationY = percentY/2; 
}

container.addEventListener("mousemove", findViewCoords);
body {
    margin: 0;
    padding: 0;
    overflow: hidden;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/84/three.js"></script>

<div id="container"></div>

1 Ответ

0 голосов
/ 05 июня 2018

Причина, по которой это происходит, заключается в том, что рендеринг в three.js происходит в 2 этапа.

Сначала отрисовывается сплошной материал ... затем прозрачные вещи.

Прозрачные объекты сортируются по их расстояниюс камеры.

Итак, установив ваш .transparent = true;вы заставляете ваш текст визуализироваться во время второго прохода, и, таким образом, визуализироваться поверх другой геометрии.

Проверьте этот ответ неукротимым Вестом Лэнгли:

Прозрачные объектыв Триджи

...