# Bài viết mẫu thự hành tọa độ, quay (ok)

### Example 1: Plan, axes

assets <https://javascriptuse.gitbook.io/advanced/source-code-example#:~:text=assets%20https%3A//drive.google.com/file/d/1ngxmJrdJIzwY22NrXy6RV5lX0gdVZA5p/view%3Fusp%3Ddrive_link>\
\
C:\xampp82\htdocs\three\test1.html

<figure><img src="/files/aRx5cBOFk5D0VhekSvXu" alt=""><figcaption></figcaption></figure>

```html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script type="text/javascript" src="./libs/three.js"></script>
  <script type="text/javascript" src="./libs/dat.gui.js"></script>
  <title>Threejs</title>
  <style>
    body {
      margin: 0;
      overflow: hidden;
    }
  </style>
</head>
<body>
  <div id="WebGL-output"></div>
  <script type="module">
    function init() {
      // create a scene, that will hold all our elements such as objects, cameras and lights.
      var scene = new THREE.Scene();
      // create a camera, which defines where we're looking at.
      var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
      // create a render and set the size
      var renderer = new THREE.WebGLRenderer();
      renderer.setClearColor(new THREE.Color(0xEEEEEE));
      renderer.setSize(window.innerWidth, window.innerHeight);
      // show axes in the screen
      var axes = new THREE.AxisHelper(50);
      scene.add(axes);
      // create the ground plane
      var planeGeometry = new THREE.PlaneGeometry(60, 20);
      var planeMaterial = new THREE.MeshBasicMaterial({ color: 0xcccccc });
      var plane = new THREE.Mesh(planeGeometry, planeMaterial);
      // rotate and position the plane
      plane.rotation.x = - Math.PI / 2;
      plane.position.x = 30;
      plane.position.y = 0;
      plane.position.z = 0;
      // add the plane to the scene
      scene.add(plane);
      camera.position.x = - 30;
      camera.position.y = 40;
      camera.position.z = 30;
      camera.lookAt(scene.position);
      document.getElementById("WebGL-output").appendChild(renderer.domElement);
      var gui = new dat.GUI();
      var controls = new function () {
        this.rotationPlan = 0;
        this.positionX = 30;
        this.positionY = 0;
        this.positionZ = 0;
      };
      gui.add(controls, 'rotationPlan', -6, 6);
      gui.add(controls, 'positionX', -30, 30);
      gui.add(controls, 'positionY', -40, 40);
      gui.add(controls, 'positionZ', -30, 30);
      render();
      function render() {
        plane.rotation.x = controls.rotationPlan;
        plane.position.x = controls.positionX;
        plane.position.y = controls.positionY;
        plane.position.z = controls.positionZ;
        requestAnimationFrame(render);
        renderer.render(scene, camera);
      }
      render();
    }
    init();
  </script>
</body>
</html>
```

### Example 2: Plan, axes, Light

<figure><img src="/files/8lm1x0FLlezXo2p3DjQP" alt=""><figcaption></figcaption></figure>

```html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script type="text/javascript" src="./libs/three.js"></script>
  <script type="text/javascript" src="./libs/dat.gui.js"></script>
  <title>Threejs</title>
  <style>
    body {
      margin: 0;
      overflow: hidden;
    }
  </style>
</head>
<body>
  <div id="WebGL-output"></div>
  <script type="module">
    function init() {
      // create a scene, that will hold all our elements such as objects, cameras and lights.
      var scene = new THREE.Scene();
      // create a camera, which defines where we're looking at.
      var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
      // create a render and set the size
      var renderer = new THREE.WebGLRenderer();
      renderer.setClearColor(new THREE.Color(0xEEEEEE));
      renderer.setSize(window.innerWidth, window.innerHeight);
      // show axes in the screen
      var axes = new THREE.AxisHelper(50);
      scene.add(axes);
      {
        const color = 0xFFFFFF;
        const intensity = 3;
        const light = new THREE.DirectionalLight(color, intensity);
        light.position.set(- 1, 2, 4);
        scene.add(light);
      }
      // create the ground plane
      var planeGeometry = new THREE.PlaneGeometry(60, 20);
      var planeMaterial = new THREE.MeshBasicMaterial({ color: 0xcccccc });
      var plane = new THREE.Mesh(planeGeometry, planeMaterial);
      // rotate and position the plane
      plane.rotation.x = - Math.PI / 2;
      plane.position.x = 30;
      plane.position.y = 0;
      plane.position.z = 0;
      // create a cube
      var cubeGeometry = new THREE.BoxGeometry(4, 4, 4);
      var cubeMaterial = new THREE.MeshPhongMaterial({ color: 0xff0000 });
      var cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
      cube.castShadow = true;
      // position the cube
      cube.position.x = -4;
      cube.position.y = 3;
      cube.position.z = 0;
      // add the cube to the scene
      scene.add(cube);
      // add the plane to the scene
      scene.add(plane);
      camera.position.x = - 30;
      camera.position.y = 40;
      camera.position.z = 30;
      camera.lookAt(scene.position);
      document.getElementById("WebGL-output").appendChild(renderer.domElement);
      var gui = new dat.GUI();
      var controls = new function () {
        this.rotationPlan = 0;
        this.positionX = 30;
        this.positionY = 0;
        this.positionZ = 0;
      };
      gui.add(controls, 'rotationPlan', -6, 6);
      gui.add(controls, 'positionX', -30, 30);
      gui.add(controls, 'positionY', -40, 40);
      gui.add(controls, 'positionZ', -30, 30);
      render();
      function render() {
        plane.rotation.x = controls.rotationPlan;
        plane.position.x = controls.positionX;
        plane.position.y = controls.positionY;
        plane.position.z = controls.positionZ;
        requestAnimationFrame(render);
        renderer.render(scene, camera);
      }
      render();
    }
    init();
  </script>
</body>
</html>
```

