three.js基础之加载外部模型、纹理贴图、投射阴影、几何体颜色属性、面模型属性

初始化共用方法

<canvas id="model"></canvas>
<canvas id="texture"></canvas>
<canvas id="shadow"></canvas>
<canvas id="color"></canvas>
<script type="importmap">
  {
    "imports": {
      "three": "./js/build/three.module.js",
      "three/addons/": "./js/jsm/"
    }
  }
</script>
<script type="module">
  import * as THREE from "three";
  import { GLTFLoader } from "three/addons/loaders/GLTFLoader.js";
  import { initRenderer, initPerspectiveCamera, initAmbientLight, initSpotLight, addPlane, addBox, addSphere } from "./init.js";

  // gltf文件就是通过JSON的键值对方式来表示模型信息
  // glb就是gltf格式的二进制文件，glb文件相对gltf文件体积更小

  function init(domId, callback) {
    const width = 300;
    const height = 200;
    const renderer = initRenderer(domId, width, height);

    const scene = new THREE.Scene();

    const camera = initPerspectiveCamera({ aspect: width / height });
    scene.add(camera);

    const ambientLight = initAmbientLight();
    scene.add(ambientLight);

    const spotLight = initSpotLight();
    scene.add(spotLight);

    const axesHelper = new THREE.AxesHelper(150);
    scene.add(axesHelper);

    callback(scene);

    function animate() {
      requestAnimationFrame(animate);
      renderer.render(scene, camera);
    }
    animate();
  }
</script>

外部模型

 init("model", (scene) => {
    // 加载模型
    const loader = new GLTFLoader();
    loader.load(
      "./models/Flower.glb",
      function (gltf) {
        console.log("gltf文件返回的对象结构", gltf);
        console.log("gltf对象场景", gltf.scene);
        gltf.scene.position.set(0, 0, 0);
        gltf.scene.scale.set(50, 50, 50);
        scene.add(gltf.scene);

        //查看模型尺寸
        const box = new THREE.Box3().setFromObject(gltf.scene);
        const size = box.getSize(new THREE.Vector3());
        console.log(size);
      },
      function (xhr) {
        const percent = xhr.loaded / xhr.total;
        console.log("加载进度" + percent);
      }
    );
  });

纹理贴图

init("texture", (scene) => {
    //纹理贴图加载器
    const texLoader = new THREE.TextureLoader();
    //纹理贴图
    texLoader.load("./images/FloorsCheckerboard_S_Diffuse.jpg", (texture) => {
      //设置为SRGB颜色空间
      texture.colorSpace = THREE.SRGBColorSpace;
      const material = new THREE.MeshBasicMaterial({
        map: texture, //材质的颜色贴图属性
        side: THREE.DoubleSide,
      });
      const geometry = new THREE.PlaneGeometry(30, 20);
      const mesh = new THREE.Mesh(geometry, material);
      scene.add(mesh);
    });
  });

投射阴影

init("shadow", (scene) => {
  const plane = addPlane({ width: 50, height: 20 });
  scene.add(plane);

  const cube = addBox({ color: 0xff0000 });
  cube.position.set(-5, 5, 0);
  scene.add(cube);

  const sphere = addSphere({ color: 0x7777ff });
  sphere.position.set(10, 5, 0);
  scene.add(sphere);
});

几何体颜色属性

init("color", (scene) => {
  const geometry = new THREE.BufferGeometry();
  const vertices = new Float32Array([0, 0, 0, 5, 0, 0, 0, 5, 0]);
  geometry.attributes.position = new THREE.BufferAttribute(vertices, 3);
  const colors = new Float32Array([1, 0, 0, 0, 0, 1, 0, 1, 0]);
  // 设置几何体attributes属性的颜色color属性,3个为一组,表示一个顶点的颜色数据RGB
  geometry.attributes.color = new THREE.BufferAttribute(colors, 3);
  const material = new THREE.MeshBasicMaterial({
    vertexColors: true, //默认false，设置为true表示使用顶点颜色渲染
    side: THREE.DoubleSide,
  });
  const mesh = new THREE.Mesh(geometry, material);
  scene.add(mesh);

  const geometry2 = new THREE.BufferGeometry();
  const curve2 = new THREE.CatmullRomCurve3([new THREE.Vector3(-5, 2, 9), new THREE.Vector3(-1, 4, 4), new THREE.Vector3(0, 0, 0), new THREE.Vector3(6, -6, 0), new THREE.Vector3(7, 0, 8)]);
  const pointsArr2 = curve2.getSpacedPoints(100);
  geometry2.setFromPoints(pointsArr2);
  const pos = geometry2.attributes.position;
  const count = pos.count;
  // 计算每个顶点的颜色值
  const colorsArr = [];
  for (let i = 0; i < count; i++) {
    const percent = i / count;
    colorsArr.push(percent, 0, 1 - percent); //蓝色到红色渐变色
  }
  const colors2 = new Float32Array(colorsArr);
  geometry2.attributes.color = new THREE.BufferAttribute(colors2, 3);
  const material2 = new THREE.LineBasicMaterial({
    vertexColors: true, //使用顶点颜色渲染
  });
  const line = new THREE.Line(geometry2, material2);
  scene.add(line);

  const colorsArr3 = [];
  // 根据顶点距离起点远近进行颜色插值计算
  const c1 = new THREE.Color(0x00ffff); //曲线起点颜色
  const c2 = new THREE.Color(0xffff00); //曲线结束点颜色
  for (let i = 0; i < count; i++) {
    const percent = i / count;
    const c = c1.clone().lerp(c2, percent); //颜色插值计算
    colorsArr3.push(c.r, c.g, c.b);
  }
  const colors3 = new Float32Array(colorsArr3); //类型数组创建顶点颜色color数据
  const geometry3 = geometry2.clone();
  geometry3.attributes.color = new THREE.BufferAttribute(colors3, 3);
  geometry3.translate(5, 2, 1);
  const line3 = new THREE.Line(geometry3, material2);
  scene.add(line3);
});

