使用vue学习three.js动态demo之通过网格对象Mesh的属性实现立方体的缩放、移动、旋转、平移、隐藏

最新推荐文章于 2024-05-02 20:56:23 发布
最新推荐文章于 2024-05-02 20:56:23 发布
阅读量1.6k 收藏
点赞数
分类专栏： Threejs
原文链接：https://blog.csdn.net/qw8704149/article/details/108230845
版权

Mesh对象的缩放、移动、旋转、平移、隐藏

一、网格对象属性和方法介绍

1.缩放-scale
2.位置-position
3.旋转-rotation
4.平移-translateX()、translateY()、translateZ()
5.可见-visible
二、通过demo深入理解Mesh属性和方法

一、网格对象属性和方法介绍

我们知道创建一个网格对象需要一个几何体以及一个或多个材质对象，创建好网格对象就可以把它添加到场景中了，但我们怎么实现网格对象的缩放、移动，旋转和平移操作呢，接下来给大家介绍一下它的属性

1.缩放-scale

属性scale表示网格对象的缩放比例，可以对x轴、y轴、z轴单个进行缩放也可以多个同时缩放，由于scale属性的类型是Vector3，所以可以通过三种方式改变scale的值

直接通过scale属性的x、y、z属性设置

mesh.scale.x = x
mesh.scale.y = y
mesh.scale.z = z

通过scale属性的set方法设置

mesh.scale.set(x,y,z)

通过创建THREE.Vector对象赋给scale属性

mesh.scale = new THREE.Vector3(x,y,z)

2.位置-position

Mesh对象的属性position表示网格对象在立体空间中的位置，主要作用是来确定mesh对象在立体空间中的位置，可以分别对x轴、y轴、z轴进行单个设置或者多个设置，由于position属性的类型也是Vector3，同样可以通过三种方式设置位置

直接通过position属性的x、y、z属性设置

mesh.position.x = x
mesh.position.y = y
mesh.position.z = z

通过position属性的set方法设置

mesh.position.set(x,y,z)

通过创建THREE.Vector对象赋给position属性

mesh.position = new THREE.Vector3(x,y,z)

3.旋转-rotation

mesh对象的rotation属性是用来控制旋转角度的，同样可以只绕x轴、y轴、z轴旋转也可绕多个轴组合旋转，设置mesh对象的旋转角度的方式有两种

直接通过rotation属性的x、y、z属性设置

mesh.rotation.x = x
mesh.rotation.y = y
mesh.rotation.z = z

通过rotation属性的set方法设置

mesh.rotation.set(x,y,z)

4.平移-translateX()、translateY()、translateZ()

mesh对象没有translate属性，只提供了沿x轴、y轴、z轴平移的三个方法，使用起来非常简单，只需要传入要平移的距离

mesh.translateX(distance)
mesh.translateY(distance)
mesh.translateZ(distance)

5.可见-visible

属性visible用来控制mesh对象是否显示，该值为布尔值，true代表显示，false表示隐藏

//显示mesh对象
mesh.visible = true;
//隐藏mesh对象
mesh.visible = false;

二、通过demo深入理解Mesh属性和方法

<template>
  <div>
    <div id="container"></div>
    <div class="controls-box">
      <el-collapse accordion>
        <div>
          <el-collapse-item :title="item.name" v-for="(item) in properties" :key="item.name">
            <el-col>
              <el-col :span="5">
                <span class="vertice-span">{{item.properties.nameX}}</span>
              </el-col>
              <el-col :span="16">
                <el-slider v-model="item.value.x" :min="item.name=='比例-scale'?0:-10" :max="10" :format-tooltip="formatTooltip"></el-slider>
              </el-col>
              <el-col :span="3">
                <span class="vertice-span">{{item.value.x}}</span>
              </el-col>
            </el-col>
            <el-col>
              <el-col :span="5">
                <span class="vertice-span">{{item.properties.nameY}}</span>
              </el-col>
              <el-col :span="16">
                <el-slider v-model="item.value.y" :min="item.name=='比例-scale'?0:-10" :max="10" :format-tooltip="formatTooltip"></el-slider>
              </el-col>
              <el-col :span="3">
                <span class="vertice-span">{{item.value.y}}</span>
              </el-col>
            </el-col>
            <el-col>
              <el-col :span="5">
                <span class="vertice-span">{{item.properties.nameZ}}</span>
              </el-col>
              <el-col :span="16">
                <el-slider v-model="item.value.z" :min="item.name=='比例-scale'?0:-10" :max="10" :format-tooltip="formatTooltip"></el-slider>
              </el-col>
              <el-col :span="3">
                <span class="vertice-span">{{item.value.z}}</span>
              </el-col>
            </el-col>

          </el-collapse-item>
        </div>
      </el-collapse>
      <el-checkbox v-model="cubeVisible">是否可见</el-checkbox>
    </div>
  </div>
