three.js - three.js中奇特的工件和挤压形状中的空纹理

Question

我试图通过使用Three.js挤压形状来给SVG路径（lineto和moveto）3D感觉，但是该过程会导致一些我无法删除的瑕疵。

什么会导致渲染的3D形状出现奇异的伪像？有没有办法删除它们？

这些伪像在下面的示例图像中用箭头标记。



现场示例在这里：
http://jsfiddle.net/pHn2B/24/

代码在这里：

//通过回调选择

// three.js r.52
var容器，
信息，
相机，
现场，
光，
几何，
网格
投影仪
渲染器
控制；
对象= [];

// dom
container = document.createElement（'div'）;
document.body.appendChild（container）;

//资讯
信息= document.createElement（'div'）;
info.style.position ='绝对';
info.style.top ='10px';
info.style.width ='100％';
info.style.textAlign ='中心';
info.innerHTML =“拖动以旋转相机；单击以选择”；
container.appendChild（info）;

//渲染器
renderer = new THREE.CanvasRenderer（）;
renderer.setSize（window.innerWidth，window.innerHeight）;
container.appendChild（renderer.domElement）;

//场景
场景=新的THREE.Scene（）;

//相机
camera = new THREE.PerspectiveCamera（45，window.innerWidth / window.innerHeight，1，10000）;
camera.position.set（0，300，500）;
scene.add（camera）;

//控件
控件=新的THREE.OrbitControls（camera）;

//轻
scene.add（新的THREE.AmbientLight（0x222222））;

//轻
light =新的THREE.PointLight（0xaaaaaa）;
light.position =摄影机位置；
scene.add（light）;

//几何
geometry = new THREE.CubeGeometry（100，100，500）;

//材质
材质=新的THREE.MeshLambertMaterial（{颜色：0xff0000，环境：0xff0000，透支：true}）;

//网格
mesh = new THREE.Mesh（geometry，material）;
mesh.position.set（-100，-100，200）;
mesh.name =“红色物体”;
mesh.callback = function（）{info.innerHTML = this.name; }
scene.add（mesh）;

objects.push（mesh）;

//几何
////////////
//自定义//
////////////

var starPoints2 =新的THREE.Shape（）;

