Test: Difference between revisions

From Open Source Ecology
Jump to navigation Jump to search
No edit summary
No edit summary
 
(121 intermediate revisions by the same user not shown)
Line 1: Line 1:
<!DOCTYPE html>
<html>
<html>
<title>W3.CSS</title>
<div id="ose-3d-mindmap" style="width:100%; height:700px; border:1px solid #ccc; overflow:hidden; position:relative;"></div>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<body>


<div class="w3-container w3-teal">
<script src="https://unpkg.com/three@0.160.0/build/three.min.js"></script>
<h1>Summer Holiday</h1>
<script src="https://unpkg.com/three@0.160.0/examples/js/controls/OrbitControls.js"></script>
</div>


<div class="w3-content">
<script>
(function () {
  const container = document.getElementById('ose-3d-mindmap');
  if (!container) return;


<div class="w3-row w3-margin">
  const words = [
    "collaborative",
    "design",
    "for",
    "a",
    "transparent",
    "and",
    "inclusive",
    "economy",
    "of",
    "abundance"
  ];


<div class="w3-third">
   const scene = new THREE.Scene();
   <img src="img_5terre.jpg" style="width:100%;min-height:200px">
   scene.background = new THREE.Color(0xffffff);
</div>
<div class="w3-twothird w3-container">
  <h2>5 Terre</h2>
   <p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  </p>
</div>


</div>
  const camera = new THREE.PerspectiveCamera(
<div class="w3-row w3-margin">
    50,
    container.clientWidth / container.clientHeight,
    0.1,
    2000
  );
  camera.position.set(0, 0, 260);


<div class="w3-third">
   const renderer = new THREE.WebGLRenderer({ antialias: true });
   <img src="img_monterosso.jpg" style="width:100%;min-height:200px">
   renderer.setPixelRatio(window.devicePixelRatio || 1);
</div>
   renderer.setSize(container.clientWidth, container.clientHeight);
<div class="w3-twothird w3-container">
   container.appendChild(renderer.domElement);
   <h2>Monterosso</h2>
   <p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
   </p>
</div>


</div>
  const controls = new THREE.OrbitControls(camera, renderer.domElement);
<div class="w3-row w3-margin">
  controls.enableDamping = true;
  controls.dampingFactor = 0.08;
  controls.rotateSpeed = 0.8;
  controls.zoomSpeed = 0.9;
  controls.panSpeed = 0.7;


<div class="w3-third">
   const ambient = new THREE.AmbientLight(0xffffff, 1.2);
   <img src="img_vernazza.jpg" style="width:100%;min-height:200px">
   scene.add(ambient);
</div>
<div class="w3-twothird w3-container">
  <h2>Vernazza</h2>
  <p>
   Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  </p>
</div>


</div>
  const dirLight = new THREE.DirectionalLight(0xffffff, 0.8);
<div class="w3-row w3-margin">
  dirLight.position.set(120, 150, 200);
  scene.add(dirLight);


<div class="w3-third">
  function makeTextSprite(message) {
  <img src="img_manarola.jpg" style="width:100%;min-height:200px">
    const canvas = document.createElement('canvas');
</div>
    const ctx = canvas.getContext('2d');
<div class="w3-twothird w3-container">
  <h2>Manarola</h2>
  <p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  </p>
</div>


</div>
    const fontSize = 48;
<div class="w3-row w3-margin">
    const paddingX = 28;
    const paddingY = 18;
    ctx.font = 'bold ' + fontSize + 'px Arial';


<div class="w3-third">
    const textWidth = Math.ceil(ctx.measureText(message).width);
  <img src="img_corniglia.jpg" style="width:100%;min-height:200px">
    canvas.width = textWidth + paddingX * 2;
</div>
    canvas.height = fontSize + paddingY * 2;
<div class="w3-twothird w3-container">
  <h2>Corniglia</h2>
  <p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  </p>
</div>


</div>
    ctx.font = 'bold ' + fontSize + 'px Arial';
<div class="w3-row w3-margin">
    ctx.textBaseline = 'middle';
    ctx.textAlign = 'center';


<div class="w3-third">
    ctx.fillStyle = 'rgba(255,255,255,0.92)';
  <img src="img_riomaggiore.jpg" style="width:100%;min-height:200px">
    ctx.strokeStyle = 'rgba(40,40,40,0.9)';
</div>
    ctx.lineWidth = 3;
<div class="w3-twothird w3-container">
    roundRect(ctx, 2, 2, canvas.width - 4, canvas.height - 4, 14, true, true);
  <h2>Riomaggiore</h2>
  <p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  </p>
</div>


</div>
    ctx.fillStyle = '#111111';
</div>
    ctx.fillText(message, canvas.width / 2, canvas.height / 2);
</body>
 
    const texture = new THREE.CanvasTexture(canvas);
    texture.needsUpdate = true;
 
    const material = new THREE.SpriteMaterial({
      map: texture,
      transparent: true
    });
 
    const sprite = new THREE.Sprite(material);
 
    const scale = 0.34;
    sprite.scale.set(canvas.width * scale, canvas.height * scale, 1);
 
    return sprite;
  }
 
  function roundRect(ctx, x, y, w, h, r, fill, stroke) {
    if (w < 2 * r) r = w / 2;
    if (h < 2 * r) r = h / 2;
    ctx.beginPath();
    ctx.moveTo(x + r, y);
    ctx.arcTo(x + w, y, x + w, y + h, r);
    ctx.arcTo(x + w, y + h, x, y + h, r);
    ctx.arcTo(x, y + h, x, y, r);
    ctx.arcTo(x, y, x + w, y, r);
    ctx.closePath();
    if (fill) ctx.fill();
    if (stroke) ctx.stroke();
  }
 
  const nodeGroup = new THREE.Group();
  scene.add(nodeGroup);
 
  const positions = [];
  const radius = 95;
 
  // Distribute words across a sphere
  for (let i = 0; i < words.length; i++) {
    const phi = Math.acos(-1 + (2 * i + 1) / words.length);
    const theta = Math.sqrt(words.length * Math.PI) * phi;
 
    const x = radius * Math.cos(theta) * Math.sin(phi);
    const y = radius * Math.sin(theta) * Math.sin(phi);
    const z = radius * Math.cos(phi);
 
    positions.push(new THREE.Vector3(x, y, z));
 
    const sprite = makeTextSprite(words[i]);
    sprite.position.set(x, y, z);
    sprite.userData.word = words[i];
    nodeGroup.add(sprite);
  }
 
  // Connect every word to every other word
  const lineMaterial = new THREE.LineBasicMaterial({
    color: 0x777777,
    transparent: true,
    opacity: 0.45
  });
 
  for (let i = 0; i < positions.length; i++) {
    for (let j = i + 1; j < positions.length; j++) {
      const geometry = new THREE.BufferGeometry().setFromPoints([
        positions[i],
        positions[j]
      ]);
      const line = new THREE.Line(geometry, lineMaterial);
      scene.add(line);
    }
  }
 
  // Small center marker
  const centerGeom = new THREE.SphereGeometry(3, 16, 16);
  const centerMat = new THREE.MeshBasicMaterial({ color: 0x222222 });
  const centerDot = new THREE.Mesh(centerGeom, centerMat);
  scene.add(centerDot);
 
  const raycaster = new THREE.Raycaster();
  const pointer = new THREE.Vector2();
 
  const info = document.createElement('div');
  info.style.position = 'absolute';
  info.style.left = '12px';
  info.style.top = '12px';
  info.style.padding = '8px 10px';
  info.style.background = 'rgba(255,255,255,0.9)';
  info.style.border = '1px solid #ccc';
  info.style.fontFamily = 'Arial, sans-serif';
  info.style.fontSize = '14px';
  info.style.color = '#111';
  info.style.zIndex = '10';
  info.innerHTML = 'Drag to rotate. Scroll to zoom. Click a word.';
  container.appendChild(info);
 
  function onPointerMove(event) {
    const rect = renderer.domElement.getBoundingClientRect();
    pointer.x = ((event.clientX - rect.left) / rect.width) * 2 - 1;
    pointer.y = -((event.clientY - rect.top) / rect.height) * 2 + 1;
  }
 
  function onClick() {
    raycaster.setFromCamera(pointer, camera);
    const intersects = raycaster.intersectObjects(nodeGroup.children, true);
 
    if (intersects.length > 0) {
      const obj = intersects[0].object;
      if (obj.userData && obj.userData.word) {
        info.innerHTML = 'Selected: <b>' + obj.userData.word + '</b>';
      }
    }
  }
 
  renderer.domElement.addEventListener('mousemove', onPointerMove);
  renderer.domElement.addEventListener('click', onClick);
 
  function resize() {
    const w = container.clientWidth;
    const h = container.clientHeight;
    camera.aspect = w / h;
    camera.updateProjectionMatrix();
    renderer.setSize(w, h);
  }
 
  window.addEventListener('resize', resize);
 
  function animate() {
    requestAnimationFrame(animate);
    controls.update();
    renderer.render(scene, camera);
  }
 
  animate();
})();
</script>
</html>
</html>

Latest revision as of 15:35, 4 April 2026

Retrieved from "https://wiki.opensourceecology.org/index.php?title=Test&oldid=322620"