</template>

<script>
import * as THREE from 'three'
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'
export default {
  data () {
    return {
      properties: {
        scale: {
          name: '比例-scale',
          properties: {
            nameX: 'scaleX',
            nameY: 'scaleY',
            nameZ: 'scaleZ'
          },
          value: {
            x: 1,
            y: 1,
            z: 1
          }
        },
        position: {
          name: '位置-position',
          properties: {
            nameX: 'positionX',
            nameY: 'positionY',
            nameZ: 'positionZ'
          },
          value: {
            x: 0,
            y: 4,
            z: 0
          }
        },
        rotation: {
          name: '旋转-rotation',
          properties: {
            nameX: 'rotationX',
            nameY: 'rotationY',
            nameZ: 'rotationZ'
          },
          value: {
            x: 0,
            y: 0,
            z: 0
          }
        },
        translate: {
          name: '平移-translate',
          properties: {
            nameX: 'translateX',
            nameY: 'translateY',
            nameZ: 'translateZ'
          },
          value: {
            x: 0,
            y: 0,
            z: 0
          }
        }
      },
      cubeVisible: true,
      cube: null,
      camera: null,
      scene: null,
      renderer: null,
      controls: null
    }
  },
  mounted () {
    this.init()
  },
  methods: {
    formatTooltip (val) {
      return val
    },
    // 初始化
    init () {
      this.createScene() // 创建场景
      this.createMesh() // 创建网格模型
      this.createCube() // 创建方块
      this.createLight() // 创建光源
      this.createCamera() // 创建相机
      this.createRender() // 创建渲染器
      this.createControls() // 创建控件对象
      this.render() // 渲染
    },
    // 创建场景
    createScene () {
      this.scene = new THREE.Scene()
    },
    // 创建网格模型
    createMesh () {
      const planeGeometry = new THREE.PlaneGeometry(60, 40, 1, 1) // 创建一个平面对象PlaneGeometry
      const planeMaterial = new THREE.MeshLambertMaterial({
        color: 0xffffff
      }) // 材质对象Material
      const plane = new THREE.Mesh(planeGeometry, planeMaterial)
      plane.receiveShadow = true

      // 设置平面位置
      plane.rotation.x = -0.5 * Math.PI
      plane.position.set(0, 0, 0)

      // 平面对象添加到场景中
      this.scene.add(plane)
    },
    // 创建光源
    createLight () {
      // 添加聚光灯
      const spotLight = new THREE.SpotLight(0xffffff)
      spotLight.position.set(-40, 60, 20)
      spotLight.castShadow = true
      this.scene.add(spotLight) // 聚光灯添加到场景中
      // 环境光
      const ambientLight = new THREE.AmbientLight(0x0c0c0c)
      this.scene.add(ambientLight)
    },
    // 创建相机
    createCamera () {
      const element = document.getElementById('container')
      const width = element.clientWidth // 窗口宽度
      const height = element.clientHeight // 窗口高度
      const k = width / height // 窗口宽高比
      // PerspectiveCamera( fov, aspect, near, far )
      this.camera = new THREE.PerspectiveCamera(45, k, 0.1, 1000)

      this.camera.position.set(-30, 40, 30) // 设置相机位置
      this.camera.lookAt(new THREE.Vector3(5, 0, 0)) // 设置相机方向
      this.scene.add(this.camera)
    },
    // 创建渲染器
    createRender () {
      const element = document.getElementById('container')
      this.renderer = new THREE.WebGLRenderer()
      this.renderer.setSize(element.clientWidth, element.clientHeight) // 设置渲染区域尺寸
      this.renderer.setClearColor(0x3f3f3f, 1) // 设置背景颜色
      element.appendChild(this.renderer.domElement)
    },
    // 更新方块的属性
    updateCubeProperties () {
      // 更新缩放属性方式1
      /* this.cube.scale.x = this.properties.scale.value.x
      this.cube.scale.y = this.properties.scale.value.y
      this.cube.scale.z = this.properties.scale.value.z */

      // 更新缩放属性方式2
      /* this.cube.scale.set(
        this.properties.scale.value.x,
        this.properties.scale.value.y,
        this.properties.scale.value.z
      ) */

      // 更新缩放属性方式3
      this.cube.scale = new THREE.Vector3(
        this.properties.scale.value.x,
        this.properties.scale.value.y,
        this.properties.scale.value.z
      )

      // 更新位置属性
      this.cube.position.x = this.properties.position.value.x
      this.cube.position.y = this.properties.position.value.y
      this.cube.position.z = this.properties.position.value.z

      // 更新旋转属性
      /* this.cube.rotation.x = this.properties.rotation.value.x
      this.cube.rotation.y = this.properties.rotation.value.y
      this.cube.rotation.z = this.properties.rotation.value.z */
      this.cube.rotation.set(
        this.properties.rotation.value.x,
        this.properties.rotation.value.y,
        this.properties.rotation.value.z
      )

      // 更新平移属性
      this.cube.translateX(this.properties.translate.value.x)
      this.cube.translateY(this.properties.translate.value.y)
      this.cube.translateZ(this.properties.translate.value.z)

      this.cube.visible = this.cubeVisible
    },
    createCube () {
      const material = new THREE.MeshLambertMaterial({ color: 0x44ff44 }) // 创建材质对象material
      const geom = new THREE.BoxGeometry(5, 4, 3) // 创建几何对象geom
      this.cube = new THREE.Mesh(geom, material) // 创建网格对象cube
      this.cube.castShadow = true
      this.scene.add(this.cube) // 将网格对象添加到场景
      console.log(this.cube)
    },
    render () {
      this.updateCubeProperties()
      this.renderer.render(this.scene, this.camera)
      requestAnimationFrame(this.render)
    },
    // 创建控件对象
    createControls () {
      this.controls = new OrbitControls(this.camera, this.renderer.domElement)
    }
  }
}
</script>

