webGL_threejs_aFrame_exercises/three92.html at main · gefercan2/webGL_threejs_aFrame_exercises · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>3D Ball Control in Room</title>
  <style>
    body {
      margin: 0;
      overflow: hidden;
      font-family: Arial, sans-serif;
    }
    canvas {
      display: block;
    }
    #controls {
      position: absolute;
      top: 20px;
      left: 20px;
      background: rgba(255, 255, 255, 0.9);
      padding: 10px;
      border-radius: 10px;
      box-shadow: 0 0 10px rgba(0,0,0,0.3);
      z-index: 10;
    }
    #controls label {
      display: block;
      margin-top: 10px;
    }
  </style>
</head>
<body>

<div id="controls">
  <label>X Position: <input type="range" id="xSlider" min="-4" max="4" step="0.1" value="0"></label>
  <label>Y Position: <input type="range" id="ySlider" min="0.5" max="4" step="0.1" value="1"></label>
  <label>Z Position: <input type="range" id="zSlider" min="-4" max="4" step="0.1" value="0"></label>
</div>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/build/three.min.js"></script>

<script>
  // Scene setup
  const scene = new THREE.Scene();
  scene.background = new THREE.Color(0xeeeeee);

  const camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);
  camera.position.set(5, 5, 5);
  camera.lookAt(0, 1, 0);

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

  // Room (a cube with inward-facing walls)
  const room = new THREE.Mesh(
    new THREE.BoxGeometry(10, 5, 10),
    [
      new THREE.MeshBasicMaterial({color: 0xcccccc, side: THREE.BackSide}),
      new THREE.MeshBasicMaterial({color: 0xdddddd, side: THREE.BackSide}),
      new THREE.MeshBasicMaterial({color: 0xaaaaaa, side: THREE.BackSide}),
      new THREE.MeshBasicMaterial({color: 0xaaaaaa, side: THREE.BackSide}),
      new THREE.MeshBasicMaterial({color: 0xbbbbbb, side: THREE.BackSide}),
      new THREE.MeshBasicMaterial({color: 0xbbbbbb, side: THREE.BackSide}),
    ]
  );
  scene.add(room);

  // Ball
  const ballGeometry = new THREE.SphereGeometry(0.5, 32, 32);
  const ballMaterial = new THREE.MeshStandardMaterial({ color: 0xff4444 });
  const ball = new THREE.Mesh(ballGeometry, ballMaterial);
  ball.position.set(0, 1, 0);
  scene.add(ball);

  // Light
  const ambientLight = new THREE.AmbientLight(0xffffff, 0.8);
  scene.add(ambientLight);

  const directionalLight = new THREE.DirectionalLight(0xffffff, 0.5);
  directionalLight.position.set(5, 10, 7.5);
  scene.add(directionalLight);

  // Controls
  const xSlider = document.getElementById('xSlider');
  const ySlider = document.getElementById('ySlider');
  const zSlider = document.getElementById('zSlider');

  function updateBallPosition() {
    ball.position.x = parseFloat(xSlider.value);
    ball.position.y = parseFloat(ySlider.value);
    ball.position.z = parseFloat(zSlider.value);
  }

  xSlider.addEventListener('input', updateBallPosition);
  ySlider.addEventListener('input', updateBallPosition);
  zSlider.addEventListener('input', updateBallPosition);

  // Animate
  function animate() {
    requestAnimationFrame(animate);
    renderer.render(scene, camera);
  }
  animate();

  // Handle resizing
  window.addEventListener('resize', () => {
    camera.aspect = window.innerWidth/window.innerHeight;
    camera.updateProjectionMatrix();
    renderer.setSize(window.innerWidth, window.innerHeight);
  });
</script>
</body>
</html>