iT邦幫忙

0

<已解決>如何在HTML調整3D畫布的位置

  • 分享至 

  • xImage

https://ithelp.ithome.com.tw/upload/images/20210503/20133915ImRBWkfrC7.jpg
現在的3D模型已經可以顯示在網頁上
但將3D的程式碼放到DIV裡面卻會跳至最下面
想問有無方法可以控制3D建模的位置?

    <script src="three.js"></script>
    <script type="module" src="GLTFLoader.js"></script>
    <script type="module">
      import { GLTFLoader } from "./GLTFLoader.js";

      var scene = new THREE.Scene();

      var camera = new THREE.PerspectiveCamera(
        15,
        window.innerWidth / window.innerHeight,
        0.01,
        1000
      );
      var renderer = new THREE.WebGLRenderer();
      renderer.setSize(window.innerWidth, window.innerHeight);
      document.body.appendChild(renderer.domElement);

      var loader = new GLTFLoader();

      var obj;
      loader.load("scene.gltf", function (gltf) {
        obj = gltf.scene;
        scene.add(gltf.scene);
      });
      scene.background = new THREE.Color(0x999999);
      var light = new THREE.HemisphereLight(0x999999, 0x000000, 50);
      scene.add(light);
      camera.position.set(0, 2.5, 45);
      function animate() {
        requestAnimationFrame(animate);
        obj.rotation.y += 0.01;
        renderer.render(scene, camera);
      }
      animate();
    </script>
froce iT邦大師 1 級 ‧ 2021-05-04 09:45:55 檢舉
document.body.appendChild(renderer.domElement);

你丟到對的地方就行了,這句讓你都丟到body的最後面。
看不懂的話請你自己了解一下JS的基礎。
把Canvas當做CSS的元素處理,用法跟DIV一樣
0805cyc iT邦新手 4 級 ‧ 2021-05-04 22:38:26 檢舉
謝謝兩位!已解決
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友回答

立即登入回答