ThreeJS隐藏纹理 - 腾讯云开发者社区

文章/答案/技术大牛

发布

threejs记录选中变化纹理

panel:{ name:"", temp:"", use:"" }, isShowPanel:false, //纹理集合...}) }else{ mesh.material = new MeshBasicMaterial({color}) } }, // 建立纹理对象...position:absolute; left:0; top:0; background: rgba( 0, 0, 0, .6 ); padding:10px; } threejs

3271 0

Threejs入门之十六：纹理贴图和纹理材质

Texture 用于创建一个纹理贴图，将其应用到一个物体的表面，纹理对象可以通过TextureLoader(纹理加载器)的load()方法来加载一个图片。...要使用纹理贴图，首先要创建一个纹理加载器，纹理加载器返回一个Texture 纹理对象，通过纹理加载器加载贴图材质然后通过设置材质的颜色贴图map属性的值为上面的Texture来调用，下面我们创建一个立方体...Texture纹理有两个属性定义了其在水平和垂直方向上贴图如何显示， .wrapS : 这个值定义了纹理贴图在水平方向上将如何包裹，在UV映射中对应于U。...默认值是THREE.ClampToEdgeWrapping，即纹理边缘将被推到外部边缘的纹素。 wrapT : 这个值定义了纹理贴图在垂直方向上将如何包裹，在UV映射中对应于V。...// uv两个方向纹理重复数量texture.repeat.set(5,5) 关于纹理贴图和纹理材质就先到这里吧，如果你觉得有用记得点赞关注哦

3.3K1 0

您找到你想要的搜索结果了吗？

是的

没有找到

threejs材质

从blender里面导出的贴图好的模型，在threejs中加载会变暗，如何解决，首先简单的介绍如何在blender中贴图与导出一、选择材质属性二、点击Base Color 旁边的小圆点，会显示一些菜单

2.4K3 0

Threejs入门之四:Threejs中的光

前面我们用Threejs创建了一个3D立方体到浏览器，并使其跟随鼠标旋转和缩放，但是，上帝说要有光，于是就有了光~~~额，好吧，这一节我们来认识下Threejs中的灯光，Threejs提供了很多灯光的API.../ 创建点光参数1 光的颜色，参数2 光的强度const pointLight = new THREE.PointLight(0xffffff,1)就想生活中的灯泡是在屋顶中央的位置安装一样，我们在Threejs...THREE.SpotLight( 0xffffff );spotLight.position.set( 0, 200, 100 );scene.add(spotLight)浏览器显示效果如下总结：Threejs

4K3 0

Threejs入门之十九：Threejs中的向量

今天我们来认识下Threejs中的向量，在Threejs中，有二维向量Vector2、三维向量Vector3和四维向量Vector4之分，这些向量可以表示很多数据，后面会一一介绍，在了解Threejs中的向量之前...Threejs中的向量二维向量（Vector2）一个二维向量是一对有顺序的数字（标记为x和y），可用来表示很多事物，例如：一个位于二维空间中的点（例如一个在平面上的点）。

1.4K2 0

Threejs入门之五:Threejs中的辅助对象

在继续Threejs入门之旅之前，我们先来了解几个Threejs提供的辅助对象，这些辅助对象有助于我们更好的了解Threejs。...Threejs提供了很多辅助对象，这里我们先了解几个我们经常用到的坐标轴辅助对象、点光辅助对象、平行光辅助对象和聚光灯的锥形辅助对象。...创建聚光灯辅助对象const spotLightHelper = new THREE.SpotLightHelper(spotLight,0x0000ff)scene.add(spotLightHelper) 总结：Threejs...的辅助对象能帮助我们在开发中比较直观的感受到特定对象的位置，为我们调整参数提供了便利，除了上面介绍的几种辅助对象外，Threejs还提供了很多其他的辅助对象，具体可以查看官方文档，里面也提供了使用的例子

1.5K1 0

Shader-基础纹理-遮罩纹理

遮罩纹理（mask texture）控制光照的强度，获得更加细腻的效果，通过遮罩纹理控制光照。在制作地形材质的时候混合多张图片，遮罩纹理控制如何混合这些纹理。...在代码中添加了BumpMap来进行凹凸纹理效果，通过SpecularMask实现控制高光的光照 Shader "Unlit/MaskTexture" { Properties{

1.4K1 0

Shader-基础纹理-渐变纹理

渐变纹理一种基于冷暖色调的着色技术，通过渐变纹理控制漫反射光照。核心部分来说用过使用halfLambert构建一个纹理坐标，用这个纹理坐标来对渐变纹理进行采样。...specular + diffuse + ambient, 1.0); } ENDCG } } } 三种纹理图片对应结果

