我有三个模型,我在three.js创建.基于一些数据,我想创建一组由小文本标签装饰的箭头.这些标签应为2D.
看起来我有两种选择:使用单独的canvas元素来创建纹理,然后在3D模型中使用它,或者在3D模型的canvas元素上使用HTML.
我想知道如何解决这个问题.这是"正确"的方法吗？任何建议和示例代码都非常欢迎!
对不起，如果这是一个菜鸟问题。
我一直在尝试使用动态生成的画布元素作为精灵为在three.js 中创建的时间线添加标签。时间线部分渲染得很好，但我很难让画布精灵渲染。这是我用于精灵的内容（从更大场景的上下文中取出）：
var canvas = document.createElement('canvas');
var size = 250;
canvas.width = size;
canvas.height = size;
var context = canvas.getContext('2d');
context.fillStyle = '#990000';
context.textAlign = 'center';
context.font = '24px Arial';
context.fillText("some text", size / 2, size / 2);
var amap = new THREE.Texture(canvas);
amap.needsUpdate = true;
var mat = new THREE.SpriteMaterial({
map: amap,
transparent: false,
useScreenCoordinates: false,
color: 0x000000
});
var sp = new THREE.Sprite(mat);
scene.add(sp);
您可以在此处查看更完整的示例代码集：http : //jsfiddle.net/rgE2j/2/。
任何帮助都表示赞赏。
谢谢，彼得
基本上,我所说的是我想创建一个出现在对象表面顶部/上面的标签或标签,这样当用户点击对象时标签总是面向摄像机,即使旋转对象也是如此.
我该怎么做呢？
我被告知使用正交相机(但我不确定如何？)和标签的CSS(参见上一篇文章:如何让我的文字标签始终面向相机？也许使用精灵？)
CSS和html中的标签如下.但是,我也想为几个对象做这个,所以我想在这种情况下我可以列出我想要的每个多维数据集的所有标签.
CSS:
label {
vertical-align: middle;
display: table-cell;
background-color : #99FFCC;
border: 1px solid #008000;
width: 150px;
}
HTML:
<div id="Cube1">
<label>Cube 1</label>
</div>
上一个代码:
<!DOCTYPE html>
<html lang="en">
<head>
<title>three.js canvas - interactive - cubes</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<style>
body {
font-family: Monospace;
background-color: #f0f0f0;
margin: 0px;
overflow: hidden;
}
</style>
</head>
<body>
<script src="js/three.min.js"></script>
<script src="js/stats.min.js"></script>
<script>
var container, stats;
var camera, scene, projector, renderer;
var …