个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
26
4
是否可以将纹理加载到 PlaneGeometry 对象的特定面？我想要做的是将单独的纹理映射到 PlaneGeometry 对象的特定 2 个三 Angular 形。
这里有一些例子，用一些颜色给 PlaneGeometry 对象的每 2 个三 Angular 形上色并且它有效:
<!DOCTYPE html>
<html lang="en">
<head>
<title>title</title>
<meta charset="utf-8">
<style>
body {
font-family: Monospace;
background-color: #f0f0f0;
margin: 0px;
overflow: hidden;
}
</style>
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/87/three.min.js"></script>
<script>
var camera, scene, renderer, geometry, material, mesh;
init();
animate();
function init() {
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 1, 10000);
camera.position.z = 500;
scene.add(camera);
// geometry
var thumbnail_width = 32;
var thumbnail_height = 32;
var width_segments = 10;
var height_segments = 10;
var plane_geometry_width = width_segments * thumbnail_width;
var plane_geometry_height = height_segments * thumbnail_height;
var geometry = new THREE.PlaneGeometry(plane_geometry_width, plane_geometry_height, width_segments, height_segments); // faces.length = widthSegments*heightSegments*2
//Draw grid with static colors
// materials
var materials = [];
materials.push(new THREE.MeshBasicMaterial({
color: 0xff0000, side:THREE.DoubleSide
}));
materials.push(new THREE.MeshBasicMaterial({
color: 0x00ff00, side:THREE.DoubleSide
}));
materials.push(new THREE.MeshBasicMaterial({
color: 0x0000ff, side:THREE.DoubleSide
}));
// Add materialIndex to face
var l = geometry.faces.length / 2;
for (var i = 0; i < l; i++) {
var j = 2 * i;
geometry.faces[j].materialIndex = i % 3;
geometry.faces[j + 1].materialIndex = i % 3;
}
// mesh
mesh = new THREE.Mesh(geometry, materials);
scene.add(mesh);
// WebGL renderer
renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
}
function animate() {
requestAnimationFrame(animate);
render();
}
function render() {
renderer.render(scene, camera);
}
</script>
</body>结果如下: 
但是，当我尝试以相同方式映射纹理时，它映射到所有三 Angular 形，这不是我想要的:
<!DOCTYPE html>
<html lang="en">
<head>
<title>title</title>
<meta charset="utf-8">
<style>
body {
font-family: Monospace;
background-color: #f0f0f0;
margin: 0px;
overflow: hidden;
}
</style>
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/87/three.min.js"></script>
<script>
var camera, scene, renderer, geometry, material, mesh;
init();
animate();
function init() {
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 1, 10000);
camera.position.z = 500;
scene.add(camera);
// geometry
var thumbnail_width = 32;
var thumbnail_height = 32;
var width_segments = 10;
var height_segments = 10;
var plane_geometry_width = width_segments * thumbnail_width;
var plane_geometry_height = height_segments * thumbnail_height;
var geometry = new THREE.PlaneGeometry(plane_geometry_width, plane_geometry_height, width_segments, height_segments); // faces.length = widthSegments*heightSegments*2
var texture = new THREE.TextureLoader().load("image_small/item_1.png")
var materials = [];
materials.push(new THREE.MeshBasicMaterial({map : texture, side: THREE.DoubleSide}));
materials.push(new THREE.MeshBasicMaterial({color: 0xff0000, side:THREE.DoubleSide}));
materials.push(new THREE.MeshBasicMaterial({color: 0x00ff00, side:THREE.DoubleSide}));
// Add materialIndex to face
var l = geometry.faces.length / 2;
for (var i = 0; i < l; i++) {
var j = 2 * i;
geometry.faces[j].materialIndex = i % 3;
geometry.faces[j + 1].materialIndex = i % 3;
}
// mesh
mesh = new THREE.Mesh(geometry, materials);
scene.add(mesh);
// WebGL renderer
renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
}
function animate() {
requestAnimationFrame(animate);
render();
}
function render() {
renderer.render(scene, camera);
}
</script>
</body>结果如下: 
更新:
@WestLangley 建议的第二种解决方案的部分代码
var texture = new THREE.TextureLoader().load("image_small/item_1.png")
texture.wrapS = texture.wrapT = THREE.RepeatWrapping;
texture.repeat.set( 10, 10 );
var materials = [];
materials.push(new THREE.MeshBasicMaterial({map : texture, side: THREE.DoubleSide}));
materials.push(new THREE.MeshBasicMaterial({color: 0xff0000, side:THREE.DoubleSide}));
materials.push(new THREE.MeshBasicMaterial({color: 0x00ff00, side:THREE.DoubleSide}));
// Add materialIndex to face
var l = geometry.faces.length / 2;
for (var i = 0; i < l; i++) {
var j = 2 * i;
geometry.faces[j].materialIndex = i % 3;
geometry.faces[j + 1].materialIndex = i % 3;
}
geometry.sortFacesByMaterialIndex();
// Mesh
mesh = new THREE.Mesh(geometry, materials);
scene.add(mesh);
// WebGL renderer
renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
结果: 
更新 2:
var texture = new THREE.TextureLoader().load("image_small/item_1.png")
texture.flipY = true
var materials = [];
materials.push(new THREE.MeshBasicMaterial({map : texture, side: THREE.DoubleSide}));
for (var i = 0; i < geometry.faces.length; i++) {
geometry.faces[i].materialIndex = 0;
}
var uvs = geometry.faceVertexUvs[ 0 ]; // widthSegments*heightSegments*2
//UV
// (0,1) (1,1)
// (0,0) (1,0)
// For THREE.PlaneGeometry, UV ( 0, 0 ) is located at the bottom left, and ( 1, 1 ) the top right.
for (var i = 0; i < uvs.length; i++) {
if(i % 2 == 0)
{
// (0,1)[2] x
// (0,0)[1] (1,0)[3]
uvs[i][0].x = 0.0;
uvs[i][0].y = 0.0;
uvs[i][1].x = 0.0;
uvs[i][1].y = 1.0;
uvs[i][2].x = 1.0;
uvs[i][2].y = 0.0;
}
else
{
// (0,1)[1] (1,1)[2]
// x (1,0)[3]
uvs[i][0].x = 0.0;
uvs[i][0].y = 1.0;
uvs[i][1].x = 1.0;
uvs[i][1].y = 1.0;
uvs[i][2].x = 1.0;
uvs[i][2].y = 0.0;
}
}
var mesh = new THREE.Mesh(geometry, materials);
scene.add(mesh);
// WebGL renderer
renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
结果: 
最佳答案
你有两个选择。
一种是更改几何体的 UV，使每个正方形的 UV 范围从 ( 0, 0 ) 左下角到 ( 1, 1 ) 右上角。
另一个解决方案是设置纹理的repeat:
texture.wrapS = texture.wrapT = THREE.RepeatWrapping;
texture.repeat.set( 10, 10 );
顺便说一句，在控制台中输入 renderer.info，您会看到生成了 100 个绘制调用。
设置 Material 索引后，将以下内容添加到您的代码中:
geometry.sortFacesByMaterialIndex();
您现在应该只看到 3 个绘制调用。
three.js r.89
关于javascript - 三个 : PlaneGeometry load texture to specific faces，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48385258/
26
4
0
大家好，我正在使用 OpenCV(Python)开发人脸识别程序。我有两个文件，一个可以捕捉新用户的脸并按用户提供的名称存储它。第二个文件识别使用网络摄像头的用户。现在，我担心的是用户被正确识别，但名
一般来说，我的字体工作正常，但我偶尔会看到一些奇怪的情况，例如从另一个应用程序切换回浏览器，有时当从另一个选项卡切换回时，我的字体似乎已经卸载并正在使用后备字体。 我正在努力始终如一地复制它，当我看到
我经常在我开发的网站中嵌入 webfont (@font-face)，直到今天我才遇到过重大问题。 其实我觉得line-height有很大的问题，我英文不是特别好所以我尽量用图来说明。我已经联系了 f
屏幕截图很棒，但没有呈现自定义 @font-face 字体。是否有可能纠正这一点？ 最佳答案 在做了一些研究之后，我发现了这个 http://code.google.com/p/phantomjs/i
所以我有一个字体，我最近在几个网站上使用了它，叫做 Kondolar。这是一种可爱的字体，我实际上使用了 4 种字体粗细，所以在我的样式表中实际上有 4 个 @font-face 定义，每个定义都有自
非常感谢:)请找到完整的代码 导入boto3 s3_client = boto3.client('s3', aws_access_key_id='xxxxxxxxxxxxxxx', aws_secre
这不是以下的骗局:Can we test Face ID in simulator? 我想知道如何测试用户何时接受下面的 Face ID 警告，上面写着“你想允许“应用程序”使用 Face ID”，然
我需要检测 iPhone 朝向哪个方向，以便在掉落时从无障碍摄像头(正面或背面)进行录制。 这将在紧急情况下使用，手机掉落或放置在事件摄像头没有记录任何有值(value)内容的情况下。 我可以使用什么
我有一个需要 Trade Gothic 的网站。我想知道将 @font-face 或 cufon 与看起来类似于 Trade Gothic 的字体一起使用还是只是使用图像路线是更好的做法。显然，使用图
我在使用 Microsoft Face API 时遇到问题。以下是我的示例请求: curl -v -X POST "https://westus.api.cognitive.microsoft.com
我有一个在图像上运行并识别人脸并返回如下列表的脚本: [('Mike', (142, 464, 365, 241)),('Garry', (42, 364, 65, 141)),('unknown',
我有一个网络服务，可以重写 css 文件中的 url，以便可以通过 CDN 提供它们。 css 文件可以包含图像或字体的 url。 我目前有以下正则表达式来匹配 css 文件中的所有 url: (ur
我在乱用 @font-face 并且得到了一些奇怪的结果。我下载并安装了字体，它像它应该的那样安装在/Users/myuser/Library/Fonts 中(我想!？)。奇怪的是，无论我在 CSS
JSF 2 的 Mojarra 实现具有以下上下文参数: com.sun.faces.numberOfViewsInSession(默认为 15) com.sun.faces.numberOfLogi
jsf-api.jar 包含各种本地化的 Messages.properties 文件，这些文件一方面包含 javax.faces.component.UIInput.CONVERSION 键，另一方
谁能介绍一下 Liferay Faces 和 JSF 连接。就像我无法理解 Liferay 人脸在以下场景中的作用。 JSF ----> Model View Controller Spr
我正在尝试使用我的字体的“较轻”版本，但在 firefox 和 chrome 中它仍然显示为“正常”粗细。 这是我的 font.css: @font-face { font-family: Aveni
尝试访问应用程序时出现以下JavaScript错误。 Uncaught SyntaxError: Unexpected token 和的正常运行是必需的)。 您可能已经知道HTML文档通常通常以<和J
在我的应用程序中，我想对 UIImage 使用人脸检测，所以我使用库中的 CoreImage 构建(我知道 Vision Library 也是最新的人脸检测库。但它仅支持 ios 11.0 及以上)。
我需要从 Stylus 获得以下 CSS 输出(这是一种落后的方式，但 Stylus 将使该元素的许多其他部分变得更容易)。我已经尝试了很多东西，但无法编译，当它说它已经编译时，这部分输出没有任何显示
我是一名优秀的程序员,十分优秀！