三.js渲染普通几何体的白色部分
Three.js render white part of plain geometry
我正在尝试将这个plainGeometry
变成这个(一种掩码)。
这段代码有效:(总而言之,创建两种材料,将平面划分为段,并用MeshFaceMaterial
决定每种材料是哪种材料)
Button.onClick(function () {
var obj = editor.selected;
var material = obj.material;
var tex = material.map;
var objHeight = obj.geometry.parameters.height;
var objWidth = obj.geometry.parameters.width;
var texHeight = tex.image.height;
var texWidth = tex.image.width;
var geometry = new THREE.PlaneGeometry(objWidth, objHeight, objWidth, objHeight);
var facesNum = objHeight * objWidth * 2;
var facesX = objWidth * 2;
var facesInX = texWidth * 2;
var materials = [];
materials.push(material);
materials.push(new THREE.MeshBasicMaterial({ }));
for (var i = 0; i < facesNum; i++) {
if ((i % facesX >= objWidth - texWidth) &&
(i % facesX <= (facesInX + objWidth - texWidth - 1)) &&
(i <= (texHeight * objWidth * 2) - 1)) {
geometry.faces[i].materialIndex = 0;
}
else {
geometry.faces[i].materialIndex = 1;
}
}
obj.geometry = geometry;
obj.material = new THREE.MeshFaceMaterial(materials);
editor.signals.materialChanged.dispatch(obj);
});
但我想知道是否有更简单的方法。有什么建议吗?
另一种方法是在纹理上使用 Alpha 通道。 您可以使用 Gimp 或 Photoshop 执行此操作。
然后复制网格,并在材质上使用多边形偏移因子将其推出轴。 将背景材质应用于第一个网格,将具有 alpha 纹理的前景材质应用于第二个网格。看到这个小提琴阿尔法测试。(您可能需要禁用跨域访问安全性,以便纹理可以在此小提琴中加载,如果您使用 --disable-web-security 标志运行它,Chrome 将允许这样做)此方法的优点是图像可以是任何形状和位置,并且不需要适合几何面。
如果您使用的几何图形很复杂,另一种方法是使用 Three.DecalGeometry 切割出网格块,并在材质上用多边形偏移因子将其移动一点。为此,请参阅三.js贴花示例。
示例小提琴的来源如下:
var renderer;
var pointLight;
var scene;
var plane1;
var plane2;
function addPlane()
{
var material1 = new THREE.MeshPhongMaterial({ color: 0xFFFFFF });
var material2;
var loader = new THREE.TextureLoader();
loader.load('http://i.imgur.com/ETdl4De.png',
function ( texture ) {
var material2 = new THREE.MeshPhongMaterial({
color: 0xFFFFFF,
map: texture,
alphaTest: 0.7,
polygonOffset: true,
polygonOffsetFactor: - 4,
});
var geometry1 = new THREE.PlaneGeometry(12, 12, 12, 12);
var geometry2 = geometry1.clone();
plane1 = new THREE.Mesh(geometry1,material1);
plane2 = new THREE.Mesh(geometry2,material2);
scene.add(plane2);
scene.add(plane1);
}
);
}
(function() {
'use strict';
scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.01, 10000);
renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
addPlane();
camera.position.z = 52;
pointLight = new THREE.DirectionalLight(0xffffff,1);
pointLight.position.x = 11;
pointLight.position.y = 5;
pointLight.position.z = 25;
scene.add(pointLight);
var reqAnimFrame = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.msRequestAnimationFrame;
var render = function() {
reqAnimFrame(render);
renderer.render(scene, camera);
};
render();
}());
最终做到了:
var obj = editor.selected;
var tex = obj.material.map.;
var materials = [];
materials.push(new THREE.MeshBasicMaterial({ map: tex }));
materials.push(new THREE.MeshBasicMaterial({}));
var material = new THREE.MeshFaceMaterial(materials);
var objHeight = obj.geometry.parameters.height;
var objWidth = obj.geometry.parameters.width;
var texHeight = tex.image.height;
var texWidth = tex.image.width;
tex.repeat = new THREE.Vector2(3, 3);
tex.offset = new THREE.Vector2(0, 0);
var geometry = new THREE.PlaneGeometry(objWidth, objHeight, 3, 3);
var v = geometry.vertices;
var facesNum = geometry.faces.length;
v[1] = new THREE.Vector3(-texWidth / 2, objHeight / 2, 0);
v[2] = new THREE.Vector3(texWidth / 2, objHeight / 2, 0);
v[5] = new THREE.Vector3(-texWidth / 2, (objHeight / 2) - texHeight, 0);
v[6] = new THREE.Vector3(texWidth / 2, (objHeight / 2) - texHeight, 0);
v[9] = v[13];
v[10] = v[14];
v[4] = v[8] = v[12];
v[7] = v[11] = v[15];
for (var i = 0; i < facesNum; i++) {
if (i !== 2 && i !== 3) geometry.faces[i].materialIndex = 1;
}
obj.material = material;
obj.geometry = geometry;
editor.signals.materialChanged.dispatch(obj);
相关文章:
- 谷歌地图API-“;toGeoJson”;返回几何体为null的对象
- '返回'浏览器按钮返回白色页面
- 谷歌图表显示空白白色页面
- 添加/删除/更改输入文本的部分值
- 如何将Three.js场景中的几何体导出为已修改的OBJ
- PHP代理jQuery部分为javascript
- jQuery淡入淡出动画在两者之间显示白色
- 我是否可以在渲染过程中使用三.js合并每一帧中的几何体
- 控制立方体或其他几何体的每个面,分为三.js
- 三个JS框几何体,渲染警告:渲染计数或素数为0
- 脚本将页面变为白色
- 导入的JSON几何体不随骨骼移动
- Three.js(r75)-为什么是Three.几何体没有用于存储边的数组
- Ionic中的Added View显示为纯白色
- 使用jquery更改白色框的颜色
- Three.js-如何反序列化几何体.toJSON()?(几何体.fromJSON在哪里?)
- three.js无法在three.Points几何体中渲染法线
- 合并后的几何体;t渲染更新
- 设置var-from这个的部分类名
- 三.js渲染普通几何体的白色部分