我的threejs学习笔记（八）——向场景添加颜色监听

最新推荐文章于 2024-05-11 23:58:37 发布
最新推荐文章于 2024-05-11 23:58:37 发布
阅读量3.8k 收藏 2
点赞数 1
分类专栏： 学习笔记 three.js学习笔记 文章标签： gui threejs
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/chenqiong1991/article/details/66482528
版权

写在前面

这是几句纠结了半天的代码。源代码是addColor（）；我写的是add（），所以效果差很多。最后把源代码粘过来对比半天才发现这个差别。也是醉了。

废话不说

var controls=new function () {
   
        this.ambi_Color=ambiColor;
    };
    var gui=new dat.GUI();
    gui.addColor(controls,'ambi_Color').onChange(function (e) {
   
        ambientLight.color=new THREE.Color(e);
    });

效果就是在gui控制器上多了一个颜色选择器，颜色改变后，绑定在其上的物体的颜色就会发生改变。

全文代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>threejs 007_1!</title>
最低0.47元/天 解锁文章
chenqiong1991
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
js学习笔记——（15）jQuery选择器、样式操作、效果
01-20
原生js获取元素方式很多，很杂，而且兼容性情况不一致，因此jQuery给我们做了封装，使获取元素统一标准。 $(‘选择器’) //里面选择器直接写css选择器即可，但是要加引号 原创文章 16获赞 11访问量 287 关注 私...
threejs的shader材质 颜色混合函数mix
啦啦啦啦
10-17 3919
float mix(floatx,float y,float a ) 返回x和y 的线性混合，即x(1-a)+ya three.js webgl - shader [Monjori] &lt;div id="container"&gt;&lt;/div&gt; &lt;script src="js/three.js"&gt;&lt;/script&gt; ...
02three.js绘制随机颜色的立方体
X01动力装甲的专栏
04-09 1410
立方体 随意颜色的生成可以使用Math.random()函数：0xFFFFFF*Math.random()。 也可以使用color.fromArray(colorArray)的方式。RGB数据来源于一个float32位的数组。 最后设置旋转一定角度之后就变换一种颜色，产生一个动态效果。 var scene = new THREE...
Threejs 动态修改InstanceMesh实例化几何体中单个实例的颜色
最新发布
dabaooooq的博客
05-11 509
instanceMesh是使用InstancedMesh类来创建实例化的几何体。它适用于当需要大量重复的几何体时，但是每个实例之间有不同的变换属性（如位置、旋转、缩放等）。场景：在InstanceMesh多实例创建后，动态修改某个实例的颜色。思路：InstanceMesh外层材质颜色置为白色，创建时调用setColorAt对每个实例设置color要创建后修改，需要为InstanceMesh添加一个数组，按序存放每个小实例的id，根据id检索数组，获取当前实例在多实例中
three.js后期处理-使用HueSaturationShader定制效果调整颜色的色调和饱和度(vue中使用three.js88)
点燃火柴的博客
06-19 1373
使用HueSaturationShader定制效果调整颜色的色调和饱和度1.demo效果2. 知识要点2.1 HueSaturationShader介绍2.2 HueSaturationShader的使用步骤3. 实现要点3.1 相关文件引入3.2 创建效果组合器3.3 render中更新4. demo代码 1.demo效果 如上图，展示了使用HueSaturationShader后期处理通道调整色调和饱和度的效果 2. 知识要点 2.1 HueSaturationShader介绍 通过使用HueSat
16 Three.js使用dat.GUI简化试验流程
现在学习也不晚
07-31 1万+
简介使用这个插件的最省事的地方在于，调试很方便的调节相关的值，从而影响最后绘制的结果。而dat.GUI实现的东西也很简单，理解起来也很好理解。案例查看地址：http://www.wjceo.com/blog/threejs/2018-02-12/18.html我们实例化dat.GUI对象后，会在右上角显示出一些可以调节的参数，比如：这就是今天的案例制作出来的五个可以调节的属性。而且实现起来也很简单...
three.js学习笔记(一)——GUI工具的使用
hongsir的博客
11-28 5547
Dat.gui 是一个 GUI 组件，他可以为你的 demo 提供参数的设置 官方github 安装与引入 npm install --save dat.gui import * as dat from 'dat.gui' 实例化对象 // 实例化可视化GUI工具 可以通过按 H 键隐藏GUI面板 const gui = new dat.GUI() //可传递参数{ closed:true ,width:400 } // gui.hide() //隐藏GUI面板，可通过按两次 H键开启显示 .
WebGL学习教程之Three.js学习笔记(第一篇)
10-17
Three.js是一个js的开源框架，它把webgl的所有东西都封装好了，我们不再需要去了解webgl那些比较麻烦的细节，直接在此框架上进行开发，既方便，又快捷，而且很容易就能学习,感兴趣的朋友跟随小编一起看看吧
MarkDown字体颜色——MarkDown学习笔记
01-07
示例：我是啥颜色 十六进制颜色值查询：https://blog.csdn.net/testcs_dn/article/details/45719357/#comments Tips: 十六进制颜色值#000000，基本原理是红绿蓝RGB配比，前两位是红，中间两位是绿，后两位是蓝，都以...
我的Android学习笔记——共享
01-03
第一节——基础准备 工具介绍 Eclipse：最原始的开发工具，不过现在Google已经停止对Eclipse的支持 Android Studio：Google的官方开发工具，推荐使用 第二节——第一个安卓应用 基本介绍： 1. …/app/src/main/java...
Solidworks学习笔记——随形变化.docx
07-13
Solidworks学习笔记——随形变化.docxSolidworks学习笔记——随形变化.docxSolidworks学习笔记——随形变化.docxSolidworks学习笔记——随形变化.docxSolidworks学习笔记——随形变化.docxSolidworks学习笔记——...
THreejs gui控件调试颜色
weixin_45815569的博客
02-16 405
这里我用来改变雾气的颜色，方便颜色和场景结合。
Three.js 实现点击模型改变颜色
做GIS梦的人
09-24 7979
Three.js 实现点击模型改变颜色 想实现点击模型，改变模型颜色的效果。在网上看了一些代码，发现特别搞笑，很多的博客给出的计算代码都是错误的，根本无法实现点击效果，还在不同的博客相互的复制，只能感叹抄袭党太多。下面我简单的介绍一些我的方法，我是在Vue中开发的。 文章目录Three.js 实现点击模型改变颜色三维空间点击事件的原理环境准备代码实现效果展示注意事项 三维空间点击事件的原理 在三维空间内判断鼠标点击的是哪个模型，核心的原理还是射线碰撞，*即从相机（camera）的中心点到屏幕上鼠标点组成
Three.js+OBJ文件实现模型改变颜色
weixin_51793765的博客
07-26 2043
首先我们需要先下载 Three.js + OBJLoader.js + OrbitControls.js 这三个库才能正常编写代码！总结下最近新学知识结果！话不多说，直接上代码。
Three.js - THREE.Color颜色对象详解 （方法介绍）
dxyzhbb的博客
07-02 1万+
1，基本介绍 （1）在 Three.js 中，使用 THREE.Color 对象来表示颜色。 （2）在构造 Color 对象时，可以使用十六进制字符串（"#c0c0c0"）或者十六进制值（0xc0c0c0）来指定颜色，还可以使用 RGB 颜色值（0.3,0.5,0.6）。 //推荐使用十六进制值 new THREE.Color(0x00000, 1.0) 2，THREE.Color 对象的方法 ...
js随机颜色生成
风轻云淡
04-12 771
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>随机颜色生成</title> <script type="text/javascript" src="js/jquery-3.1.1.min.j...
Three Js实现颜色自定义变换
qq_49491645的博客
01-26 3573
可以使用Three.js的一个三维向量Vector3来表示，Three.js几何体对。Geometry的属性.vertices表示顶点位置位置坐标的集合。
threejs中gui的用法总结
热门推荐
gdutRex的博客
11-16 1万+
gui 为了能够快速地搭建three.js的交互ui，官方提供了一个GUI组件，通过简单的语法学习就能够使用。 下面我们就来学习如何使用 用法一 首先声明一个对象，这个对象设置获取一个交互UI的get和set的方法回调 var propsLocal = { get Enabled() { return renderer.localClippingEnabled; }...
layui表格监听全选_layui学习笔记——监听表格复选框选择
05-26
在 layui 表格中，可以通过监听复选框的选择来实现批量操作等功能。具体实现步骤如下： 1. 在表格中添加复选框列，并设置lay-skin属性为primary，表示使用layui风格的复选框。 ``` <table class="layui-table" lay-data="{...}"> <colgroup> ... <col width="50"> </colgroup> <thead> ... <th lay-data="{field:'checkbox', width:50, templet:'#checkboxTpl'}"></th> </thead> <tbody> ... </tbody> </table> <script type="text/html" id="checkboxTpl"> <input type="checkbox" lay-skin="primary"> </script> ``` 2. 在JavaScript代码中监听复选框的选择事件，可以使用layui的form模块来实现。需要注意的是，由于表格是动态生成的，所以需要使用layui的form.render()方法重新渲染表单元素。 ``` layui.use(['table', 'form'], function(){ var table = layui.table, form = layui.form; // 监听复选框选择 table.on('checkbox(test)', function(obj){ console.log(obj.checked); // 当前是否选中状态 console.log(obj.data); // 原始数据 console.log(obj.type); // 类型，如果行选则为：row，如果全选则为：all，如果取消选择则为：uncheck console.log(table.checkStatus('test').data); // 获取选中行的数据 }); // 重新渲染表单元素 form.render(); }); ``` 3. 表格中如果存在分页，则需要在分页时重新渲染表单元素。 ``` table.on('page(test)', function(){ form.render(); }); ``` 以上就是监听表格复选框选择的实现方法。需要注意的是，表格中的复选框列必须有唯一的字段名，否则无法在JavaScript代码中获取选中行的数据。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值