面模型属性

<canvas id="mesh-properties"></canvas>
<script type="importmap">
  {
    "imports": {
      "three": "./js/build/three.module.js",
      "three/addons/": "./js/jsm/"
    }
  }
</script>
<script type="module">
import * as THREE from "three";
import { GUI } from "three/addons/libs/lil-gui.module.min.js";
import { initRenderer, initPerspectiveCamera, initAmbientLight, addPlane, addBox } from "./init.js";

const gui = new GUI();

const renderer = initRenderer("mesh-properties");

const scene = new THREE.Scene();

const camera = initPerspectiveCamera();
scene.add(camera);

const ambientLight = initAmbientLight();
scene.add(ambientLight);

const axesHelper = new THREE.AxesHelper(150);
scene.add(axesHelper);

const plane = addPlane();
scene.add(plane);

const cube = addBox({ color: 0x44ff44 });
cube.position.set(0, 4, 0);
scene.add(cube);

const controls = setupControls();

render();

function render() {
  cube.visible = controls.visible;

  cube.rotation.x = controls.rotationX;
  cube.rotation.y = controls.rotationY;
  cube.rotation.z = controls.rotationZ;

  cube.position.x = controls.translateX;
  cube.position.y = controls.translateY;
  cube.position.z = controls.translateZ;

  cube.scale.set(controls.scaleX, controls.scaleY, controls.scaleZ);

  requestAnimationFrame(render);
  renderer.render(scene, camera);
}

function setupControls() {
  const controls = new (function () {
    this.scaleX = 1;
    this.scaleY = 1;
    this.scaleZ = 1;

    this.positionX = 0;
    this.positionY = 4;
    this.positionZ = 0;

    this.rotationX = 0;
    this.rotationY = 0;
    this.rotationZ = 0;
    this.scale = 1;

    this.translateX = 0;
    this.translateY = 0;
    this.translateZ = 0;

    this.visible = true;

    this.translate = function () {
      cube.translateX(controls.translateX);
      cube.translateY(controls.translateY);
      cube.translateZ(controls.translateZ);

      controls.positionX = cube.position.x;
      controls.positionY = cube.position.y;
      controls.positionZ = cube.position.z;
    };
  })();

  const guiScale = gui.addFolder("scale");
  guiScale.add(controls, "scaleX", 0, 5);
  guiScale.add(controls, "scaleY", 0, 5);
  guiScale.add(controls, "scaleZ", 0, 5);

  const guiPosition = gui.addFolder("position");
  const contX = guiPosition.add(controls, "positionX", -10, 10);
  const contY = guiPosition.add(controls, "positionY", -4, 20);
  const contZ = guiPosition.add(controls, "positionZ", -10, 10);

  contX.listen();
  contX.onChange(function (value) {
    cube.position.x = controls.positionX;
  });

  contY.listen();
  contY.onChange(function (value) {
    cube.position.y = controls.positionY;
  });

  contZ.listen();
  contZ.onChange(function (value) {
    cube.position.z = controls.positionZ;
  });

  const guiRotation = gui.addFolder("rotation");
  guiRotation.add(controls, "rotationX", -4, 4);
  guiRotation.add(controls, "rotationY", -4, 4);
  guiRotation.add(controls, "rotationZ", -4, 4);

  const guiTranslate = gui.addFolder("translate");
  guiTranslate.add(controls, "translateX", -10, 10);
  guiTranslate.add(controls, "translateY", -10, 10);
  guiTranslate.add(controls, "translateZ", -10, 10);

  gui.add(controls, "visible");

  return controls;
}
</script>