MrX DreamWeaver Wiki – Expanded MrX Engine

// Expanded Three.js Globe Script
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight / 2, 0.1, 1000); // Adjusted aspect for container
const renderer = new THREE.WebGLRenderer({ canvas: document.getElementById('globe'), antialias: true });
renderer.setSize(window.innerWidth, 600); // Fixed height

const geometry = new THREE.SphereGeometry(5, 64, 64);
const texture = new THREE.TextureLoader().load('https://threejs.org/examples/textures/planets/earth_atmos_2048.jpg');
const bumpMap = new THREE.TextureLoader().load('https://threejs.org/examples/textures/planets/earth_normal_2048.jpg');
const material = new THREE.MeshStandardMaterial({ map: texture, bumpMap: bumpMap, bumpScale: 0.05 });
const earth = new THREE.Mesh(geometry, material);
scene.add(earth);

const ambientLight = new THREE.AmbientLight(0x404040);
scene.add(ambientLight);
const pointLight = new THREE.PointLight(0xffffff, 2, 100);
pointLight.position.set(10, 10, 10);
scene.add(pointLight);

camera.position.z = 12;

let isDragging = false;
let previousMousePosition = { x: 0, y: 0 };

document.addEventListener('mousedown', (e) => { isDragging = true; previousMousePosition = { x: e.clientX, y: e.clientY }; });
document.addEventListener('mousemove', (e) => {
  if (isDragging) {
    const deltaMove = { x: e.clientX - previousMousePosition.x, y: e.clientY - previousMousePosition.y };
    earth.rotation.y += deltaMove.x * 0.01;
    earth.rotation.x += deltaMove.y * 0.01;
    previousMousePosition = { x: e.clientX, y: e.clientY };
  }
});
document.addEventListener('mouseup', () => { isDragging = false; });

function animate() {
  requestAnimationFrame(animate);
  earth.rotation.y += 0.001; // Auto-rotate
  renderer.render(scene, camera);
}
animate();

// Avatar Planting Expansion
function plantAvatar(location, type) {
  const avatarGeo = type === 'house' ? new THREE.BoxGeometry(0.2, 0.2, 0.2) : new THREE.SphereGeometry(0.1, 32, 32);
  const avatarMat = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
  const avatar = new THREE.Mesh(avatarGeo, avatarMat);
  // Position based on lat/long (simplified)
  const phi = (90 - location.lat) * Math.PI / 180;
  const theta = (location.lon + 180) * Math.PI / 180;
  avatar.position.setFromSphericalCoords(5.01, phi, theta);
  earth.add(avatar);
}
// Example: Rogers Park, Chicago (approx 42N, 87.7W)
plantAvatar({ lat: 42, lon: -87.7 }, 'house');