Привет, я пытаюсь вырезать эти сферы в другом направлении, чтобы сохранить «укушенную часть» сфер ⇐ Html

[Anonymous]

Название: Как правильно сферы на четверть разрезания в три. Проект Thre.js, в котором я пытаюсь создать визуальное изображение слоистых сфер, и я хочу разрезать каждую сферу в стиле «четверть выреза»-сохраняя три четверти сферы, удаляя одну четверть, как в этих типичных перекрестных раздел графика Слои Земли. оставляет неправильный раздел. Я попытался перевернуть самолеты и перемещать их на разные оси, но это не помогло. < /P>
Вот текущий код: < /p>







Orbital

#slider, #rotationSlider {
position: absolute;
top: 10px;
left: 50%;
transform: translateX(-50%);
}
#rotationSlider {
top: 40px;
}






import * as THREE from "https://esm.sh/[email protected]";
import { OrbitControls } from "https://esm.sh/[email protected]/examples/j ... ontrols.js";

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 30;

const renderer = new THREE.WebGLRenderer();
renderer.localClippingEnabled = true;
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

const controls = new OrbitControls(camera, renderer.domElement);
controls.enableDamping = true; // Enable damping (inertia)
controls.dampingFactor = 0.25; // Damping factor
controls.enableZoom = true; // Enable zooming

const ambientLight = new THREE.AmbientLight(0xffffff, 0.5); // Soft white light
scene.add(ambientLight);

const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
directionalLight.position.set(5, 5, 5).normalize();
scene.add(directionalLight);

// Create a clipping plane
// Angled planes meeting at the "bite" point
const cut = 3;
const planeX = new THREE.Plane(new THREE.Vector3(-1, 0, 0), -cut);
const planeY = new THREE.Plane(new THREE.Vector3(0, -1, 0), -cut);
const planeHelperX = new THREE.PlaneHelper(planeX, 20, 0xffffff);
const planeHelperY = new THREE.PlaneHelper(planeY, 20, 0xffffff);
scene.add(planeHelperX);
scene.add(planeHelperY);

// Add additional spheres
const numSpheres = 6;
const radius = 3;
const spheres = [];
for (let i = 0; i < numSpheres; i++) {
const colors = [0xff0000, 0xff3b3b, 0xff6b6b, 0xff9292, 0xffbdbd, 0xfffafa];
const angle = (i / numSpheres) * Math.PI * 2;

const material = new THREE.MeshPhongMaterial({
color: colors,
side: THREE.DoubleSide,
wireframe: false,
transparent: false,
opacity: 1-(i/numSpheres),
clippingPlanes: [ planeX, planeY ],
clipShadows: true
});
const geometry = new THREE.SphereGeometry(radius + i, 64, 64);
const sphere = new THREE.Mesh(geometry, material);
sphere.position.set(0, 0, 0);
spheres.push(sphere);
scene.add(sphere);
}

// Create particles as small spheres
const particleCountX = 150;
const particleCountY = 150;
const particleGeometry = new THREE.SphereGeometry(0.05, 8, 8);
const particleMaterial = new THREE.MeshPhongMaterial({ color: 0xffffff, transparent:true, opacity:0.2 });
const particlesMatrix = [];
const particleAngles = [];
for (let j = 0; j < particleCountX; j++) {
particlesMatrix[j] = [];
for (let k = 0; k < particleCountY; k++) {
const particle = new THREE.Mesh(particleGeometry, particleMaterial);
particlesMatrix[j][k] = particle;
particleAngles.push({ angleX: (j / particleCountX) * Math.PI * 2, angleY: (k / particleCountY) * Math.PI * 2 });
scene.add(particle);
}
}

// Handle slider input
slider.addEventListener('input', function() {
const depth = parseFloat(this.value);
planeX.constant = depth;
planeY.constant = depth;
});

const rotationSlider = document.getElementById('rotationSlider');
let rotationSpeed = parseFloat(rotationSlider.value);
rotationSlider.addEventListener('input', function() {
rotationSpeed = parseFloat(this.value);
});

let clock = new THREE.Clock();
let timeScale = 10; // Adjust this value to slow down or speed up the particle movement

// Animation loop
function animate() {
requestAnimationFrame(animate);

let deltaTime = clock.getDelta() * timeScale;

// Update particles to follow spheres
for (let j = 0; j < particleCountX; j++) {
for (let k = 0; k < particleCountY; k++) {
const particle = particlesMatrix[j][k];
const sphere = spheres[(j + k) % spheres.length];
const angles = particleAngles[j * particleCountY + k];
angles.angleX += rotationSpeed * deltaTime;
angles.angleY += rotationSpeed * deltaTime;
const x = sphere.position.x + (radius + (j + k) % numSpheres) * Math.cos(angles.angleX) * Math.sin(angles.angleY);
const y = sphere.position.y + (radius + (j + k) % numSpheres) * Math.sin(angles.angleX) * Math.sin(angles.angleY);
const z = sphere.position.z + (radius + (j + k) % numSpheres) * Math.cos(angles.angleY);
particle.position.set(x, y, z);
}
}

// Rotate spheres
spheres.forEach(sphere => {
sphere.rotation.y += rotationSpeed * deltaTime;
});

controls.update();
renderer.render(scene, camera);
}
animate();


< /code>
< /div>
< /div>
< /p>
Чего я бы хотел достичь: < /p>
Держите три четверти сфер (например, видимый поперечный сечение) при разрезании вдоль двух перпендикулярных плоскостей. /> Что происходит Теперь: < /p>
Самолеты разрезают сферы, но я часто вижу неправильную часть оставшейся формы. < /p>
Чего мне не хватает? Есть ли лучший подход к достижению такого типа обрезки в Three.js? Любое руководство будет оценено!


Подробнее здесь: https://stackoverflow.com/questions/794 ... the-bitten