HTML5画布知识：在Three.js文件实现WebGL Plane

最新推荐文章于 2025-06-13 23:36:20 发布

刘佳悦谈谈编程

最新推荐文章于 2025-06-13 23:36:20 发布

阅读量871

点赞数

CC 4.0 BY-SA版权

分类专栏：在Three.js文件实现WebGL 文章标签：在Three.js文件实现WebGL

本文链接：https://blog.youkuaiyun.com/liujiayues/article/details/18079607

在Three.js文件实现WebGL 专栏收录该内容

1 篇文章

订阅专栏

本文将介绍如何在Three.js中利用PlaneGeometry对象创建一个WebGL平面对象，详细阐述了如何设置其在x轴和y轴的宽度与高度。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

创建一个WebGL Plane Three.js,我们可以实例化一个PlaneGeometry对象并定义其宽度沿x轴及其高度沿y轴。

<!DOCTYPE HTML>
<html>
  <head>
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }
    </style>
  </head>
  <body>
    <div id="container"></div>
    <script src="http://www.html5canvastutorials.com/libraries/three.min.js"></script>
    <script defer="defer">
      // revolutions per second
      var angularSpeed = 0.2; 
      var lastTime = 0;
 
      // this function is executed on each animation frame
      function animate(){
        // update
        var time = (new Date()).getTime();
        var timeDiff = time - lastTime;
        var angleChange = angularSpeed * timeDiff * 2 * Math.PI / 1000;
        plane.rotation.z += angleChange;
        lastTime = time;
 
        // render
        renderer.render(scene, camera);
 
        // request new frame
        requestAnimationFrame(function(){
            animate();
        });
      }

      // renderer
      var renderer = new THREE.WebGLRenderer();
      renderer.setSize(window.innerWidth, window.innerHeight);
      document.body.appendChild(renderer.domElement);
 
      // camera
      var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000);
      camera.position.y = -450;
      camera.position.z = 400;
      camera.rotation.x = 45 * (Math.PI / 180);
 
      // scene
      var scene = new THREE.Scene();
 
      // plane
      var plane = new THREE.Mesh(new THREE.PlaneGeometry(300, 300), new THREE.MeshNormalMaterial());
      plane.overdraw = true;
      scene.add(plane);
 
      // start animation
      animate();
    </script>
  </body>
</html>