three.js基础搭建第一个基础three

首先要了解必要的条件！

一、建立场景

必须有场景才能渲染出来

二、配置透视相机

相当于你的眼睛，有了相机才能看见

三、配置渲染器

有了渲染器，才会渲染到界面

四、创建物体

渲染的物体

五、设置网格

渲染的物体地面

六、配置渲染动画

循环渲染持续更新

<script type="module">
      import * as THREE from "https://unpkg.com/three/build/three.module.js";

      // Our Javascript will go here.
      const scene = new THREE.Scene(); //建立了场景
      const camera = new THREE.PerspectiveCamera(
        75,
        window.innerWidth / window.innerHeight,
        0.1,
        1000
      );
      // 使用透视相机
      // 第一个参数视野角度 - 显示器上看到的场景 范围
      // 第二个参数长宽比 - 某物体的宽度/高 比例大小
      // 第三个参数近截面 - 物体的近截面比摄像机的近界面近的时候这些部分将不会被渲染到场景中
      // 第四个参数远截面 - 物体的远截面同理 视距
      // 透视相机介绍结束

      //渲染器 通过更改渲染器类型解决兼容性问题
      const renderer = new THREE.WebGLRenderer();
      //渲染器的尺寸 要见到的尺寸
      //可以通过setSize 设置想要设置的现实比例大小window.innerWidth/2
      //设置较低分辨率第三个参数 updateStyle 设置为false
      //setSize(window.innerWidth/2, window.innerHeight/2, false)
      renderer.setSize(window.innerWidth, window.innerHeight);
      // renderer渲染的dom元素添加到我们的HTML中
      document.body.appendChild(renderer.domElement);

      // 创建立方体
      // 创建时我们需要一个立方体对象BoxGeometry
      // 这个对象包含了立方体中所有的顶点 和 面

      const geometry = new THREE.BoxGeometry(2, 2, 2);
      // 设置立方体的材质(MeshBasicMaterial) 和 颜色(十六进制)
      const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
      // 设置网格 (Mesh) 网格包含 几何体  + 几何体的颜色和材质 对象
      const cube = new THREE.Mesh(geometry, material);
      // 默认情况下，当我们调用scene.add的时候，物体将会被添加到到（0,0，0）坐标 会个摄像机重合
      scene.add(cube);//添加到场景中
      //所以为了解决这个问题 我们将摄像机稍微向外移动一些即可
      camera.position.z = 5;

      // 创建完成之后不会渲染
      // 需要使用渲染循环(render loop) 或者 动画循环(animate loop) 进行渲染
      function animate() {
        	
        requestAnimationFrame(animate);//发起动画请求 
        cube.rotation.x += 0.01;
        cube.rotation.y += 0.01;
        renderer.render(scene, camera);
      }
      animate(); //写一个立即执行函数

      // 让立方体旋转起来
      // 这段代码每帧都会执行正常情况下是60次/秒
    </script>