Three.js を使用して形状を押し出すことにより、SVG パス (lineto および moveto) に 3D 感を与えようとしましたが、そのプロセスによって除去できないアーティファクトが発生します。
レンダリングした 3D 形状に奇妙なアーティファクトが生じる原因は何ですか? それらを削除する方法はありますか?
アーティファクトは、下のサンプル画像で矢印でマークされています。
実際の例はこちら: http://jsfiddle.net/pHn2B/24/
コードは次のとおりです。
// コールバックでピッキング // three.js r.52 varコンテナ、 情報、 カメラ、 シーン、 ライト、 幾何学、 メッシュ、 プロジェクター、 レンダラー、 コントロール; オブジェクト = []; // ドム コンテナ = document.createElement( 'div' ); document.body.appendChild(コンテナ); // 情報 info = document.createElement( 'div' ); info.style.position = '絶対'; info.style.top = '10px'; info.style.width = '100%'; info.style.textAlign = '中心'; info.innerHTML = "ドラッグしてカメラを回転、クリックして選択"; container.appendChild( 情報 ); // レンダラー 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( カメラ ); // コントロール コントロール = 新しい THREE.OrbitControls( カメラ ); // ライト scene.add( new THREE.AmbientLight( 0x222222 ) ); // ライト 光 = 新しい THREE.PointLight( 0xaaaaaa ); light.position = camera.position; scene.add(ライト); // ジオメトリ ジオメトリ = 新しい THREE.CubeGeometry( 100, 100, 500 ); // 素材 material = new THREE.MeshLambertMaterial( { color: 0xff0000,ambient: 0xff0000, overdraw: true } ); //メッシュ メッシュ = 新しい THREE.Mesh( ジオメトリ、マテリアル ); mesh.position.set( -100, -100, 200 ); mesh.name = "赤いオブジェクト"; mesh.callback = function() { info.innerHTML = this.name; } scene.add(メッシュ); objects.push( メッシュ ); // ジオメトリ //////////// // 習慣 // //////////// 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 ); var 押し出し設定 = { //サイズ: 1、高さ: 1、曲線セグメント: 100、ステップ = 10、 // フォント、太さ、スタイル、 金額:20、 bevelEnabled: 真、 bevelThickness: 0.5、 bevelSize: 0.5, bevelSegments: 8, // 押し出しパス: // 曲げパス: 材料: 0, 押し出し材料: 1 //、 //uvGenerator: BoundingUVGenerator //uvGenerator: THREE.ExtrudeGeometry.WorldUVGenerator }; var starGeometry = new THREE.ExtrudeGeometry( starShape、extrudeSettings ); var materialFront = new THREE.MeshLambertMaterial( { color: 0xffff00,ambient: 0xffff00, overdraw: false, transparent:false, opacity: 1.0, side: THREE.DoubleSide } ); var materialSide = new THREE.MeshLambertMaterial( { color: 0xff8800,ambient: 0xff8800, overdraw: false, transparent:false, opacity: 1.0, side: 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 = new THREE.MeshFaceMaterial(materialArray); var star = new THREE.Mesh( starGeometry, starMaterial ); star.position.set(-150,-150,0); シーン.追加(スター); /* // モデルにワイヤーフレームを追加 var wireframeTexture = new THREE.MeshBasicMaterial( { color: 0x000000, wireframe: true, transparent: false } ); var star = new THREE.Mesh( starGeometry, wireframeTexture ); star.position.set(50,10,0); シーン.追加(スター); */ objects.push( スター ); // プロジェクター プロジェクター = 新しい THREE.Projector(); // リスナー document.addEventListener( 'mousedown', onDocumentMouseDown, false) // キーボード ハンドラ 関数 onDocumentMouseDown( イベント ) { event.preventDefault(); var ベクトル = 新しい THREE.Vector3( ( event.clientX / window.innerWidth ) * 2 - 1, - ( event.clientY / window.innerHeight ) * 2 + 1, 0.5 ); プロジェクター.unprojectVector(ベクトル、カメラ); var ray = new THREE.Ray( camera.position, vector.subSelf( camera.position ).normalize() ); var 交差 = ray.intersectObjects( オブジェクト ); if (交差.長さ > 0) { 交差[0].object.callback(); } } // 与える 関数 render() { コントロール.update() renderer.render(シーン、カメラ); } // アニメーション化 (関数アニメーション() { requestAnimationFrame(アニメーション); 与える(); }());
テクスチャを追加してアーティファクトを削除しようとしましたが、テクスチャがまったく表示されません:
他の問題 (アーティファクトの問題に関連する場合と関連しない場合があります) は、エッジを通して背景が見えることです。
テクスチャは必須ではありませんが、アーティファクトの除去は必須です。
テクスチャを追加するために使用したコードは以下で、完全なコードはフィドルにあります (リンクはコードの後にあります)。
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 でも同様の現象が発生します。