1.3K1 0

Threejs入门之十二：认识Threejs中的材质

材质是描述对象的外观，Threejs中提供了很多材质的API，今天我们来了解几个常用的材质类API 1.Material Material是所有材质的基类，所有继承自Material的材质都基础了Material...85, fog:true, combine:THREE.MultiplyOperation, reflectivity:0.1, refractionRatio:0.98}) 效果以上就是Threejs

2.1K1 0

Threejs入门之七:Threejs中的几何体

前面的代码中我们一直使用立体缓冲几何体BoxGeometry来构造物体，这样构造出来的是一个长方体或正方体，Threejs提供了很多几何体的API，如圆形缓冲几何体、圆锥缓冲几何体、圆柱缓冲几何体等，下面一一进行介绍...THREE.MeshLambertMaterial({ color:0x00ffff,//设置颜色 wireframe:true,})const mesh = new THREE.Mesh(geometry,material) 总结：Threejs...中提供了很多几何体的API，这里由于篇幅的原因，就不一一赘述了，具体可以查看Threejs的官方文档。

2.2K3 0

ThreeJS 掏洞术

前言最近闲来无事，于是我就想用 ThreeJS 画个房子 ๑乛◡乛๑ 。而我选择从画 ‘墙’ 开始下手，其实说白了‘墙’ 就是个立方体而已，但是窗户、门呢，所以就需要在立方体上边掏个洞。...那么本文将‘简单描述’一下掏洞的过程，我之所以说‘简单描述’是因为本文中不会掺杂 ‘墙’ 这个话题，在本文中只简述《如何在ThreeJS中的立方体上掏洞》的干货。...示例由于ThreeJS本身并没有提供用于几何体布尔运算的函数，那么首先认识一个可以实现对几何体布尔运算的扩展库 ThreeBSP ，它来自GitHub，它可以帮我们获取两个几何体的相同部分、将两个几何体合并

4.1K4 1

ThreeJs 基础学习

如果你要实现一个机器人在跑步，那么机器人的头、四肢、躯干等都是要整体移动的，group可以将一系列的mesh模型组成一个整体，这样就可以实现整体移动了。

6551 0

Threejs 快速入门

其实Threejs在定义一个3D物体时，需要提供两个信息，第一是形状信息，也就是这个物体上每一个点，每一个面的坐标信息，第二是材质信息，用于告诉Threejs物体的颜色，纹理，反光等信息。...这里要涉及到Threejs里的灯光设置。物体的材质由于确定物体的颜色，纹理，以及反光等属性。...Threejs的材质，除了可以设置颜色，还支持纹理贴图，我们可以把一个图片，覆盖在3D物体上作为他的纹理，这样就可以利用这些贴图来模拟更真实的场景纹理通过map属性映射到了材质上，加上材质后，整个物体就更加真实了 3D动画能绘图了，但如何加入动画呢？...还有很多额外的能力，例如刚刚我们使用图片作为纹理，那么我们也可以使用视频作为纹理，把这个纹理贴到一个盒子上，通过陀螺仪来控制摄像机的拍摄方向，就可以作出一个全景视频啦。

10.6K5 3

Threejs入门之十四：Threejs中的组(Group)对象

/ 将物体A添加到组中group.add(cubeA)// 将物体B添加到组中group.add(cubeB)// 将group添加到scene中scene.add(group) Group的特性在Threejs...console.log('group的子对象',group.children).name属性使用group.name属性可以给组命名group.name='幸福花园小区建筑'.visible 对象的显示和隐藏...group.visible = false //隐藏平移缩放旋转组的平移缩放旋转等操作会影响组里面的子对象，即子对象会跟随组对象一起变化使用group.translate对组进行平移group.translateX...使用group.rotate设置组的旋转 group.rotateY(Math.PI/4) .traverse()方法递归遍历可以通过递归遍历的算法去遍历Threejs一个模型对象包含的所有后代group.traverse...方法给子对象添加一个辅助的局部坐标系，方便观察const cubeAaxesHelper = new THREE.AxesHelper(50)cubeA.add(cubeAaxesHelper)好了，关于Threejs

3.8K1 1

纹理压缩

纹理格式是能被GPU所识别的像素格式，能被快速的寻址并采样。纹理格式如：RGB_565，每个像素占用：5+6+5=16 (bits)，共 2 个字节。...随机访问：由于几乎不可能预测纹理像素被访问的顺序，任何纹理压缩算反必须允许对其中的纹理的随机访问。...所以几乎所有的纹理压缩算法都已块为单位压缩和存储纹理像素，当某一个纹理像素被访问时，只有同一块中的若干纹理像素被读取和解压缩。...编码速度：纹理压缩对压缩速度的要求不高，因为绝大多数情况下，纹理只需要进行一次压缩。(但是对解压速度要求较高。)...在纹理贴图中，已经压缩的纹理和没有经过压缩的纹理使用起来基本没有区别，都可以被用来存储颜色数据或其他数据，例如凹凸贴图或法线贴图，也都可以和Mipmapping或各项异性过滤等共同使用。

1.8K11 1

threejs旋转入门

背景： threejs对我很重要，因为它web可视化的基础，是进场的钥匙，而我正准备搞web可视化。让我以一个立方体旋转为例子，讲讲threejs 首先，我们先从小明拍视频的故事来讲一下。

2.5K5 0

vue 中使用threejs

1、安装threejs ：npm install three --save 2、页面引入：import * as THREE from "three"; 如果使用到 OrbitControls...texture6 = new THREE.TextureLoader().load("/static/negzz.jpg"); var materialArr = [ //纹理对象赋值给

7K2 0

Shader-高级纹理-立方体纹理

立方体纹理（Cubemap）是环境映射（EnvironmentMapping）一种实现方式。...纹理采样：对立方体采样需要提供一个三维的纹理坐标，这个三维纹理坐标表示了我们在世界空间下的一个3D、方向。天空盒子 Skybox是游戏中模拟背景的一种方法，每个面使用的技术就是立方体纹理映射技术。...创建用于环境映射的立方体纹理 1.提供一张具有特殊布局的纹理，类似于立方体展开图的交叉布局、全景布局等。...我们需要将TextureType设置为Cubemap 2.使用Camera.RenderToCubemap方法实现，此方法可以把任意位置观察到的场景存储到6张图像中，从而创建出该位置上的立方体纹理。...将创建的立方体纹理存入一个Cubemap中。反射在我们的shader中加入一个模拟反射的环境映射纹理。对立方体的纹理使用CG中的texCUBE函数进行采样。我们最终得到图中结果 ?

1K3 0

Threejs入门之二十四：Threejs中的Animation动画

Threejs为我们提供了强大的动画系统接口API，通过这些接口，我们可以很轻松的实现物体的移动、旋转、缩放、颜色变化、透明度变化等各种效果，今天我们就来了解下Threejs中的动画系统。...首先我们先了解几个在Threejs动画系统中比较重要的组件KeyframeTrack 关键帧轨道关键帧轨道(KeyframeTrack)是关键帧(keyframes)的定时序列, 它由时间和相关值的列表组成...动画实例通过上面的介绍我们了解了Threejs中动画系统的几个常用组件，下面我们通过创建一个移立方体，并使其通过threejs的动画系统移动、旋转、缩放、变色等操作来使其运动起来；和前面章节一样，先搭建环境...，代码如下，具体细节就不讲了，有备注，不了解的可以看下前面的文章引入threejs，创建场景、相机、渲染器等index.html中 ...刷新浏览器发现还没有动画过程，这是因为我们还需要将动画混合器在周期处理函数中调用update函数进行更新在执行update函数时，其接收一个deltaTimeInSeconds 参数，我们先创建一个Threejs

5.2K2 0

Threejs入门之二十五：Threejs加载gltf文件

这一节我们来通过Threejs加载一个glft格式的三维模型文件，首先我们先简单了解下gltf文件gltf文件gltf文件全称Graphics Language Transmission Forma（图形语言传输格式...图像颜色与原本的gltf文件颜色有偏差，这里只需要修改WebGL渲染器默认的编码方式.outputEncoding就可以了在initRenderer()函数中加入如下代码//解决加载gltf格式模型纹理贴图和原图不一样问题

8.8K3 1

点击加载更多

threejs记录选中变化纹理

Threejs入门之十六：纹理贴图和纹理材质

threejs材质

Threejs入门之四:Threejs中的光

Threejs入门之十九：Threejs中的向量

Threejs入门之五:Threejs中的辅助对象

Shader-基础纹理-遮罩纹理

Shader-基础纹理-渐变纹理

Threejs入门之十二：认识Threejs中的材质

Threejs入门之七:Threejs中的几何体

ThreeJS 掏洞术

ThreeJs 基础学习

Threejs 快速入门

Threejs入门之十四：Threejs中的组(Group)对象

纹理压缩

threejs旋转入门

vue 中使用threejs

Shader-高级纹理-立方体纹理

Threejs入门之二十四：Threejs中的Animation动画

Threejs入门之二十五：Threejs加载gltf文件

相关资讯

热门标签

活动推荐

运营活动

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