THreeJS 快速入门

THreeJS 快速入门

因为 threejs 迭代太快，所有我们需要去下载特定版本的 threejs 包，然后本地启动，查看 API。
THreejs 源码包

1. 本地快速启动 threejs 的方法 vsCode
2. 学习借鉴

THreejs 引入

<script type="module">
  import * as THREE from "../../three.js-r139/build/three.module.js";
  console.log(THREE);
</script>

创建 3D 场景 Scene并创建一个长方体

1. 你可以 Scene 他理解为虚拟的 3D 场景，用来表示模拟生活中的真实三维场景，或者说三维世界。

import * as THREE from "../../three.js-r139/build/three.module.js"; // 模块化导入要加上 type="module"

// 创建一个虚拟的场景
const scene = new THREE.Scene();

/* 创建一个长方形 */
const geometry = new THREE.BoxGeometry(100, 100, 100); // 创建一个几何图形，几何模型默认在原点
// 材质：几何图形的颜色等
const material = new THREE.MeshBasicMaterial({ color: 0xff00ff }); // 网格基础材质
// 用几何图形和材质合并出来
const mesh = new THREE.Mesh(geometry, material);
// 把几何图形添加到scene中
scene.add(mesh);

/* 光源 */
const light = new THREE.AmbientLight(0xffffff, 0.5); //环境光会均匀的照亮场景中的所有物体。
scene.add(light);
const PointLight = new THREE.PointLight(0xffffff, 0.4); // 点光源（颜色，透明度）
PointLight.position.set(400, 500, 600); // 点光源的位置
scene.add(PointLight);

/* 创建相机 */
const width = 800;
const height = 500;
const camera = new THREE.PerspectiveCamera(45, width / height, 1, 1000); // 创建一个透视投影相机（观看的角度，宽度和高度，近裁 ，远裁）
camera.position.set(200, 200, 200); // 相机的位置 x,y,z
camera.lookAt(0, 0, 0); // 对准目标的位置

/* 创建一个webGl渲染器 */
const renderer = new THREE.WebGLRenderer();
renderer.setSize(width, height); // 渲染的高度和宽度
renderer.render(scene, camera); // 根据场景和相机把图形插入到画布上
document.body.appendChild(renderer.domElement); // 把画布添加到发body中去

阵列队形

    // <script type="importmap">
      {
        "imports": {
          "three": "../../three.js-r139/build/three.module.js"
        }
      }
    // </script>
      import * as THREE from "../../three.js-r139/build/three.module.js";
      import { OrbitControls } from "../../three.js-r139/examples/jsm/controls/OrbitControls.js";

      // 创建一个虚拟的场景
      const scene = new THREE.Scene();
      // 创建一个几何图形
      const geometry = new THREE.BoxGeometry(100, 100, 100); // 几何模型默认在原点
      // 材质：几何图形的颜色等
      const material = new THREE.MeshLambertMaterial({
        color: 0xff00ff, // 材质的颜色
        transparent: true, // 开启透明度
        opacity: 0.5, // 半透明
      });
      // 用几何图形和材质合并出来
      // mesh.position.set(0, 0, 0);
      // mesh.rotateY(Math.PI / 4);
      // 把几何图形添加到scene中
      // scene.add(mesh);
      let mesh;
      for (let o = 0; o < 10; o++) {
        for (let i = 0; i < 10; i++) {
          mesh = new THREE.Mesh(geometry, material);
          mesh.position.set(o * 200, 0, i * 200);
          scene.add(mesh);
        }
      }

      //  光源
      const light = new THREE.AmbientLight(0xffffff, 0.5); //环境光会均匀的照亮场景中的所有物体。
      scene.add(light);
      const PointLight = new THREE.PointLight(0xffffff, 0.4);
      PointLight.position.set(400, 500, 600);
      scene.add(PointLight);

      // 三维坐标系
      const axesHelper = new THREE.AxesHelper(100);
      scene.add(axesHelper);

      // 相机
      const width = window.innerWidth;
      const height = window.innerHeight;
      const camera = new THREE.PerspectiveCamera(45, width / height, 1, 10000); // 创建一个透视投影相机（观看的角度，宽度和高度，近角 ，远角）
      camera.position.set(2000, 2000, 2000); // 相机的位置 x,y,z
      camera.lookAt(1000, 0, 1000); // 对准目标的位置

      // 创建一个webGl渲染器
      const renderer = new THREE.WebGLRenderer();
      renderer.setSize(width, height); // 渲染的高度和宽度
      renderer.render(scene, camera); // 根据场景和相机把图形插入到画布上
      document.body.appendChild(renderer.domElement); // 把画布添加到发body中去
      // document.getElementById("webgl").appendChild(renderer.domElement);

      function render() {
        renderer.render(scene, camera);
        // mesh.rotateY(0.01);
        requestAnimationFrame(render);
      }
      render();

      const controls = new OrbitControls(camera, renderer.domElement);
      controls.target.set(1000, 0, 1000);
      controls.update();
      // controls.addEventListener("change", () => {
      //   renderer.render(scene, camera);
      // });