<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://unpkg.com/three@0.142.x/build/three.min.js"></script>
<script src="https://unpkg.com/xnew@2.3.x/dist/xnew.js"></script>
<script src="https://unpkg.com/xnew@2.3.x/dist/addons/xthree.js"></script>
<style>
body {
margin: 0;
height: 100vh;
overflow: hidden;
}
.target {
position: absolute;
inset: 0;
display: flex;
transform-origin: center;
}
.target > div {
justify-content: center;
align-items: center;
width: 85%;
max-width: 800px;
margin: auto;
padding: 10px;
background: #AAA;
}
.target img {
width: 40%;
float: left;
margin: 0 10px 10px 0;
}
.button {
cursor: pointer;
position: absolute;
bottom: 10px;
opacity: 0.2;
width: 50px;
height: 50px;
border: solid 1px #FFF;
border-radius: 50%;
}
.button:hover {
opacity: 0.5;
}
.button::after {
display: block;
content: "";
width: 100%;
height: 100%;
background: #FFF;
}
.button.left {
left: 10px;
}
.button.left::after {
clip-path: polygon(20% 50%, 70% 20%, 70% 80%);
}
.button.right {
right: 10px;
}
.button.right:after {
clip-path: polygon(80% 50%, 30% 20%, 30% 80%);
}
</style>
</head>
<body>
<div id="screen" style="position: absolute; width: 100%; height: 100%;"></div>
<div style="width: 100%; height: 100%; perspective: 500px; perspective-origin: center;">
<div class="target">
<div>
<img src="iguana.jpg"/>
<b>Marine iguana</b> <a href="https://en.wikipedia.org/wiki/Marine_iguana">wiki</a>
<p>
The marine iguana (Amblyrhynchus cristatus), also known as the sea iguana, saltwater iguana, or Galápagos marine iguana, is a species of iguana found only on the Galápagos Islands (Ecuador).
Unique among modern lizards, it is a marine reptile that has the ability to forage in the sea for algae, which makes up almost all of its diet.
Marine iguanas are the only extant lizard that spends time in a marine environment.
Large males are able to dive to find this food source, while females and smaller males feed during low tide in the intertidal zone.
They mainly live in colonies on rocky shores where they bask after visiting the relatively cold water or intertidal zone, but can also be seen in marshes, mangrove swamps and beaches.
</p>
</div>
</div>
<div class="target">
<div>
<img src="penguin.jpg"/>
<b>Galapagos penguin</b> <a href="https://en.wikipedia.org/wiki/Galapagos_penguin">wiki</a>
<p>
The Galápagos penguin (Spheniscus mendiculus) is a penguin endemic to the Galápagos Islands of Ecuador.
It is the only penguin found north of the equator.
Most inhabit Fernandina Island and the west coast of Isabela Island.
The cool waters of the Humboldt and Cromwell Currents allow it to survive despite the tropical latitude.
The Galápagos penguin is one of the banded penguins, the other species of which live mostly on the coasts of Africa and mainland South America. Due to their warm environment, Galápagos penguins have developed techniques to stay cool.
The feathers on their back, flippers, and head are black, and they have a white belly and a stripe looping from their eyes down to their neck and chin.
</p>
</div>
</div>
<div class="target">
<div>
<img src="booby.jpg"/>
<b>Blue-footed booby</b> <a href="https://en.wikipedia.org/wiki/Blue-footed_booby">wiki</a>
<p>
The blue-footed booby (Sula nebouxii) is a marine bird native to subtropical and tropical regions of the eastern Pacific Ocean.
It is one of six species of the genus Sula – known as boobies. It is easily recognizable by its distinctive bright blue feet, which is a sexually selected trait and a product of their diet.
Males display their feet in an elaborate mating ritual by lifting them up and down while strutting before the female. The female is slightly larger than the male and can measure up to 90 cm (35 in) long with a wingspan up to 1.5 m (5 ft).
The natural breeding habitats of the blue-footed booby are the tropical and subtropical islands of the Pacific Ocean.
It can be found from the Gulf of California south along the western coasts of Central and South America to Peru. About half of all breeding pairs nest on the Galápagos Islands.
Its diet mainly consists of fish, which it obtains by diving and sometimes swimming underwater in search of its prey. It sometimes hunts alone, but usually hunts in groups.
</p>
</div>
</div>
<div class="target">
<div>
<img src="tortoise.jpg"/>
<b>Giant tortoise</b> <a href="https://en.wikipedia.org/wiki/Giant_tortoise">wiki</a>
<p>
Giant tortoises are any of several species of various large land tortoises, which include a number of extinct species,
as well as two extant species with multiple subspecies formerly common on the islands of the western Indian Ocean and on the Galápagos Islands.
As of February 2024, two different species of giant tortoise are found on two remote groups of tropical islands: Aldabra Atoll and Fregate Island in the Seychelles and the Galápagos Islands in Ecuador.
These tortoises can weigh as much as 417 kg (919 lb) and can grow to be 1.3 m (4 ft 3 in) long. Giant tortoises originally made their way to islands from the mainland via oceanic dispersal. Tortoises are aided in such dispersal by their ability to float with their heads up and to survive for up to six months without food or fresh water.
</p>
</div>
</div>
</div>
<div class="button left"></div>
<div class="button right"></div>
<script>
const perspective = 500;
const offset = { rx: 0, ry: 11, rz: 0, tx: 120, ty: 0, tz: 0 };
const transform = { rx: 0, ry: 0, rz: 0, tx: 0, ty: 0, tz: 0 };
const state = { id: 0, moving: false };
xnew((self) => {
xnew(HtmlMain);
xnew(ThreeMain);
xnew(Event);
});
function HtmlMain(self) {
document.querySelectorAll('.target').forEach((element, index) => {
xnew(element, Plane, index);
});
}
function Plane(self, id) {
let opacity = id === state.id ? 0.80 : 0.20;
self.on('+planefade', () => {
xnew.transition(({ progress }) => {
opacity = id === state.id ? Math.max(opacity, 0.20 + progress * 0.60) : Math.min(opacity, 0.80 - progress * 0.60);
}, 700);
});
return {
update() {
self.element.style.opacity = opacity;
self.element.style.transform = `
translateZ(${perspective}px)
translateX(${(transform.tx + offset.tx)}px) translateY(${(transform.ty + offset.ty)}px)
rotateX(${transform.rx + offset.rx}deg) rotateY(${transform.ry + offset.ry + id * 90}deg)
translateZ(${-perspective}px)
`;
}
}
}
function Event(self) {
xnew('.button.left', Button, +1);
xnew('.button.right', Button, -1);
function Button(self, direction) {
self.on('click', () => {
if (state.moving === false) {
state.id = (state.id + direction + 4) % 4;
state.moving = true;
const backup = { ...transform };
xnew.transition(({ progress }) => {
const p = (1.0 - Math.cos(progress * Math.PI)) * 0.5;
transform.ry = backup.ry - direction * 90 * p;
transform.ty = backup.ty * (1.0 - p);
if (progress === 1.0) state.moving = false;
}, 700);
self.emit('+planefade');
}
});
}
self.on('wheel', (event) => {
event.preventDefault();
transform.ty = Math.max(-300, Math.min(+300, transform.ty + event.wheelDeltaY * 0.2));
}, { passive: false });
}
function ThreeMain(self) {
const screen = xnew('#screen', xnew.Screen, { width: 1200, height: 800, fit: 'cover' });
const canvas = screen.canvas;
const camera = new THREE.PerspectiveCamera(fov(), canvas.width / canvas.height);
const three = xthree.setup({ renderer: new THREE.WebGLRenderer({ canvas, antialias: true }), camera });
xnew(xnew.ResizeEvent).on('resize', () => {
camera.fov = fov();
camera.updateProjectionMatrix();
});
function fov() {
return Math.atan2(canvas.getBoundingClientRect().height / 2, perspective) * 2 * 180 / Math.PI;
}
xnew(ThreeContents);
xnew(() => {
return {
update() {
three.scene.rotation.x = -(transform.rx + offset.rx) * Math.PI / 180;
three.scene.rotation.y = +(transform.ry + offset.ry) * Math.PI / 180;
three.camera.position.x = -(transform.tx + offset.tx);
three.camera.position.y = +(transform.ty + offset.ty);
},
}
});
}
function ThreeContents(self) {
xnew(DirectionaLight, 20, -50, 50, 0.1);
xnew(DirectionaLight, 20, 50, -10, 0.1);
xnew(AmbientLight, 0.05);
xnew(Room);
}
function DirectionaLight(self, x, y, z, value) {
const object = xthree.nest(new THREE.DirectionalLight(0xFFFFFF, value));
object.position.set(x, y, z);
}
function AmbientLight(self, value) {
const object = xthree.nest(new THREE.AmbientLight(0xFFFFFF, value));
}
function Room(self) {
const size = perspective;
const geometry = new THREE.BoxGeometry(size * 2, size * 2, size * 2);
const material = new THREE.MeshStandardMaterial({
color: 0xF8F8FF, side: THREE.BackSide,
polygonOffset: true, polygonOffsetFactor: 1, polygonOffsetUnits: 1
});
const object = xthree.nest(new THREE.Mesh(geometry, material));
xnew(Grid, { tz: +size, rx: 90 });
xnew(Grid, { tz: -size, rx: 90 });
xnew(Grid, { tx: +size, rz: 90 });
xnew(Grid, { tx: -size, rz: 90 });
xnew(Grid, { ty: +size });
xnew(Grid, { ty: -size });
}
function Grid(self, { tx = 0, ty = 0, tz = 0, rx = 0, ry = 0, rz = 0 }) {
const object = xthree.nest(new THREE.GridHelper(1100, 10, 0x444466, 0x444466));
object.rotation.set(rx * Math.PI / 180, ry * Math.PI / 180, rz * Math.PI / 180);
object.position.set(tx, ty, tz);
}
</script>
</body>
</html>