starPoints2.moveTo（307.94,275.49）;
starPoints2.lineTo（296.26,275.23）;
starPoints2.lineTo（286.64,272.99）;
starPoints2.lineTo（279.78,269.31）;
starPoints2.lineTo（274.14,263.55）;
starPoints2.lineTo（271.65,260.21）;
starPoints2.lineTo（269.2,261.06）;
starPoints2.lineTo（254.83,268.51）;
starPoints2.lineTo（242.11,272.97）;
starPoints2.lineTo（227.59,275.23）;
starPoints2.lineTo（209.91,275.48）;
starPoints2.lineTo（197.47,273.63）;
starPoints2.lineTo（187.91,270.13）;
starPoints2.lineTo（180.48,265.09）;
starPoints2.lineTo（175.32,258.88）;
starPoints2.lineTo（172.2,251.44）;
starPoints2.lineTo（171.1,242.23）;
starPoints2.lineTo（172.24,233.63）;
starPoints2.lineTo（175.49,226.24）;
starPoints2.lineTo（181,219.54）;
starPoints2.lineTo（189.42,213.3）;
starPoints2.lineTo（201.36,207.73）;
starPoints2.lineTo（217.23,203.25）;
starPoints2.lineTo（238.28,200.1）;
starPoints2.lineTo（269.37,198.47）;
starPoints2.lineTo（269.98,182.93）;
starPoints2.lineTo（268.74,171.32）;
starPoints2.lineTo（266.05,163.7）;
starPoints2.lineTo（261.58,157.72）;
starPoints2.lineTo（255.24,153.24）;
starPoints2.lineTo（247.06,150.32）;
starPoints2.lineTo（235.44,149.13）;
starPoints2.lineTo（224.71,150.05）;
starPoints2.lineTo（215.91,153）;
starPoints2.lineTo（210.23,156.86）;
starPoints2.lineTo（207.64,160.85）;
starPoints2.lineTo（207.19,165.28）;
starPoints2.lineTo（209.34,169.86）;
starPoints2.lineTo（212.01,174.15）;
starPoints2.lineTo（212.14,177.99）;
starPoints2.lineTo（209.8,181.78）;
starPoints2.lineTo（204.22,185.79）;
starPoints2.lineTo（197.62,187.68）;
starPoints2.lineTo（188.65,187.43）;
starPoints2.lineTo（182.41,185.39）;
starPoints2.lineTo（178.45,181.77）;
starPoints2.lineTo（176.2,176.9）;
starPoints2.lineTo（176.03,170.64）;
starPoints2.lineTo（178.2,164.13）;
starPoints2.lineTo（183.09,157.69）;
starPoints2.lineTo（191.04,151.36）;
starPoints2.lineTo（202.01,145.82）;
starPoints2.lineTo（216.09,141.57）;
starPoints2.lineTo（232.08,139.24）;
starPoints2.lineTo（250.07,139.18）;
starPoints2.lineTo（266.13,141.23）;
starPoints2.lineTo（279.05,145.06）;
starPoints2.lineTo（289.15,150.3）;
starPoints2.lineTo（295.91,156.19）;
starPoints2.lineTo（300.73,163.41）;
starPoints2.lineTo（303.85,172.47）;
starPoints2.lineTo（305.07,183.78）;
starPoints2.lineTo（305.07,241.97）;
starPoints2.lineTo（306,251.51）;
starPoints2.lineTo（308.18,256.39）;
starPoints2.lineTo（311.72,259.09）;
starPoints2.lineTo（317.31,260.01）;
starPoints2.lineTo（324.71,259.01）;
starPoints2.lineTo（332.45,255.86）;
starPoints2.lineTo（335.57,257.53）;
starPoints2.lineTo（337.6,260.44）;
starPoints2.lineTo（336.94,262.33）;
starPoints2.lineTo（328.27,268.74）;
starPoints2.lineTo（317.89,273.41）;
starPoints2.lineTo（307.94,275.49）;
/ *
starPoints2.moveTo（245.79,125.33）;
starPoints2.lineTo（232.93,124.53）;
starPoints2.lineTo（222.21,121.74）;
starPoints2.lineTo（213.14,117.11）;
starPoints2.lineTo（207.36,111.92）;
starPoints2.lineTo（203.7,105.75）;
starPoints2.lineTo（201.94,98.18）;
starPoints2.lineTo（202.34,90.12）;
starPoints2.lineTo（204.86,83.4）;
starPoints2.lineTo（210.01,76.81）;
starPoints2.lineTo（217.49,71.33）;
starPoints2.lineTo（227.17,67.31）;
starPoints2.lineTo（238.35,65.2）;
starPoints2.lineTo（243.99,64.95）;
starPoints2.lineTo（255.92,66.06）;
starPoints2.lineTo（266.21,69.28）;
starPoints2.lineTo（274.98,74.44）;
starPoints2.lineTo（280.64,80.19）;
starPoints2.lineTo（284.02,86.85）;
starPoints2.lineTo（285.26,94.52）;
starPoints2.lineTo（284.27,102.84）;
starPoints2.lineTo（281.24,109.66）;
starPoints2.lineTo（276.03,115.43）;
starPoints2.lineTo（267.89,120.46）;
starPoints2.lineTo（257.68,123.93）;
starPoints2.lineTo（245.79,125.33）;
* /
var smileyEye1Path =新的THREE.Path（）;

smileyEye1Path.moveTo（221.69,258.13）;
smileyEye1Path.lineTo（215.2,255.08）;
smileyEye1Path.lineTo（210.86,250.57）;
smileyEye1Path.lineTo（208.4,244.49）;
smileyEye1Path.lineTo（207.92,237.03）;
smileyEye1Path.lineTo（209.69,230.71）;
smileyEye1Path.lineTo（213.82,224.85）;
smileyEye1Path.lineTo（220.9,219.34）;
smileyEye1Path.lineTo（230.95,214.67）;
smileyEye1Path.lineTo（245.76,210.86）;
smileyEye1Path.lineTo（266.59,208.36）;
smileyEye1Path.lineTo（269.48,208.76）;
smileyEye1Path.lineTo（269.99,212.88）;
smileyEye1Path.lineTo（269.99,244.81）;
smileyEye1Path.lineTo（269.34,247.02）;
smileyEye1Path.lineTo（266.07,250.04）;
smileyEye1Path.lineTo（255.27,255.23）;
smileyEye1Path.lineTo（242.52,258.58）;
smileyEye1Path.lineTo（230.57,259.43）;
smileyEye1Path.lineTo（221.69,258.13）;

/ *
smileyEye1Path.moveTo（238.44,116.65）;
smileyEye1Path.lineTo（231.99,114.29）;
smileyEye1Path.lineTo（227.23,110.22）;
smileyEye1Path.lineTo（223.94,104.53）;
smileyEye1Path.lineTo（222.41,96.92）;
smileyEye1Path.lineTo（223.05,88.57）;
smileyEye1Path.lineTo（225.65,82.21）;
smileyEye1Path.lineTo（230.07,77.36）;
smileyEye1Path.lineTo（235.93,74.4）;
smileyEye1Path.lineTo（243.68,73.34）;
smileyEye1Path.lineTo（246.08,73.43）;
smileyEye1Path.lineTo（253.37,75.08）;
smileyEye1Path.lineTo（258.65,78.43）;
smileyEye1Path.lineTo（262.47,83.41）;
smileyEye1Path.lineTo（264.59,90.25）;
smileyEye1Path.lineTo（264.64,98.93）;
smileyEye1Path.lineTo（262.63,106.12）;
smileyEye1Path.lineTo（258.87,111.5）;
smileyEye1Path.lineTo（253.73,115.1）;
smileyEye1Path.lineTo（246.81,116.94）;
smileyEye1Path.lineTo（238.44,116.65）;
* /
var starShape = starPoints2;

