用ThreeJS控制stl模型的透明度

最新推荐文章于 2024-07-19 11:16:54 发布
最新推荐文章于 2024-07-19 11:16:54 发布
阅读量2.8k 收藏 2
点赞数 1
分类专栏： ThreeJS 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qitiandada/article/details/108514913
版权

利用ThreeJs加载stl文件

我选择用这个js来渲染stl文件

在这里插入图片描述
渲染方法如下：
在这里插入图片描述
其中的 material是来控制模型的透明度，颜色的对象。

那么如何通过点击按钮来控制模型的透明度

在这里插入图片描述
如果你用的是Vue，完全可以给 opacity一个变量，利用Vue的双向数据绑定来随意变化透明度的值（取值范围为0~1）
原生的话 则需要通过改变对象内的属性值
在这里插入图片描述
其中的 id就是对象名，可以绑定一个点击事件通过点击来改变他们的透明度。

到此为止可以基本实现模型的透明度控制，但是会发现如果同时加载多个stl文件的话，如果把上面的模型设置透明度，会给下面的模型一种‘马赛克’的感觉，所以还需要设置一个属性。

在这里插入图片描述
这样的话就会解决这个问题！！！

qitiandada
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Three.js视频教程
u014291990的博客
09-20 1万+
前言 使用Threejs有几年了，一直想录制一套关于threejs引擎的视频教程，所以想着在这里先写一个录制大纲。
Threejs 技巧和窍门大清单
BIM树洞的博客
12-23 2140
threejs技巧及窍门，主要包括性能优化等
基于 Three.js 的 3D 模型加载优化
最新发布
vivo互联网技术
07-19 1619
作为一个3D的项目，从用户打开页面到最终模型的渲染加载的时间也会比普通的H5项目要更长一些，从而造成大量的用户流失。为了提升首屏加载的转化率，需要尽可能的降低loading的时间。这里就分享一些我们在模型加载优化方面的心得。
threejs中3D模型使用透明发光材质
05-02
透明发光材质边缘处颜色不透明度越高，向内不透明度逐渐降低，其着色跟视角方向强相关 代码参考了"无牙"文章。
threejs 透明贴图，模型透明，白边
w710537643的博客
10-06 2195
模型透明贴图显示问题处理
three.js将模型设置成透明色
weixin_43781939的博客
01-19 3114
three.js加载模型需要设置成透明色，走一步再显示出来
three.js对模型进行透明操作以及模型进度条
weixin_44268120的博客
11-29 424
【代码】three.js对模型进行透明操作。
Three.js背景透明度(模型悬浮在网页上)
u014291990的博客
12-17 1198
通过Three.js渲染一个模型的时候，不希望canvas画布有背景颜色，也就是canvas画布完全透明，可以透过canvas画布看到画布后面叠加的HTML元素图文，呈现出来一种三维模型悬浮在网页上面的效果。方法的参数2，可以用来设置背景颜色透明度。通过Three.js渲染器。就可以，WebGL渲染器的。
threejs-stl-demo:用于显示 STL 3D 模型的演示
05-30
Threejs-stl-演示 用于解析和呈现 STL（ascii 和二进制）文件的纯 Javascript 演示代码。 谢谢 用于通过 Javascript 在 WebGL/Canvas 中渲染 3D 模型的能力 灵感来自 执照 Threejs-stl-demo 是在下。
threejs给模型添加外部轮廓demo
04-10
本示例“threejs给模型添加外部轮廓demo”着重于如何使用Three.js来为3D模型添加外部轮廓，以提升模型在场景中的视觉效果和辨识度。 首先，了解Three.js的基础是必要的。Three.js是一个基于WebGL的库，WebGL是一种...
ThreeJS导出三维模型、导入三维模型、导入三维动画DEMO
12-07
本教程将深入探讨如何使用Three.js来导出和导入三维模型，以及导入三维动画。 首先，我们来看一下如何在Three.js中导出三维模型。通常，3D模型是由各种设计软件（如Blender、Maya或3DS Max）创建的，并以特定格式...
Threejs中3D模型使用透明发光材质并加线框
05-06
透明发光材质是通过自定义shader实现，线框的关键代码如下： model.traverse(function(child) {     if (child.isMesh) {     child.material = customMaterial;     // 添加线框     var wireframeMaterial = new THREE.MeshBasicMaterial({color: 0x3366ff, wireframe: true, transparent: true});     var wireframe = new THREE.Mesh(child.geo
threestl:使用Threejs渲染STL文件
05-14
threestl 使用Threejs渲染STL文件 跑步 python -m SimpleHTTPServer
ThreeJs_STL.rar_STLExporter.js_ThreeJS_h5动画_threejs asciieffect_
07-15
用H5+javascript,THREEJS库编写的三维动画,读取多个STL对象并生成动画,鼠标左,中,右键可操控.
threeJs 画stl 3D模型
qq_34491588的博客
07-01 249
const that = this; let container: any = document.getElementById('three3D'); let width = container.getBoundingClientRect().width; let height = container.getBoundingClientRect().height; try { init(); animate()..
THREE.JS使用JSON文件加载外部模型改变材质的透明度
weixin_42443851的博客
06-25 3526
THREE.JS使用JSON文件加载外部模型改变材质的透明度** 今天在做项目的时候，想要使用代码改变json外部的模型的透明度起初认为非常简单。后来发现怎么修改都没有用，就查看了json文件，通过修改materials数组里的transparency属性可以改变模型的透明度** ...
three根据name或者id获得模型，设置透明度
qq_34631220的博客
03-24 2141
var Floor = gltf.scene.getObjectById(2307); Floor.material = new THREE.MeshLambertMaterial({ color: 0x000000, }); var Floor = gltf.scene.getObjectByName('地面'); Floor.material = new THREE.MeshLambertMaterial({ color: 0x000000, }); ...
three 开发半透明效果
huhuan123456的博客
12-29 890
three效果
【three.js】设置canvas画布背景透明
qq_38196449的博客
06-16 573
通过Three.js渲染一个模型的时候，不希望canvas画布有背景颜色，也就是canvas画布完全透明，可以透过canvas画布看到画布后面叠加的HTML元素图文，呈现出来一种三维模型悬浮在网页上面的效果。比如我们现在的模型背景是黑色的，非常不美观，我们想把背景变透明，如何做呢？有时我们不想变透明，只想换一个别的颜色，那么如何改呢？
使用vue2的threejs加载stl模型
06-08
加载STL模型可以使用Three.js库中的STLLoader。而在Vue2中使用Three.js需要先安装Three.js和STLLoader库。 安装Three.js和STLLoader： ``` npm install three stl-loader ``` 在Vue组件中引入Three.js和STLLoader： ```javascript import * as THREE from 'three' import { STLLoader } from 'three/examples/jsm/loaders/STLLoader.js' ``` 然后在Vue组件的mounted钩子函数中加载STL模型： ```javascript mounted() { // 初始化场景、相机、渲染器 this.init() // 加载STL模型 const loader = new STLLoader() loader.load('/path/to/model.stl', (geometry) => { // 创建网格模型 const material = new THREE.MeshPhongMaterial({ color: 0xff5533, specular: 0x111111, shininess: 200 }) const mesh = new THREE.Mesh(geometry, material) // 将模型添加到场景中 this.scene.add(mesh) }) }, ``` 其中init函数可以参考Three.js的官方文档进行初始化。需要注意的是，Vue组件中的this.scene、this.camera、this.renderer等变量需要在data中进行定义。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值