Three.js-实现加载图片并旋转_Javascript

1.实现效果

2. 实现步骤

2.1创建场景

const scene = new three.scene();

2.2添加相机

说明：

fov（视场角）：视场角决定了相机的视野范围，即相机可以看到的角度范围。较大的视场角表示更广阔的视野，但可能会导致失真。一般建议设置在 45° 到 90° 之间。
aspect（纵横比）：纵横比表示了渲染区域的宽度和高度之比。通常设置为渲染区域的宽度除以高度，以保持图像不变形。
near（近裁剪面）：近裁剪面决定了相机能够看到的最近的物体的距离。通常设置为一个正数，表示相机距离近裁剪面的距离。
far（远裁剪面）：远裁剪面决定了相机能够看到的最远的物体的距离。通常设置为一个正数，表示相机距离远裁剪面的距离。

const camera = new three.perspectivecamera(75, window.innerwidth / window.innerheight, 0.1, 1000);

2.3添加网格

说明：创建几何图形和图形的材质（几何图形必须要材质）。下面创建了矩阵图形。

const texturematerial = new three.meshbasicmaterial({map: texture});
const geometry = new three.planegeometry(1, 1);
mesh = new three.mesh(geometry, texturematerial);

2.4渲染动画

const renderer = new three.webglrenderer({antialias: false});
renderer.setsize(width, height);

2.5放入dom结构

  document.queryselector("#renderbox").appendchild(renderer.domelement);

3.源代码

<template>
  <div id="renderbox"></div>
</template>

<script setup>
import * as three from 'three';
import {onmounted} from "vue";
// 浏览器可操作的宽度，高度
const width = window.innerwidth, height = window.innerheight;

const camera = new three.perspectivecamera(75, window.innerwidth / window.innerheight, 0.1, 1000);

camera.position.z = 1;
const scene = new three.scene();
const geometry = new three.planegeometry(1, 1);
let mesh;
const textureloader = new three.textureloader().load(
    "/data/map/scene-bg2.png",
    function (texture) {
      // 纹理加载完成后创建材质,map:texture实际就是贴在上面的
      const texturematerial = new three.meshbasicmaterial({map: texture});
      // 创建一个网格对象
      mesh = new three.mesh(geometry, texturematerial);
      // 将网格对象添加到场景中
      scene.add(mesh);
    }
);
const renderer = new three.webglrenderer({antialias: false});
renderer.setsize(width, height);
renderer.setanimationloop(animation);

function animation(time) {

  if (mesh) {
    // 每一帧增加网格对象的旋转角度，实现 360 度旋转效果
    mesh.rotateonaxis(new three.vector3(0, 0, 1), 0.02);

  }

  // 渲染图形
  renderer.render(scene, camera);

}

const init = () => {
  document.queryselector("#renderbox").appendchild(renderer.domelement);
}

onmounted(() => {
  init()
})
</script>

<style>

</style>