three.js - 在立方体上写一个名字
问题描述
我可以在物体上写一个名字吗?说如果我有一个立方体几何,我可以在物体上写下我的名字。以及如何在后台添加文本名称。
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 );
var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
var geometry = new THREE.BoxGeometry( 1, 1, 1 );
var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
var cube = new THREE.Mesh( geometry, material );
scene.add( cube );
camera.position.z = 5;
var animate = function () {
requestAnimationFrame( animate );
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
renderer.render( scene, camera );
};
animate();
解决方案
您可以尝试使用以下three.js
示例中演示的方法:
https://threejs.org/examples/webgl_materials_texture_canvas
这个想法是使用THREE.CanvasTexture的一个实例。它是一种特殊类型的纹理,使用画布元素作为其数据源。如果您现在在此画布上绘制形状或文本,您将看到映射到盒子几何图形上的结果。由于您可以THREE.CanvasTexture
像使用所有其他纹理一样使用它,因此您也可以将其用作背景纹理。
推荐阅读
- phpstorm - 在 PhpStorm 打开“在路径中查找”对话框中,为我的自定义范围使用热键
- hibernate - 休眠验证器不适用于请求正文
- javascript - 无法在 javascript 中使用此闪光灯来停止使用 clearInterval 闪烁
- r - 从自定义部分编号部分(不是默认标题)
- image-processing - 如何使用高通滤波器初始化 CNN 输入层的核权重?
- python - 将变量函数名称传递给烧瓶中的 url_for
- ruby-on-rails - capistrano 不记录生产的信息输出
- html - 在图像旁边的 div 中对齐文本,但垂直居中
- node.js - Vue:v-for 不渲染(使用 Node 和 Axios)
- node.js - API 请求成功,但 axios 失败