javascript - ThreeJS:当在另一个网格中时,网格变得不可见
问题描述
我试图找出几个小时为什么我看不到立方体内的文字,我不明白为什么它不起作用。
有两个网格,其中一个在另一个内部,但不可见。
当我评论将立方体网格添加到我的组的行时,会出现文本(第 34 行)。如果我从其材料中删除“透明:真”,我可以看到文本,但会出现背景(第 52 行)。
文本被添加为画布纹理,这是我发现动态添加 2d 文本的最简单方法。
我只想在我的立方体内添加一些白色文本而没有任何背景颜色。
我看到了这个问题,但它看起来与我的问题无关:THREE.JS: Seeing geometry when inside mesh
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>
解决方案
发生这种情况的原因是,three.js 中的渲染分两个阶段进行。
首先呈现固体的东西......然后是透明的东西。
透明对象按它们与相机的距离排序。
所以通过设置你的 .transparent = true; 您正在使您的文本在第二遍期间被渲染,从而在其他几何图形之上渲染。
看看不屈不挠的西兰利的这个答案:
推荐阅读
- c# - 如何使用C#打乱句子中的单词并放入数组
- c++ - 编译器优化消除了错误共享的影响。如何?
- python - dis.dis(foo) 中字段的正式名称
- c# - CSharp 和 Golang 之间的 AES-CFB 实现不一致
- security - 创建一个从 Windows 系统到 Kali 机器的反向 shell - 其中一个是侦听器
- javascript - 无法捕获 Selenium NoSuchElementError (Javascript)
- php - 为什么不能用php将日期写入mysql?
- linux - 在 Linux 上连接和使用多个蓝牙加密狗?
- ionic-framework - ionicFramework 与 Xamarin.Forms
- python - How can I get the first letter from multiple words and * the remaining letters?