three.js——模型对象的使用材质和方法

这篇具有很好参考价值的文章主要介绍了three.js——模型对象的使用材质和方法。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

前言

BufferGeometry通过.scale()、.translate()、.rotateX()、.rotateY()等方法可以对几何体本身进行缩放、平移、旋转,这些方法本质上都是改变几何体的顶点数据。
官网的模型和材质使用

效果图

three.js——模型对象的使用材质和方法,threejs,javascript,材质,前端,vue.js,three.js

1、旋转、缩放、平移,居中的使用

1.1 旋转rotation(.rotateX()、.rotateY()、.rotateZ())

//几何体绕着x轴旋转45度
cube.rotation.x = Math.PI / 4
// 几何体绕着x轴旋转45度
geometry.rotateX(Math.PI / 4);

1.2缩放.scale()

// 几何体xyz三个方向都放大2倍
geometry.scale(2, 2, 2);

1.3平移.translate()

// 几何体沿着x轴平移50
geometry.translate(50, 0, 0);

1.4居中.center()

geometry.translate(50, 0, 0);//偏移
// 居中:已经偏移的几何体居中,执行.center(),你可以看到几何体重新与坐标原点重合
geometry.center();

2、材质属性.wireframe

线条模式渲染,查看几何体三角形结构文章来源地址https://www.toymoban.com/news/detail-731953.html

// 子元素的材质
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 })
// 设置子元素为线框模式
material.wireframe = true

到了这里,关于three.js——模型对象的使用材质和方法的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Three.js实现模型,模型材质可拖拽效果 DragControls

    DragControls:是一个用于在Three.js中实现拖拽控制的辅助类。它简化了在Three.js中实现拖拽物体的过程。 DragControls的构造函数接受三个参数: objects:一个包含需要进行拖拽的物体的数组。 camera:相机对象,用于将屏幕坐标转换为三维空间坐标。 domElement:渲染器的DOM元素,用于

    2024年02月11日
    浏览(37)
  • 【THREE.JS学习(3)】使用THREEJS加载GeoJSON地图数据

    本文接着系列文章(2)进行介绍,以VUE2为开发框架,该文涉及代码存放在HelloWorld.vue中。 相较于上一篇文章对div命名class等,该文简洁许多。 接着引入核心库 其中,{OrbitControls}为控制器,加载后可以通过鼠标来移动加载数据的方向、放缩等 Three.js中的坐标系是以单位为米(

    2023年04月09日
    浏览(47)
  • Three.js 材质的 blending

    Three.js 材质的 blending 1、blending 材质的混合模式。 2、blendEquation 混合公式确定如何将新像素与 中 WebGLFramebuffer 已有的像素组合。 混合方程的API: gl.blendEquationSeparate : 用于分别设置 RGB 混合方程和 alpha 混合方程 gl.blendEquation : RGB 混合方程和 alpha 混合方程设置为单个方程。 混合

    2024年02月07日
    浏览(43)
  • three.js 载入 3D 模型的方法

    three.js 载入 3D 模型的方法有很多种。以下是其中的一些: 1. OBJLoader模型加载器 2. GLTFLoader模型加载器 3. FBXLoader模型加载器 4. ColladaLoader模型加载器 以上是几种常用类型的三维模型的加载器及其使用方法,可以根据需要使用相应的模型加载器来加载模型。

    2024年02月16日
    浏览(58)
  • Three.js——基础材质、深度材质、法向材质、面材质、朗伯材质、Phong材质、着色器材质、直线和虚线、联合材质

    个人简介 👀 个人主页: 前端杂货铺 🙋‍♂️ 学习方向: 主攻前端方向,正逐渐往全干发展 📃 个人状态: 研发工程师,现效力于中国工业软件事业 🚀 人生格言: 积跬步至千里,积小流成江海 🥇 推荐学习:🍍前端面试宝典 🍉Vue2 🍋Vue3 🍓Vue2/3项目实战 🥝Node.js🍒

    2024年04月27日
    浏览(30)
  • 【js&threeJS】入门three,并实现3D汽车展示厅,附带全码

    首先放个最终效果图:   三维(3D)概念: 三维(3D)是一个描述物体在三个空间坐标轴上的位置和形态的概念。相比于二维(2D)只有长度和宽度的平面,三维增加了高度或深度这一维度 在三维空间中,我们使用三个独立的坐标轴来描述物体的位置。通常使用笛卡尔坐标系

    2024年02月11日
    浏览(104)
  • threejs点击获取三维坐标(Three.js获取鼠标点击的三维坐标)

    绑定点击事件,通过 THREE.Raycaster 光线投射,用于确定鼠标点击位置上有哪些物体, raycaster.intersectObjects(scene.children) 返回点击位置上所有的物体的数组;我们用 var selected = intersects[0] 取第一个,也就是最前面的那个物体;在通过 selected.point 取点坐标

    2024年02月11日
    浏览(116)
  • Three.js--》前端开发者掌握3d技术不再是梦,初识threejs

            这十年来 web 得到了快速的发展,随着 webgl 的普及,网页的表现能力越来越强大,网页上已经开始可以做出很多复杂的动画和精美的效果,还可以通过 webgl 在网页中绘制高性能的3d图形,别的不说,凡是入门程序员都离不开github这个网站,细心的人都会发现,gi

    2024年02月01日
    浏览(62)
  • Three.js之几何体、高光材质、渲染器设置、gui

    阵列立方体和相机适配体验 Threejs常见几何体简介 … gui.js库(可视化改变三维场景) 注:基于Three.js v0.155.0 长方体:BoxGeometry 球体:SphereGeometry 圆柱:CylinderGeometry 矩形平面:PlaneGeometry 圆形平面:CircleGeometry 高光网格材质:MeshPhongMaterial(shininess、specular) WebGL渲染器设置:

    2024年02月11日
    浏览(50)
  • JavaScript:js数组/对象遍历方法

    一、js遍历方法 序号 方法 描述 1 for 使用最基本的for循环可以遍历数组 2 for of for...of语句用来遍历可迭代对象(包括数组、Set、Map、字符串等),它可以替代传统的for循环和forEach()方法。for...of循环每次迭代都将返回一个值,而不是索引。 3 for in for...in语句用来遍历对象的可

    2024年02月09日
    浏览(55)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包