vue中使用threejs(一)

一、准备工作

1. 创建基于vite的vue3项目

npm create vue@latest

2. 安装需要的依赖

npm i three
npm i less -D
npm i less-loader -D

二、创建一个threeJS页面

1. 创建threeJS容器

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

2. 引入threeJS依赖

import * as THREE from "three";

3. 创建threeJS三要素(场景，相机，渲染器)

onMounted(() => {
  // 创建场景
  const scene = new THREE.Scene();
  // 添加场景颜色
  scene.background = new THREE.Color("#000");

  // 创建相机
  const camera = new THREE.PerspectiveCamera();
  // 设置相机位置 -- x: 左右 y: 上下 z: 前后
  camera.position.x = 0;
  camera.position.y = 1;
  camera.position.z = 10;

  // 创建渲染器
  const renderer = new THREE.WebGLRenderer();
  // renderer会自己创建一个canva标签，将canva标签添加到准备好的容器中;
  document.getElementById("container").appendChild(renderer.domElement);
  // 调整渲染窗口大小
  renderer.setSize(window.innerWidth, window.innerHeight);

  // end--创建一个动画执行函数
  function animate() {
    // 告诉浏览器希望执行一个动画，并且要求浏览器在下次重绘之前调用指定的回调函数更新动画。
    requestAnimationFrame(animate);
    renderer.render(scene, camera);
  }
  animate();
})

得到一个黑色且是窗口大小的canvas画布

4.创建一个立方体且添加到场景中

  // 创建渲染器
  const renderer = new THREE.WebGLRenderer();
  // renderer会自己创建一个canva标签，将canva标签添加到准备好的容器中;
  document.getElementById("container").appendChild(renderer.domElement);
  // 调整渲染窗口大小
  renderer.setSize(window.innerWidth, window.innerHeight);
   
  // 添加下面代码
  // 创建立方体
  const geometry = new THREE.BoxGeometry();  // 物体类型
  const basicMaterial = new THREE.MeshBasicMaterial({ color: "red" }); // 物体材质
  // 创建网格--将物体放入到网格中
  const mesh = new THREE.Mesh(geometry, basicMaterial);
  // 调整网格位置
  mesh.position.set(0, 1, 0)
  // 添加到场景中
  scene.add(mesh);

• BoxGeometry：立方缓冲几何体；

• MeshBasicMaterial：基础网格材质，一个以简单着色（平面或线框）方式来绘制几何体的材质。

• Mesh：网格

得到一个平面的红色的模型

5.添加轨道控制器--让立方体动起来

需要单独引入轨道控制器js文件

import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";

  // 添加下面代码
  // 创建轨道控制器
  const controls = new OrbitControls(camera, renderer.domElement);

  // end--创建一个动画执行函数
  function animate() {
    // 告诉浏览器希望执行一个动画，并且要求浏览器在下次重绘之前调用指定的回调函数更新动画。
    requestAnimationFrame(animate);
    
    // 添加下面代码
    controls.update();

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

得到下面的效果

三、场景添加纹理贴图和材质添加纹理贴图

        将图片资源放到public目录下

        

  // ++++添加下面代码++++
  // 创建材质纹理
  const materialTexture = new THREE.TextureLoader().load("/textures/02-map.jpg");

  // 创建立方体
  const geometry = new THREE.BoxGeometry();  // 物体类型

  // ++++将color改为map++++
  const basicMaterial = new THREE.MeshBasicMaterial({ map: materialTexture }); // 物体材质

  // 创建网格--将物体放入到网格中
  const mesh = new THREE.Mesh(geometry, basicMaterial);
  // 调整网格位置
  mesh.position.set(0, 1, 0)
  // 添加到场景中
  scene.add(mesh);

  // 创建轨道控制器
  const controls = new OrbitControls(camera, renderer.domElement);
    
   // ++++添加下面代码++++
  // 创建场景纹理--左右上下前后
  const sceneTexture = new THREE.CubeTextureLoader().setPath("/textures/").load([
    "04.jpg", "01.jpg",
    "05.jpg", "02.jpg",
    "06.jpg", "03.jpg"
  ]);
  scene.background = sceneTexture;

• TextureLoader: 加载texture的一个类。 内部使用ImageLoader来加载文件。就是可以给物体加载图片；

• CubeTextureLoader：加载CubeTexture的一个类。 内部使用ImageLoader来加载文件。就是添加背景图的意思;

• MeshBasicMaterial

        map: 颜色贴图

        color: 材质的颜色，默认值为白色 (0xffffff)。

效果展示：