starShape.holes.push（smileyEye1Path）;

vartrusionSettings = {
//大小：1，高度：1，曲线段：100，步长= 10，
//字体，粗细，样式，
数量：20，
bevelEnabled：是的，
斜角厚度：0.5，
斜面尺寸：0.5，
斜角段：8，
// extrudePath：
// bendPath：
材料：0
挤出材料：1
//，
// uvGenerator：绑定UVGenerator
//uvGenerator：THREE.ExtrudeGeometry.WorldUVGenerator
};

var starGeometry =新的THREE.ExtrudeGeometry（starShape，trusionSettings）;

var materialFront = new THREE.MeshLambertMaterial（{颜色：0xffff00，环境：0xffff00，透支：false，透明：false，不透明度：1.0，侧面：THREE.DoubleSide}）;
var materialSide =新的THREE.MeshLambertMaterial（{颜色：0xff8800，环境：0xff8800，透支：false，透明：false，不透明度：1.0，侧面：THREE.DoubleSide}）;

// var crateTexture = new THREE.ImageUtils.loadTexture（'http://www.kahkonen.com/asiakkaat/crate2.gif'）;
// var crateTexture = new THREE.ImageUtils.generateDataTexture（10,10，{r：255，g：0，b：0}）;

// var materialFront = new THREE.MeshBasicMaterial（{map：crateTexture}）;

var materialArray = [materialFront，materialSide];
var materialArray = [materialFront，materialSide];

var starMaterial =新的THREE.MeshFaceMaterial（materialArray）;

var star = new THREE.Mesh（starGeometry，starMaterial）;

star.position.set（-150，-150,0）;
scene.add（star）;
/ *
//为模型添加线框
var wireframeTexture = new THREE.MeshBasicMaterial（{color：0x000000，wireframe：true，transparent：false}）;
var star = new THREE.Mesh（starGeometry，wireframeTexture）;
star.position.set（50,10,0）;
scene.add（star）;
* /
objects.push（star）;

//投影仪
投影仪=新的THREE.Projector（）;

//听众
document.addEventListener（'mousedown'，onDocumentMouseDown，false）

//键盘处理程序
函数onDocumentMouseDown（event）{

event.preventDefault（）;

var vector = new THREE.Vector3（
（event.clientX / window.innerWidth）* 2-1
-（event.clientY / window.innerHeight）* 2 + 1，
0.5）;

projection.unprojectVector（vector，camera）;

var ray = new THREE.Ray（camera.position，vector.subSelf（camera.position）.normalize（））;

var intersects = ray.intersectObjects（objects）;

if（intersects.length> 0）{

相交[0] .object.callback（）;

}

}

//渲染
函数render（）{

controls.update（）

renderer.render（场景，相机）;
}

//动画
（函数animate（）{

requestAnimationFrame（animate）;
render（）;
}（））;


我试图通过附加纹理来消除伪影，但是纹理根本没有显示：



其他问题（可能与或可能与伪影问题无关）是可以通过边缘看到背景。

纹理不是必须的，但是去除伪影是必须的。

下面是我用来添加纹理的代码，小提琴中有完整的代码（链接在代码后面）：


var crateTexture = new THREE.ImageUtils.loadTexture( 'http://www.kahkonen.com/asiakkaat/crate.gif');
var crateTexture = new THREE.ImageUtils.generateDataTexture(10,10,{r:255,g:0,b:0});
var materialFront = new THREE.MeshBasicMaterial( { map: crateTexture } );

// http://jsfiddle.net/pHn2B/27/


样本图片来自Chrome。 Firefox中也会发生相同的行为。

Answer 1

这是由z缓冲问题引起的CanvasRenderer的已知限制。具有许多细长面的几何形状会使情况更糟。使用WebGLRenderer可以正确渲染模型。

ExtrudeGeometry最初是为文本编写的，如果您查看它生成的UV，它仅使用UV顶点位置的x和y分量，在您的情况下，它们会产生超出[0]范围的值，1]。您可以选择在回调函数中提供自己的UV生成器。

确保首先可以成功将纹理添加到多维数据集。

three.js r.58