### Example 3: Shador

<figure><img src="/files/RXoU6KxNzql1SJid0T92" alt=""><figcaption></figcaption></figure>

C:\xampp82\htdocs\three\test1.html

```html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script type="text/javascript" src="./libs/three.js"></script>
  <script type="text/javascript" src="./libs/dat.gui.js"></script>
  <title>Threejs</title>
  <style>
    body {
      margin: 0;
      overflow: hidden;
    }
  </style>
</head>
<body>
  <div id="WebGL-output"></div>
  <script type="module">
    function init() {
      // create a scene, that will hold all our elements such as objects, cameras and lights.
      var scene = new THREE.Scene();
      // create a camera, which defines where we're looking at.
      var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
      // create a render and set the size
      var renderer = new THREE.WebGLRenderer();
      renderer.setClearColor(new THREE.Color(0xEEEEEE, 1.0));
      renderer.setSize(window.innerWidth, window.innerHeight);
      renderer.shadowMapEnabled = true;
      // create the ground plane
      var planeGeometry = new THREE.PlaneGeometry(60, 20, 1, 1);
      var planeMaterial = new THREE.MeshLambertMaterial({ color: 0xffffff });
      var plane = new THREE.Mesh(planeGeometry, planeMaterial);
      plane.receiveShadow = true;
      // rotate and position the plane
      plane.rotation.x = -0.5 * Math.PI;
      plane.position.x = 15;
      plane.position.y = 0;
      plane.position.z = 0;
      // add the plane to the scene
      scene.add(plane);
      // create a cube
      var cubeGeometry = new THREE.BoxGeometry(4, 4, 4);
      var cubeMaterial = new THREE.MeshLambertMaterial({ color: 0xff0000 });
      var cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
      cube.castShadow = true;
      // position the cube
      cube.position.x = -4;
      cube.position.y = 3;
      cube.position.z = 0;
      // add the cube to the scene
      scene.add(cube);
      var sphereGeometry = new THREE.SphereGeometry(4, 20, 20);
      var sphereMaterial = new THREE.MeshLambertMaterial({ color: 0x7777ff });
      var sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);
      // position the sphere
      sphere.position.x = 20;
      sphere.position.y = 0;
      sphere.position.z = 2;
      sphere.castShadow = true;
      // add the sphere to the scene
      scene.add(sphere);
      camera.position.x = - 30;
      camera.position.y = 40;
      camera.position.z = 30;
      camera.lookAt(scene.position);
      // add subtle ambient lighting
      var ambientLight = new THREE.AmbientLight(0x0c0c0c);
      scene.add(ambientLight);
      // add spotlight for the shadows
      var spotLight = new THREE.SpotLight(0xffffff);
      spotLight.position.set(-40, 60, -10);
      spotLight.castShadow = true;
      scene.add(spotLight);
      document.getElementById("WebGL-output").appendChild(renderer.domElement);
      var gui = new dat.GUI();
      var controls = new function () {
        this.planRotation = 0;
        this.planX = 30;
        this.planY = 0;
        this.planZ = 0;
        this.cubeX = -4;
        this.cubeY = 3;
        this.cubeZ = 0;
        this.sphereX = 20;
        this.sphereY = 0;
        this.sphereZ = 2;
        this.spotLightX = -40;
        this.spotLightY = 60;
        this.spotLightZ = 10;
      };
      gui.add(controls, 'planRotation', -7, 7);
      gui.add(controls, 'planX', -30, 30);
      gui.add(controls, 'planY', -40, 40);
      gui.add(controls, 'planZ', -30, 30);
      gui.add(controls, 'cubeX', -30, 30);
      gui.add(controls, 'cubeY', -40, 40);
      gui.add(controls, 'cubeZ', -30, 30);
      gui.add(controls, 'sphereX', -20, 20);
      gui.add(controls, 'sphereY', -20, 20);
      gui.add(controls, 'sphereZ', -20, 20);
      gui.add(controls, 'spotLightX', -40, 40);
      gui.add(controls, 'spotLightY', -60, 60);
      gui.add(controls, 'spotLightZ', -10, 10);
      render();
      function render() {
        plane.rotation.x = controls.planRotation;
        plane.position.x = controls.planX;
        plane.position.y = controls.planY;
        plane.position.z = controls.planZ;
        cube.position.x = controls.cubeX;
        cube.position.y = controls.cubeY;
        cube.position.z = controls.cubeZ;
        sphere.position.x = controls.sphereX;
        sphere.position.y = controls.sphereY;
        sphere.position.z = controls.sphereZ;
        spotLight.position.x = controls.spotLightX;
        spotLight.position.y = controls.spotLightY;
        spotLight.position.z = controls.spotLightZ;
        requestAnimationFrame(render);
        renderer.render(scene, camera);
      }
      render();
    }
    init();
  </script>
</body>
</html>
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://javascriptuse.gitbook.io/javascript/advanced/bai-viet-mau-thu-hanh-toa-do-quay-ok.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