<style>
#container {
  position: absolute;
  width: 100%;
  height: 100%;
}
.controls-box {
  position: absolute;
  right: 5px;
  top: 5px;
  width: 300px;
  padding: 10px;
  background-color: #fff;
  border: 1px solid #c3c3c3;
}
.vertice-span {
  line-height: 38px;
  padding: 0 2px;
}
</style>
李刚大人
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
对Mesh的平移、旋转、缩放[Open3D-Python]
m0_56769753的博客
01-24 974
使用Open3D-Python对Mesh进行平移、旋转、缩放
通过网格对象Mesh的属性实现立方体的缩放、移动、旋转、平移、隐藏(vue中使用three.js05)
点燃火柴的博客
08-26 2510
Mesh对象的缩放、移动、旋转、平移、隐藏一、网格对象属性和方法介绍1.缩放-scale2.位置-position3.旋转-rotation4.平移-translateX()、translateY()、translateZ()5.可见-visible二、通过demo深入理解Mesh属性和方法 一、网格对象属性和方法介绍 我们知道创建一个网格对象需要一个几何体以及一个或多个材质对象，创建好网格对象就可以把它添加到场景中了，但我们怎么实现网格对象的缩放、移动，旋转和平移操作呢，接下来给大家介绍一下它的属性 1.
ThreeJS:Mesh网格与三维变换
最新发布
席木木的博客
05-02 991
ThreeJS:Mesh网格与三维变换，介绍ThreeJS中，基于Mesh网格表达的空间实体，在三维场景中的三维变换操作。
ThreeJS - 修复摄像机近距离模型或者摄像机在某些观察角度3D模型部分或者全部不可见的问题
HW140701的博客
09-24 3047
最近使用three.js在场景中显示gltf模型时候，当我使用操作摄像机想近距离观察gltf模型的时候发现一部分模型消失了，比如说假如这个模型是一匹马，当我远距离观察时可以完整的看到整匹马，但是当我想拉近摄像头近距离观察马的时候，这个时候我只能看到马的头，马的身子和脚的部分突然就消失了。我马上意识到是摄像机的视椎体出现了问题，但是我的视椎体设置的很大，如下肯定可以把这个模型完整的包含在视椎体里面，不可能会出现上述的奇怪问题。
three.js设置物体的缩放和旋转
jieyucx的博客
06-20 4307
使用three.js设置物体的缩放可以通过对象的scale属性来实现。其中，scale属性是一个THREE.Vector3类型的对象，包含了x、y、z三个方向的缩放比例。设置scale时，可以直接使用Vector3的set方法设置缩放比例，也可以分别设置x、y、z三个方向的缩放比例。其中，Vector3的multiply方法将会对scale属性进行按元素乘法，实现沿x轴缩小一半的效果。示例效果。
Three.js三维模型几何体旋转、缩放和平移
Zmikoo学习之路
06-17 6500
Three.js三维模型几何体旋转、缩放和平移 创建场景中的三维模型往往需要设置显示大小、位置、角度，three.js提供了一系列网格模型对象的几何变换方法，从WebGL的角度看，旋转、缩放、平移对应的都是模型变换矩阵，关于矩阵变换内容可以观看本人博客发布的原生WebGL课程。 网格模型对象的旋转、缩放、平移等方法或属性可以查找three.js文档的Object3D对象，该对象是网格模型对象、点模型对象、线条模型对象的基类。 缩放 立方体网格模型x轴方向放大2倍，如果连续执行两次该语句，相等于比原来方法4倍
过渡、旋转、缩放
YiLin_Classics的博客
04-20 263
过渡、旋转、缩放过渡过渡动画的执行类型2d平面效果平移函数旋转函数缩放函数倾斜函数，倾斜的是一个度数 过渡 含义：元素的一种状态向另外一种状态进行过渡 ，缓慢的发生改变。 属性：transition 取值：all 3s linear 5s all-------------所有参与过渡的属性 linear---------动画过渡的时候类型：匀速 3s-------------动画的执行时长 5s------------过渡的缓慢执行 如何实现：缓慢的开
vue使用three.js引入外部obj，mtl模型.zip
05-31
在Vue.js应用中集成Three.js库来加载外部的3D模型，如.obj和.mtl文件，是一种常见的增强网页3D视觉效果的方法。Three.js是一个强大的JavaScript库，它为WebGL提供了一个简单易用的接口，使得在浏览器中创建复杂的3D...
vue页面引入three.js实现3d动画场景操作
10-14
这个插件允许用户通过鼠标或触摸来旋转、平移和缩放3D视图。 在处理3D对象的加载时，你可能需要`.obj`和`.mtl`格式的文件，这时需要安装`three-obj-mtl-loader`： ```bash npm i --save three-obj-mtl-loader ``` ...
three.js3维坐标系+绘制立方体（带边框）
02-28
在本文中，我们将深入探讨如何使用three.js库创建一个3维坐标系，并在该系统中绘制带有边框的立方体，以及在立方体表面绘制线条。three.js是JavaScript的一个强大库，专门用于在Web浏览器中进行3D图形编程。让我们一...
基于vue3，three.js,3D智慧园区
11-09
在构建“基于vue3，three.js,3D智慧园区”的项目中，我们涉及了多个关键技术和概念，这些技术是现代Web开发中3D图形和交互式应用的核心。下面将详细阐述这些知识点： **Vue3**: Vue.js是一个流行的前端JavaScript...
Vue使用Three.js加载glTF模型的方法详解
10-15
主要给大家介绍了关于Vue使用Three.js加载glTF模型的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用Vue具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
ThreeJS-移动(三)
以爱护甲,爱满枫林。
03-29 2068
/但是requestAnimationFrame的回调函数注册生命只有一次，因此需要循环注册，才能达到一直调用的效果。//使用控制器控制3D拖动旋转OrbitControls。//将webgl渲染的canvas内容添加到body上。//创建轨道控制器，可以拖动,控制的是摄像头。//使用渲染器，通过相机将场景渲染进来。//渲染下一帧的时候就会调用回调函数。//根据几何体和材质创建物体。//控制3D物体移动。//将相机添加到场景。//将物体加入到场景。//添加坐标轴辅助器。//设置渲染器的尺寸。
Three.js学习笔记（二）场景（scene）
qiaozi的博客
08-29 2848
前言 场景就是一个容器，可以容纳相机、光源、对象等，所以对场景的深入了解显得尤为重要。本次笔记主要学习： 在Three.js中场景使用的组件 THREE.Scene对象的作用 一、 创建场景 一个场景想要显示任何东西，需要下表所示的三种类型的组件： 组件 说明 摄像机 决定屏幕上哪些东西需要渲染 光源 决定材质如何显示以及用于产生阴影 对象 摄像机透视图里主要的渲染对象...
Three.js使用技巧
路漫漫其修远兮，吾将上下而求索。
08-23 1366
Three.js使用技巧，性能优化
【Three.js】Three.js中的纹理—图像应用和属性调整
西门吹雪
07-25 4231
Three.js中的纹理功能为我们创造出更加真实和生动的3D场景提供了强大的工具。通过将图像作为纹理应用到几何体上，并调整纹理的属性，我们可以实现丰富多样的视觉效果，为用户带来更好的交互体验。 对于那些对于创造逼真图形和动画的开发者和设计师来说，Three.js中的纹理功能无疑是一个不可或缺的重要组成部分。
【Fluent Meshing】周期性界面创建
ACc330的博客
09-03 3526
本文主要介绍Fluent Meshing创建旋转性周期网格的流程及注意事项。
MeshLab对网格缩放、 移动、 简化、 重绘 、 反转、 自相交检测的几个操作
TianHQ
01-18 7592
Meshlab对网格进行缩放、 移动、 简化、 重绘 、 反转、 自相交检测 缩放及移动 uniform scaling 表示三个坐标统一改变， freeze matrix 勾选后才可实际改变文件的网格，否则只能用于显示 如果设置 缩放为负数 可能出现下面这种情况， 缩放完后模型变黑了，这是因为 模型是单面模型，缩放后面反转了。反转方式见下一条 反转模型表面 重绘制，简化模型， 重采样 自相交检测及剔除 上面操作只是选中了自相交的面 选中后选择工具栏的这三个操作之一，删除
three.js 模型对象旋转平移缩放变换
yinge0508的博客
02-14 2903
1，缩放：网格模型Mesh的属性 scale 表示模型对象的缩放比例，默认是THREE.Vector3(1.0,1.0,1.0); 设置缩放的方式： mesh.scale.set(0.5,1.5,2); // 方式一：xyz方向分别缩放0.5,1.5,2倍 mesh.scale.x = 2.0; // 方式二：x 方向分别缩放 2倍 2，位置属性 position: 属性值也是三维向量对象，默认是 THREE.Vector3(0.0,0.0,0.0); 设置位置的方式： mesh.pos..
请帮我写一个vue2的three.js导入并可以操作stl文件旋转缩放平移等的示例
07-08
当然，下面是一个使用 Vue 2 和 three.js 导入并操作 STL 文件的示例： 首先，您需要在项目中安装 three.js 和 STLLoader。可以通过 npm 或 yarn 进行安装： ```bash npm install three stl-loader ``` 或 ```bash yarn add three stl-loader ``` 然后，您可以在 Vue 组件中使用以下代码来加载和操作 STL 文件： ```vue <template> <div ref="canvas"></div> </template> <script> import * as THREE from 'three'; import STLLoader from 'stl-loader'; export default { mounted() { this.initThree(); this.loadSTL(); this.animate(); }, methods: { initThree() { // 创建场景 this.scene = new THREE.Scene(); // 创建相机 this.camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 ); this.camera.position.z = 5; // 创建渲染器 this.renderer = new THREE.WebGLRenderer(); this.renderer.setSize(window.innerWidth, window.innerHeight); // 将渲染器添加到页面中 this.$refs.canvas.appendChild(this.renderer.domElement); }, loadSTL() { const loader = new STLLoader(); loader.load('path/to/your/stl/file.stl', geometry => { // 创建材质 const material = new THREE.MeshPhongMaterial({ color: 0xff0000 }); // 创建网格对象 this.mesh = new THREE.Mesh(geometry, material); // 将网格对象添加到场景中 this.scene.add(this.mesh); }); }, animate() { requestAnimationFrame(this.animate); // 操作模型的旋转、缩放、平移等 if (this.mesh) { this.mesh.rotation.x += 0.01; this.mesh.rotation.y += 0.01; // 可以根据需要进行其他操作，如缩放、平移等 } // 渲染场景 this.renderer.render(this.scene, this.camera); } } }; </script> <style> #canvas { width: 100%; height: 100%; } </style> ``` 请确保将 `'path/to/your/stl/file.stl'` 替换为您实际的 STL 文件路径。然后，您可以使用这个示例来加载和操作 STL 文件，包括旋转、缩放和平移。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值