HTML5画布WebGL Three.js球体

最新推荐文章于 2024-05-20 09:16:15 发布

秦月梅雨中不漫步

最新推荐文章于 2024-05-20 09:16:15 发布

阅读量3.4k

点赞数

分类专栏： HTML5画布WebGL 文章标签： HTML5画布WebGL

本文链接：https://blog.csdn.net/qinyuemeiyy/article/details/18048475

版权

创建一个WebGL Three.js文件,我们可以实例化一个SphereGeometry对象通过定义它的半径,segmentsWidth,segmentsHeight参数。增加segmentsWidth和segmentsHeight将产生一个更加完美的球体但可能会降低浏览器的渲染性能。减少segmentsWidth segmentsHeight将产生一个不太完美的球体和可以帮助渲染性能。

<!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">
      // 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.z = 500;
 
      // scene

最低0.47元/天解锁文章

秦月梅雨中不漫步

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML5画布WebGL Three.js球体

创建一个WebGL Three.js文件,我们可以实例化一个SphereGeometry对象通过定义它的半径,segmentsWidth,segmentsHeight参数。增加segmentsWidth和segmentsHeight将产生一个更加完美的球体但可能会降低浏览器的渲染性能。减少segmentsWidth segmentsHeight将产生一个不太完美的球体和可以帮助渲染性能。
复制链接

扫一扫