526互联

threejs画多个圆柱，并进行贴图

发布时间 2023-07-21 15:14:50作者: Z朱子泉

其他文件和之前一样，只在main.vue内进行改动

Vue three.js基础四大组件实现三维效果：Vue three.js基础四大组件实现三维效果（二）多个几何体 - 代码先锋网 (codeleading.com)

画圆柱步骤：

1.常规操作

创建场景，灯光，摄像机，渲染器

2.调用几何体画圆柱，设置参数

let geometry = new THREE.CylinderGeometry(0.5, 0.5, 1, 32); 参数分别为：顶部半径、底部半径、高度、圆周细分数

3.调用材质，设置颜色

let material = new THREE.MeshPhongMaterial({ color: 0x00ff00 }); 材质 MeshBasicMaterial不受灯光影响

4.利用网格把几何体和材质结合起来

let cylinder = new THREE.Mesh(geometry, material); 网格

5.依次把3个画好，设置他们的位置，x：左右，y：上下

cylinder2.position.y = 1.1; cylinder3.position.y = -1.1;

6.将网格加到场景去

​ scren.add(cylinder);

​ scren.add(cylinder2);

​ scren.add(cylinder3);

贴图步骤：

为了给圆柱体添加纹理贴图，我们需要加载纹理图像，并将其应用到圆柱体的材质上。在这里，我将演示如何加载一张图片纹理，并将其应用到圆柱体上。首先，确保您有一张纹理图像，可以通过以下方式加载纹理图像：

1.在 src/assets 文件夹中创建一个名为 texture.jpg 的图片文件，并将您的纹理图像保存在其中。

image-20230721114616819

2.先导入贴图import texture1 from "@/assets/texture1.jpg";

3.使用 three.js 提供的 TextureLoader 来加载纹理图像。

4.调用材质，把图片贴上去

let material = new THREE.MeshPhongMaterial({ map: new THREE.TextureLoader().load(texture1) });

<template>
  <div id="three" style="height: 100%; width: 100%"></div>
</template>
  
  <script>
import * as THREE from "three";

//引入轨道控制器
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";

// 导入贴图
import texture1 from "@/assets/texture1.jpg";
import texture2 from "@/assets/texture2.jpg";
import texture3 from "@/assets/texture3.jpg";

export default {
  name: "HelloWorld",
  data() {
    return {};
  },
  mounted() {
    this.qwe();
  },
  methods: {
    qwe() {
      const conter = document.getElementById("three"); // 容器元素
      console.log(conter.clientWidth);
      let scren = new THREE.Scene(); // 场景
      
      //灯光
      {
        const color = 0xffffff;
        const intensity = 1;
        const light = new THREE.DirectionalLight(color, intensity);
        light.position.set(2, 2, 2); //x,y,z
        scren.add(light);
      }
      
      let camera = new THREE.PerspectiveCamera(
        45,
        conter.clientWidth / conter.clientHeight,
        1,
        1000
      ); //透视相机

      let render = new THREE.WebGL1Renderer(); //渲染器
      render.setClearColor("#f60");
      render.setSize(conter.clientWidth, conter.clientHeight); //渲染器大小
      conter.appendChild(render.domElement); //渲染结果加载到容器里面
      
      let geometry = new THREE.CylinderGeometry(0.5, 0.5, 1, 32); //参数分别为：顶部半径、底部半径、高度、圆周细分数
      let material = new THREE.MeshPhongMaterial({ map: new THREE.TextureLoader().load(texture1) }); //材质 MeshBasicMaterial不受灯光影响
      let cylinder = new THREE.Mesh(geometry, material); //网格

      let geometry2 = new THREE.CylinderGeometry(0.5, 0.5, 1, 32); //参数分别为：顶部半径、底部半径、高度、圆周细分数
      let material2 = new THREE.MeshPhongMaterial({ map: new THREE.TextureLoader().load(texture2)}); //材质 MeshBasicMaterial不受灯光影响
      let cylinder2 = new THREE.Mesh(geometry2, material2); //网格

      let geometry3 = new THREE.CylinderGeometry(0.5, 0.5, 1, 32); //参数分别为：顶部半径、底部半径、高度、圆周细分数
      let material3 = new THREE.MeshPhongMaterial({  map: new THREE.TextureLoader().load(texture3) }); //材质 MeshBasicMaterial不受灯光影响
      let cylinder3 = new THREE.Mesh(geometry3, material3); //网格
      
      cylinder2.position.y = 1.1;
      cylinder3.position.y = -1.1;
      scren.add(cylinder); //将网格加到场景去
      scren.add(cylinder2);
      scren.add(cylinder3);
      camera.position.z = 10; //改变相机位置

      // 创建轨道控制器
      let controls = new OrbitControls(camera, render.domElement);

      function renders() {
        requestAnimationFrame(renders);
        controls.update();// 更新轨道控制器
        render.render(scren, camera);
      }

      renders();
    },
  },
};
</script>

运行结果:

image-20230721112500599