diff --git a/public/js/webgl-book-shape-lab.js b/public/js/webgl-book-shape-lab.js index d15d1f3..441949a 100644 --- a/public/js/webgl-book-shape-lab.js +++ b/public/js/webgl-book-shape-lab.js @@ -247,8 +247,8 @@ function createClothSpineGeometry(depth, spineWidth) { }; profile.forEach((point) => { - front.push(push(point, depth * 0.5 + 0.012)); - back.push(push(point, -depth * 0.5 - 0.012)); + front.push(push(point, depth * 0.5 + 0.024)); + back.push(push(point, -depth * 0.5 - 0.024)); }); for (let i = 0; i < profile.length - 1; i += 1) { indices.push(front[i], back[i], front[i + 1]); @@ -280,7 +280,7 @@ function simulatePageLines(bundleCount, pageWidth, spineWidth) { const stepLength = pageWidth / segments; const entries = []; const spineSamples = sampleSpineByArc(bundleCount, spineWidth); - const leftLimit = Math.floor((bundleCount - 1) * readingProgress); + const leftLimit = Math.min(bundleCount - 2, Math.floor((bundleCount - 1) * readingProgress)); for (let index = 0; index < bundleCount; index += 1) { const t = spineSamples[index].t; const side = index <= leftLimit ? -1 : 1; @@ -687,13 +687,26 @@ function addSimulatedPageLines(lines, depth) { function addSimulatedStackBodies(lines, depth) { [-1, 1].forEach((side) => { const sideLines = lines.filter((line) => line.side === side); - if (sideLines.length < 2) return; + if (!sideLines.length) return; const material = side < 0 ? materials.pagesLeft : materials.pagesRight; - book.add(new THREE.Mesh(createLoftedLineBody(sideLines, depth), material)); - book.add(new THREE.Line(createEndpointPolyline(sideLines, depth), new THREE.LineBasicMaterial({ color: 0xb99a68, transparent: true, opacity: 0.62 }))); + const bodyLines = sideLines.length === 1 ? createSinglePageBodyLines(sideLines[0]) : sideLines; + book.add(new THREE.Mesh(createLoftedLineBody(bodyLines, depth), material)); + book.add(new THREE.Line(createEndpointPolyline(bodyLines, depth), new THREE.LineBasicMaterial({ color: 0xb99a68, transparent: true, opacity: 0.62 }))); }); } +function createSinglePageBodyLines(line) { + const bundleCount = Math.max(4, Math.round(pageCount / 10)); + const supportPoints = line.points.map((point) => ({ + x: point.x, + y: Math.max(coverTopYAtX(point.x) + coverClearance(bundleCount), point.y - BOOK_PROFILE.bundleSpacing) + })); + return [ + { ...line, points: supportPoints, endpoint: supportPoints[supportPoints.length - 1] }, + line + ]; +} + function createLoftedLineBody(lines, depth) { const positions = []; const indices = [];