<html>  <head>    <meta charset="utf-8">    <title>My first three.js app</title>    <style>      body { margin: 0;       padding: 0s;}</style>  </head>  <body>    <script type="module">      import * as THREE from 'https://unpkg.com/three/build/three.module.js';
      //1、建立场景      const scene = new THREE.Scene();      //2、创建相机（透视摄像机）      /**       * 第一个参数是视野角度（FOV）。视野角度就是无论在什么时候，你所能在显示器上看到的场景的范围       * 第二个参数是长宽比（aspect ratio）。也就是你用一个物体的宽除以它的高度的值。比如说，当你在一个宽屏电视上播放老电影时，可以看到图像仿佛是被压扁的。       * 接下来的两个参数是近截面（near）和远截面（far）。当物体某些部分比摄像机的远截面远或者比近截面近的时候，该这些部分将不会被渲染到场景中       * */      const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
      //3、创建渲染器      const renderer = new THREE.WebGLRenderer();
      //3.1、设置渲染器大小      /**       *        * 如果希望保持你的应用程序的尺寸，但是以较低的分辨率来渲染，你可以在调用setSize时，       * 将updateStyle（第三个参数）设为false。例如，假设你的<canvas> 标签现在已经具有了100%的宽和高，       * 调用setSize(window.innerWidth/2, window.innerHeight/2, false)将使得你的应用程序以一半的分辨率来进行渲染。       * */      //renderer.setSize( window.innerWidth/2, window.innerHeight/2,false );      renderer.setSize( window.innerWidth, window.innerHeight );      /**       *        * 3.2将renderer（渲染器）的dom元素（renderer.domElement）添加到我们的HTML文档中。这就是渲染器用来显示场景给我们看的<canvas>元素       * */      document.body.appendChild( renderer.domElement );

      //4、创建一个立方体      /**       *        * 创建一个BoxGeometry（立方体）对象. 这个对象包含了一个立方体中所有的顶点（vertices）和面（faces）       * */      const geometry = new THREE.BoxGeometry( 1, 1, 1 );
      //5、创建一个材质，简单设置颜色为白色
      const material = new THREE.MeshBasicMaterial( { color: 0xffffff } );      //6、创建一个Mesh（网格）：      /**       * 。网格包含一个几何体以及作用在此几何体上的材质，我们可以直接将网格对象放入到我们的场景中，并让它在场景中自由移动       * */      const cube = new THREE.Mesh( geometry, material );      //将几何体添加到场景中
      //7、将网格添加到场景中      /**       *        * 调用scene.add()的时候，物体将会被添加到(0,0,0)坐标。但将使得摄像机和立方体彼此在一起。       * 为了防止这种情况的发生，我们只需要将摄像机稍微向外移动一些即可       * */      scene.add( cube );      camera.position.z = 5;//将摄像机稍微向外Z轴移动      //8、渲染场景和相机      renderer.render( scene, camera );      //9、创建一个动画      /**       * 创建了一个使渲染器能够在每次屏幕刷新时对场景进行绘制的循环（在大多数屏幕上，刷新率一般是60次/秒）。       * 如果你是一个浏览器游戏开发的新手，你或许会说“为什么我们不直接用setInterval来实现刷新的功能呢？”       * 当然啦，我们的确可以用setInterval，但是，requestAnimationFrame有很多的优点：       * 最重要的一点或许就是当用户切换到其它的标签页时，它会暂停，因此不会浪费用户宝贵的处理器资源，也不会损耗电池的使用寿命。       * */      function animate() {        requestAnimationFrame( animate );
        cube.rotation.x += 0.01;        cube.rotation.y += 0.01;
        renderer.render( scene, camera );      }
      animate();</script>  </body></html>