mirror of
https://github.com/CNCKitchen/stlTexturizer.git
synced 2026-04-07 22:11:32 +00:00
Refactor mapping modes and improve UV mapping logic; update viewer axes and camera settings
This commit is contained in:
CNCKitchen
+81
-28
@@ -28,7 +28,6 @@ export function applyDisplacement(geometry, imageData, imgWidth, imgHeight, sett
|
||||
|
||||
const tmpPos = new THREE.Vector3();
|
||||
const tmpNrm = new THREE.Vector3();
|
||||
// Reusable vectors for per-face normal computation
|
||||
const vA = new THREE.Vector3();
|
||||
const vB = new THREE.Vector3();
|
||||
const vC = new THREE.Vector3();
|
||||
@@ -36,34 +35,72 @@ export function applyDisplacement(geometry, imageData, imgWidth, imgHeight, sett
|
||||
const edge2 = new THREE.Vector3();
|
||||
const faceNrm = new THREE.Vector3();
|
||||
|
||||
const REPORT_EVERY = 5000;
|
||||
const QUANT = 1e4;
|
||||
const posKey = (x, y, z) =>
|
||||
`${Math.round(x * QUANT)}_${Math.round(y * QUANT)}_${Math.round(z * QUANT)}`;
|
||||
|
||||
// ── WHY GAPS HAPPEN ───────────────────────────────────────────────────────
|
||||
// The mesh is non-indexed (unrolled): every triangle has its own copy of
|
||||
// each vertex. At a shared edge two triangles have the same position but
|
||||
// different face normals. Displacing each copy along its own face normal
|
||||
// moves them to DIFFERENT final positions → crack / gap.
|
||||
//
|
||||
// THE FIX: every copy of the same position must arrive at the exact same
|
||||
// displaced point. We achieve this by computing a single *smooth* (area-
|
||||
// weighted average) normal per unique position and using that both for the
|
||||
// texture UV lookup and for the displacement direction. All copies of the
|
||||
// same position then move by the same vector → watertight result.
|
||||
//
|
||||
// The tradeoff is that displaced normals are smooth at hard edges, but the
|
||||
// underlying geometry is still faceted (the subdivision didn't change it),
|
||||
// so printed edges remain sharp.
|
||||
|
||||
// ── Pass 1: accumulate area-weighted face normals per unique position ─────
|
||||
// Map: posKey → { nx, ny, nz } (unnormalised sum)
|
||||
const smoothNrmMap = new Map();
|
||||
|
||||
for (let t = 0; t < count; t += 3) {
|
||||
vA.fromBufferAttribute(posAttr, t);
|
||||
vB.fromBufferAttribute(posAttr, t + 1);
|
||||
vC.fromBufferAttribute(posAttr, t + 2);
|
||||
edge1.subVectors(vB, vA);
|
||||
edge2.subVectors(vC, vA);
|
||||
faceNrm.crossVectors(edge1, edge2); // length = 2× triangle area → natural area weighting
|
||||
|
||||
for (let v = 0; v < 3; v++) {
|
||||
tmpPos.fromBufferAttribute(posAttr, t + v);
|
||||
const k = posKey(tmpPos.x, tmpPos.y, tmpPos.z);
|
||||
const existing = smoothNrmMap.get(k);
|
||||
if (existing) {
|
||||
existing[0] += faceNrm.x;
|
||||
existing[1] += faceNrm.y;
|
||||
existing[2] += faceNrm.z;
|
||||
} else {
|
||||
smoothNrmMap.set(k, [faceNrm.x, faceNrm.y, faceNrm.z]);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Normalise each accumulated normal
|
||||
smoothNrmMap.forEach((n) => {
|
||||
const len = Math.sqrt(n[0]*n[0] + n[1]*n[1] + n[2]*n[2]) || 1;
|
||||
n[0] /= len; n[1] /= len; n[2] /= len;
|
||||
});
|
||||
|
||||
// ── Pass 2: sample displacement texture once per unique position ──────────
|
||||
const dispCache = new Map(); // posKey → grey [0, 1]
|
||||
|
||||
for (let i = 0; i < count; i++) {
|
||||
tmpPos.fromBufferAttribute(posAttr, i);
|
||||
tmpNrm.fromBufferAttribute(nrmAttr, i);
|
||||
const k = posKey(tmpPos.x, tmpPos.y, tmpPos.z);
|
||||
if (dispCache.has(k)) continue;
|
||||
|
||||
// Compute a stable face normal from the triangle's own vertex positions.
|
||||
// The subdivider deduplicates vertices by position only, so shared corner
|
||||
// vertices pick up whichever face's normal happened to be stored first.
|
||||
// For hard-edged meshes (e.g. a cube) this corrupts the stored normals at
|
||||
// edges/corners. Recomputing from the triangle geometry is always correct
|
||||
// for the flat-shaded STL source data and gives the right normal for both
|
||||
// displacement direction and UV projection.
|
||||
const base = Math.floor(i / 3) * 3;
|
||||
vA.fromBufferAttribute(posAttr, base);
|
||||
vB.fromBufferAttribute(posAttr, base + 1);
|
||||
vC.fromBufferAttribute(posAttr, base + 2);
|
||||
edge1.subVectors(vB, vA);
|
||||
edge2.subVectors(vC, vA);
|
||||
faceNrm.crossVectors(edge1, edge2);
|
||||
// Fall back to the stored vertex normal for degenerate triangles
|
||||
const useNrm = faceNrm.lengthSq() > 1e-10 ? faceNrm.normalize() : tmpNrm;
|
||||
|
||||
const uvResult = computeUV(tmpPos, useNrm, settings.mappingMode, settings, bounds);
|
||||
const sn = smoothNrmMap.get(k);
|
||||
tmpNrm.set(sn[0], sn[1], sn[2]);
|
||||
|
||||
const uvResult = computeUV(tmpPos, tmpNrm, settings.mappingMode, settings, bounds);
|
||||
let grey;
|
||||
if (uvResult.triplanar) {
|
||||
// Weighted blend of three samples
|
||||
grey = 0;
|
||||
for (const s of uvResult.samples) {
|
||||
grey += sampleBilinear(imageData.data, imgWidth, imgHeight, s.u, s.v) * s.w;
|
||||
@@ -71,16 +108,32 @@ export function applyDisplacement(geometry, imageData, imgWidth, imgHeight, sett
|
||||
} else {
|
||||
grey = sampleBilinear(imageData.data, imgWidth, imgHeight, uvResult.u, uvResult.v);
|
||||
}
|
||||
dispCache.set(k, grey);
|
||||
}
|
||||
|
||||
// ── Pass 3: displace every vertex copy by the same vector ─────────────────
|
||||
// Using the smooth normal for the displacement direction ensures all copies
|
||||
// of the same position land at exactly the same 3-D point.
|
||||
|
||||
const REPORT_EVERY = 5000;
|
||||
|
||||
for (let i = 0; i < count; i++) {
|
||||
tmpPos.fromBufferAttribute(posAttr, i);
|
||||
tmpNrm.fromBufferAttribute(nrmAttr, i);
|
||||
|
||||
const k = posKey(tmpPos.x, tmpPos.y, tmpPos.z);
|
||||
const sn = smoothNrmMap.get(k);
|
||||
const grey = dispCache.get(k);
|
||||
const disp = grey * settings.amplitude;
|
||||
|
||||
newPos[i*3] = tmpPos.x + useNrm.x * disp;
|
||||
newPos[i*3+1] = tmpPos.y + useNrm.y * disp;
|
||||
newPos[i*3+2] = tmpPos.z + useNrm.z * disp;
|
||||
newPos[i*3] = tmpPos.x + sn[0] * disp;
|
||||
newPos[i*3+1] = tmpPos.y + sn[1] * disp;
|
||||
newPos[i*3+2] = tmpPos.z + sn[2] * disp;
|
||||
|
||||
newNrm[i*3] = useNrm.x;
|
||||
newNrm[i*3+1] = useNrm.y;
|
||||
newNrm[i*3+2] = useNrm.z;
|
||||
// Keep per-face normal for shading (recomputed below anyway)
|
||||
newNrm[i*3] = tmpNrm.x;
|
||||
newNrm[i*3+1] = tmpNrm.y;
|
||||
newNrm[i*3+2] = tmpNrm.z;
|
||||
|
||||
if (onProgress && i % REPORT_EVERY === 0) onProgress(i / count);
|
||||
}
|
||||
|
||||
+11
-1
@@ -15,7 +15,7 @@ let previewMaterial = null;
|
||||
let isExporting = false;
|
||||
|
||||
const settings = {
|
||||
mappingMode: 5, // Triplanar default — covers all faces of any shape
|
||||
mappingMode: 6, // Cubic default
|
||||
scaleU: 1.0,
|
||||
scaleV: 1.0,
|
||||
amplitude: 0.5,
|
||||
@@ -228,6 +228,16 @@ async function handleSTL(file) {
|
||||
previewMaterial = null;
|
||||
}
|
||||
|
||||
// Auto-select Brick preset (index 5) on first load
|
||||
const brickIdx = PRESETS.findIndex(p => p.name === 'Brick');
|
||||
if (brickIdx >= 0 && !activeMapEntry) {
|
||||
activeMapEntry = PRESETS[brickIdx];
|
||||
activeMapName.textContent = PRESETS[brickIdx].name;
|
||||
const swatches = document.querySelectorAll('.preset-swatch');
|
||||
swatches.forEach((s, i) => s.classList.toggle('active', i === brickIdx));
|
||||
}
|
||||
mappingSelect.value = String(settings.mappingMode);
|
||||
|
||||
// Show mesh with a default material until a map is selected
|
||||
loadGeometry(geometry);
|
||||
dropHint.classList.add('hidden');
|
||||
|
||||
+6
-6
@@ -51,12 +51,12 @@ export function computeUV(pos, normal, mode, settings, bounds) {
|
||||
}
|
||||
|
||||
case MODE_CYLINDRICAL: {
|
||||
// Wrap around Y axis (vertical axis after Z-up → Y-up rotation)
|
||||
// Z is up: wrap around Z axis, height along Z
|
||||
const rx = pos.x - center.x;
|
||||
const rz = pos.z - center.z;
|
||||
const theta = Math.atan2(rz, rx); // [-PI, PI]
|
||||
const ry = pos.y - center.y;
|
||||
const theta = Math.atan2(ry, rx); // [-PI, PI]
|
||||
u = (theta / TWO_PI) + 0.5; // [0, 1]
|
||||
v = (pos.y - min.y) / Math.max(size.y, 1e-6);
|
||||
v = (pos.z - min.z) / Math.max(size.z, 1e-6);
|
||||
break;
|
||||
}
|
||||
|
||||
@@ -65,8 +65,8 @@ export function computeUV(pos, normal, mode, settings, bounds) {
|
||||
const ry = pos.y - center.y;
|
||||
const rz = pos.z - center.z;
|
||||
const r = Math.sqrt(rx*rx + ry*ry + rz*rz);
|
||||
const phi = Math.acos(Math.max(-1, Math.min(1, ry / Math.max(r, 1e-6)))); // [0, PI], Y is up
|
||||
const theta = Math.atan2(rz, rx); // [-PI, PI]
|
||||
const phi = Math.acos(Math.max(-1, Math.min(1, rz / Math.max(r, 1e-6)))); // [0, PI], Z is up
|
||||
const theta = Math.atan2(ry, rx); // [-PI, PI]
|
||||
u = (theta / TWO_PI) + 0.5;
|
||||
v = phi / Math.PI;
|
||||
break;
|
||||
|
||||
@@ -77,16 +77,16 @@ const fragmentShader = /* glsl */`
|
||||
return sampleMap((pos.yz - boundsMin.yz) / max(boundsSize.yz, vec2(1e-4)));
|
||||
|
||||
} else if (mappingMode == 3) {
|
||||
// Cylindrical around Y (vertical axis after Z-up → Y-up rotation)
|
||||
float u = atan(rel.z, rel.x) / TWO_PI + 0.5;
|
||||
float v = (pos.y - boundsMin.y) / max(boundsSize.y, 1e-4);
|
||||
// Cylindrical around Z axis (Z is up)
|
||||
float u = atan(rel.y, rel.x) / TWO_PI + 0.5;
|
||||
float v = (pos.z - boundsMin.z) / max(boundsSize.z, 1e-4);
|
||||
return sampleMap(vec2(u, v));
|
||||
|
||||
} else if (mappingMode == 4) {
|
||||
// Spherical
|
||||
// Spherical — Z is up
|
||||
float r = length(rel);
|
||||
float phi = acos(clamp(rel.y / max(r, 1e-4), -1.0, 1.0));
|
||||
float theta = atan(rel.z, rel.x);
|
||||
float phi = acos(clamp(rel.z / max(r, 1e-4), -1.0, 1.0));
|
||||
float theta = atan(rel.y, rel.x);
|
||||
return sampleMap(vec2(theta / TWO_PI + 0.5, phi / PI));
|
||||
|
||||
} else if (mappingMode == 5) {
|
||||
|
||||
@@ -35,8 +35,6 @@ function setupGeometry(geometry) {
|
||||
const centre = new THREE.Vector3();
|
||||
box.getCenter(centre);
|
||||
geometry.translate(-centre.x, -centre.y, -centre.z);
|
||||
// Convert Z-up (3D-print convention) to Y-up (Three.js convention)
|
||||
geometry.rotateX(-Math.PI / 2);
|
||||
geometry.computeBoundingBox();
|
||||
if (!geometry.attributes.normal) geometry.computeVertexNormals();
|
||||
}
|
||||
|
||||
+73
-71
@@ -3,56 +3,57 @@ import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
|
||||
|
||||
let renderer, camera, scene, controls, meshGroup, ambientLight, dirLight1, dirLight2, grid;
|
||||
let currentMesh = null;
|
||||
let gizmoScene, gizmoCamera;
|
||||
let axesGroup = null;
|
||||
|
||||
const GIZMO_PX = 90; // gizmo viewport size in CSS pixels
|
||||
const GIZMO_MARGIN = 14;
|
||||
|
||||
function buildGizmo() {
|
||||
gizmoScene = new THREE.Scene();
|
||||
gizmoCamera = new THREE.OrthographicCamera(-1.6, 1.6, 1.6, -1.6, 0.1, 10);
|
||||
gizmoCamera.position.set(0, 0, 3);
|
||||
// Build a labelled coordinate axes indicator scaled to `size`.
|
||||
// X = red, Y = green, Z = blue (up).
|
||||
function buildAxesIndicator(size) {
|
||||
const group = new THREE.Group();
|
||||
|
||||
const addAxis = (dir, hex, label) => {
|
||||
// Shaft line
|
||||
const shaft = new THREE.BufferGeometry().setFromPoints([
|
||||
new THREE.Vector3(0, 0, 0),
|
||||
dir.clone().multiplyScalar(0.78),
|
||||
]);
|
||||
gizmoScene.add(new THREE.Line(
|
||||
shaft,
|
||||
new THREE.LineBasicMaterial({ color: hex, depthTest: false }),
|
||||
));
|
||||
const r = size;
|
||||
// Shaft
|
||||
const pts = [new THREE.Vector3(0, 0, 0), dir.clone().multiplyScalar(r * 0.78)];
|
||||
const line = new THREE.Line(
|
||||
new THREE.BufferGeometry().setFromPoints(pts),
|
||||
new THREE.LineBasicMaterial({ color: hex, depthTest: false, transparent: true, opacity: 0.9 }),
|
||||
);
|
||||
line.renderOrder = 999;
|
||||
group.add(line);
|
||||
|
||||
// Arrow-head cone
|
||||
// Cone arrowhead
|
||||
const cone = new THREE.Mesh(
|
||||
new THREE.ConeGeometry(0.10, 0.24, 8),
|
||||
new THREE.ConeGeometry(r * 0.07, r * 0.22, 8),
|
||||
new THREE.MeshBasicMaterial({ color: hex, depthTest: false }),
|
||||
);
|
||||
cone.position.copy(dir.clone().multiplyScalar(0.92));
|
||||
cone.renderOrder = 999;
|
||||
cone.position.copy(dir.clone().multiplyScalar(r * 0.89));
|
||||
cone.quaternion.setFromUnitVectors(new THREE.Vector3(0, 1, 0), dir);
|
||||
gizmoScene.add(cone);
|
||||
group.add(cone);
|
||||
|
||||
// Text label sprite
|
||||
// Text sprite label
|
||||
const c = document.createElement('canvas');
|
||||
c.width = c.height = 64;
|
||||
const ctx = c.getContext('2d');
|
||||
ctx.fillStyle = `#${hex.toString(16).padStart(6, '0')}`;
|
||||
ctx.font = 'bold 46px Arial';
|
||||
ctx.font = 'bold 48px Arial';
|
||||
ctx.textAlign = 'center';
|
||||
ctx.textBaseline = 'middle';
|
||||
ctx.fillText(label, 32, 32);
|
||||
const sprite = new THREE.Sprite(
|
||||
new THREE.SpriteMaterial({ map: new THREE.CanvasTexture(c), depthTest: false }),
|
||||
);
|
||||
sprite.position.copy(dir.clone().multiplyScalar(1.26));
|
||||
sprite.scale.set(0.42, 0.42, 1);
|
||||
gizmoScene.add(sprite);
|
||||
sprite.renderOrder = 999;
|
||||
sprite.position.copy(dir.clone().multiplyScalar(r * 1.18));
|
||||
sprite.scale.set(r * 0.32, r * 0.32, 1);
|
||||
group.add(sprite);
|
||||
};
|
||||
|
||||
addAxis(new THREE.Vector3(1, 0, 0), 0xff4040, 'X');
|
||||
addAxis(new THREE.Vector3(0, 1, 0), 0x44dd44, 'Y');
|
||||
addAxis(new THREE.Vector3(0, 0, 1), 0x5599ff, 'Z');
|
||||
addAxis(new THREE.Vector3(1, 0, 0), 0xff3333, 'X');
|
||||
addAxis(new THREE.Vector3(0, 1, 0), 0x33dd55, 'Y');
|
||||
addAxis(new THREE.Vector3(0, 0, 1), 0x4488ff, 'Z');
|
||||
|
||||
return group;
|
||||
}
|
||||
|
||||
export function initViewer(canvas) {
|
||||
@@ -69,14 +70,16 @@ export function initViewer(canvas) {
|
||||
scene = new THREE.Scene();
|
||||
scene.background = new THREE.Color(0x111114);
|
||||
|
||||
// Grid helper (subtle)
|
||||
// Grid helper — in XY plane (Z-up)
|
||||
grid = new THREE.GridHelper(200, 40, 0x222228, 0x1e1e24);
|
||||
grid.position.y = 0;
|
||||
grid.rotation.x = Math.PI / 2; // rotate to XY plane for Z-up
|
||||
grid.position.z = 0;
|
||||
scene.add(grid);
|
||||
|
||||
// Camera
|
||||
camera = new THREE.PerspectiveCamera(45, 1, 0.01, 5000);
|
||||
camera.position.set(0, 80, 120);
|
||||
// Camera — orthographic (parallel projection), Z-up
|
||||
camera = new THREE.OrthographicCamera(-150, 150, 150, -150, -10000, 10000);
|
||||
camera.up.set(0, 0, 1);
|
||||
camera.position.set(120, -200, 100);
|
||||
camera.lookAt(0, 0, 0);
|
||||
|
||||
// Lights
|
||||
@@ -101,12 +104,8 @@ export function initViewer(canvas) {
|
||||
controls = new OrbitControls(camera, renderer.domElement);
|
||||
controls.enableDamping = true;
|
||||
controls.dampingFactor = 0.08;
|
||||
controls.minDistance = 1;
|
||||
controls.maxDistance = 3000;
|
||||
controls.screenSpacePanning = true;
|
||||
|
||||
buildGizmo();
|
||||
|
||||
// Resize observer
|
||||
const resizeObserver = new ResizeObserver(() => onResize());
|
||||
resizeObserver.observe(canvas.parentElement);
|
||||
@@ -117,28 +116,7 @@ export function initViewer(canvas) {
|
||||
requestAnimationFrame(animate);
|
||||
controls.update();
|
||||
|
||||
const cw = renderer.domElement.clientWidth;
|
||||
const ch = renderer.domElement.clientHeight;
|
||||
|
||||
// 1. Main scene — full viewport
|
||||
renderer.setScissorTest(false);
|
||||
renderer.setViewport(0, 0, cw, ch);
|
||||
renderer.render(scene, camera);
|
||||
|
||||
// 2. Gizmo overlay — upper-right corner
|
||||
// WebGL y=0 is at bottom, so upper-right means large y.
|
||||
const gx = cw - GIZMO_PX - GIZMO_MARGIN;
|
||||
const gy = ch - GIZMO_PX - GIZMO_MARGIN;
|
||||
gizmoCamera.quaternion.copy(camera.quaternion);
|
||||
renderer.setScissorTest(true);
|
||||
renderer.setScissor(gx, gy, GIZMO_PX, GIZMO_PX);
|
||||
renderer.setViewport(gx, gy, GIZMO_PX, GIZMO_PX);
|
||||
renderer.autoClear = false;
|
||||
renderer.clearDepth();
|
||||
renderer.render(gizmoScene, gizmoCamera);
|
||||
renderer.autoClear = true;
|
||||
renderer.setScissorTest(false);
|
||||
renderer.setViewport(0, 0, cw, ch);
|
||||
})();
|
||||
}
|
||||
|
||||
@@ -147,7 +125,11 @@ function onResize() {
|
||||
const w = el.clientWidth;
|
||||
const h = el.clientHeight;
|
||||
renderer.setSize(w, h, false);
|
||||
camera.aspect = w / h;
|
||||
// Orthographic: keep the frustum half-height, update left/right for new aspect
|
||||
const aspect = w / h;
|
||||
const halfH = camera.top;
|
||||
camera.left = -halfH * aspect;
|
||||
camera.right = halfH * aspect;
|
||||
camera.updateProjectionMatrix();
|
||||
}
|
||||
|
||||
@@ -179,17 +161,26 @@ export function loadGeometry(geometry, material) {
|
||||
currentMesh.receiveShadow = true;
|
||||
meshGroup.add(currentMesh);
|
||||
|
||||
// Position grid at mesh bottom
|
||||
// Position grid at mesh bottom (Z-up: move grid along Z)
|
||||
geometry.computeBoundingBox();
|
||||
const box = geometry.boundingBox;
|
||||
const centerY = (box.min.y + box.max.y) / 2;
|
||||
grid.position.y = box.min.y - 0.01;
|
||||
const groundZ = box.min.z - 0.01;
|
||||
grid.position.z = groundZ;
|
||||
|
||||
// Fit camera
|
||||
const sphere = new THREE.Sphere();
|
||||
geometry.computeBoundingSphere();
|
||||
sphere.copy(geometry.boundingSphere);
|
||||
fitCamera(sphere);
|
||||
|
||||
// Place coordinate axes away from the part corner
|
||||
if (axesGroup) scene.remove(axesGroup);
|
||||
const axisSize = sphere.radius * 0.30;
|
||||
axesGroup = buildAxesIndicator(axisSize);
|
||||
// Offset from the bounding box corner by ~1 axis-length so it doesn't overlap the mesh
|
||||
const axisPad = axisSize * 1.8;
|
||||
axesGroup.position.set(box.min.x - axisPad, box.min.y - axisPad, groundZ);
|
||||
scene.add(axesGroup);
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -215,15 +206,26 @@ export function setMeshMaterial(material) {
|
||||
export function getGrid() { return grid; }
|
||||
|
||||
function fitCamera(sphere) {
|
||||
const fov = THREE.MathUtils.degToRad(camera.fov);
|
||||
const dist = (sphere.radius * 2.2) / Math.tan(fov / 2);
|
||||
const dir = camera.position.clone().sub(controls.target).normalize();
|
||||
controls.target.copy(sphere.center);
|
||||
camera.position.copy(sphere.center).addScaledVector(dir, dist);
|
||||
controls.update();
|
||||
camera.near = dist * 0.001;
|
||||
camera.far = dist * 10;
|
||||
const sz = renderer.getSize(new THREE.Vector2());
|
||||
const aspect = sz.x / sz.y;
|
||||
const halfH = sphere.radius * 1.4;
|
||||
|
||||
camera.left = -halfH * aspect;
|
||||
camera.right = halfH * aspect;
|
||||
camera.top = halfH;
|
||||
camera.bottom = -halfH;
|
||||
camera.near = -sphere.radius * 200;
|
||||
camera.far = sphere.radius * 200;
|
||||
camera.zoom = 1;
|
||||
camera.updateProjectionMatrix();
|
||||
|
||||
// Isometric-ish view from front-right-above in Z-up space
|
||||
const dir = new THREE.Vector3(0.6, -1.2, 0.8).normalize();
|
||||
controls.target.copy(sphere.center);
|
||||
camera.position.copy(sphere.center).addScaledVector(dir, halfH * 4);
|
||||
camera.up.set(0, 0, 1);
|
||||
camera.lookAt(sphere.center);
|
||||
controls.update();
|
||||
}
|
||||
|
||||
export function getRenderer() { return renderer; }
|
||||
|
||||
Reference in New Issue
Block a user