使用Threejs和shaderMaterial给plane贴图

最新推荐文章于 2024-07-08 16:09:04 发布
最新推荐文章于 2024-07-08 16:09:04 发布
阅读量6.8k 收藏 5
点赞数 2
分类专栏： threejs 文章标签： threejs
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_30621091/article/details/56051066
版权
本文介绍了如何在threejs中利用shaderMaterial为plane几何体进行贴图。作者作为初学者，分享了实现简单贴图效果的过程，并展示了最终的视觉效果。
摘要由CSDN通过智能技术生成

搞了一段时间的threejs，最近想慢慢学习threejs中的shader用法，最然threejs中有TextureLoader很简单的就可以进行贴图，不过为了学习shader嘛，就写写喽！，俺也是初学，写的烂还望包容哈
1、使用shader给plane进行贴图
最终效果如下图所示：
这里写图片描述
完整代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script src="libs/three.js"></
最低0.47元/天 解锁文章
pengpai123
关注
专栏目录
three.js mtl材质贴图未显示_如何在threejs中使用shader
weixin_39815410的博客
12-15 517
webgl开发中，shader总是一个绕不开的话题，今天我们就来聊聊如何在threejs中如何使用shader。事先声明下，本人也不是shader大神，只是工作中会用到。这篇文章带有一定科普性质，适合新手扫盲，如果是老手，可以直接略过。什么是shader所谓shader中文叫做着色器，它实际上是给用户一种方式来介入GPU渲染流程，定制gpu如何组织数据和绘制数据到屏幕上。一般来说着色器会分为顶点着...
threejs-shader-materials:Three.js的着色器材料集合
05-09
threejs-shader-materials Three.js的着色器材料集合 演示版 入门 安装 npm install https://github.com/MasatoMakino/threejs-shader-materials.git --save-dev 进口 threejs-shader-materials由ES6模块和TypeScript d.ts文件组成。 首先，导入类 import { HexGridMaterial } from "threejs-shader-materials" ; 并设置材料。 const geo = new SphereGeometry ( 10 , 64 , 64 ) ; const mat = new HexGridMaterial ( ) ; const mesh = new Mesh ( geo , mat ) ; scen
ThreeJS-3D教学十二：ShaderMaterial
weixin_44384273的博客
07-01 1249
ShaderMaterial
ThreeJs的学习：贴图（2）自定义着色器-GLSL接触
太古时代的专栏
07-25 1852
着色器语言GLSL ES和相关的WebGL API、 OpenGL ES Shader相关API —— GLSL 语法 <!DOCTYPE html> <html lang="en"> <head> <title>three.js webgl - indexed instancing (single box), dynamic updates...
Three.js ShaderMaterial着色器
u014291990的博客
12-06 1812
本节课介绍下threejs如何通过ShaderMaterial来自定义Shader。
threejs10 Material-shaderMaterial
—巨人绿
10-25 1095
var sphereGeometry = new SphereBufferGeometry(5, 12, 12); var material = new THREE.MeshPhongMaterial(); var sphereMesh = new THREE.Mesh(sphereGeometry, material) scene.add(sphereMesh); var shaderMaterial = new THREE.ShaderMaterial( { vertexS
threejs 物体根据相机位置显示_Threejs学习笔记(一) 基础篇
weixin_39556891的博客
12-20 1952
基本概念此学习笔记主要记录使用threejs的制作http://sqace.163.com网站中用到的API和相关知识点。一个完整的3D环境包含以下元素:1.场景(Scene)：是物体、光源等元素的容器，2.相机(Camera)：控制视角的位置、范围以及视觉焦点的位置,一个3D环境中只能存在一个相机3.物体对象(Mesh)：包括二维物体(点、线、面)、三维物体、粒子4.光源(Light)：包括全局...
threejs效果记录
蛋蛋老公的博客
08-18 4198
/ 使用SceneUtils创建多材质对象 let mesh = new THREE . SceneUtils . createMultiMaterialObject(geometry , materials);}
转动的背景贴图
知屋安砖
09-18 260
转动的背景贴图示例HTMLCSSJS 更多有趣示例 尽在小红砖社区 示例 HTML <canvas id="c"></canvas> CSS body { margin: 0; } #c { width: 100vw; height: 100vh; display: block; } JS // Three.js - Background Cubemap // from https://threejsfundamentals.org/threejs/threej
Threejs载入obj和mtl以及添加旋转和阴影,自适应，鼠标控制
热门推荐
Hi_Panda
01-16 1万+
Example 03.01 - Ambient Light body { /* set margin to 0 and overflow to hidden, to go fullscreen */ margin: 0; overf
THREE-CustomShaderMaterial:使用您自己的顶点着色器扩展 Three.js 标准材质！
08-03
三个CustomShaderMaterial 使用您自己的顶点着色器扩展 Three.js 标准材质！ ·· 安装 npm install three-custom-shader-material # or yarn add three-custom-shader-material 对于浏览器，从build/下载文件。 这是每个文件的内容： three-csm.js - 浏览器使用[removed]标签导入三的 IIFE 类型模块。 three-csm.m.js - ES 模块。 导入三 NodeJS 方式import * as THREE from "three" three-csm.m.cdn.js - ES 模块。 从 CDN 导入三个import * as THREE from "https://cdn.skypack.dev/three"导入三个 输入 节点 在 Node
在ThreeJS中使用自定义顶点和片段着色器
08-11
在ThreeJS中使用自定义顶点和片段着色器
Three.js ShaderMaterial
mu399的专栏
07-01 1157
自定义材质的使用，ShaderMaterial 和 RawShaderMaterial的区别是，前者可以使用一些通用的uniform, attribute 等等，比如 positon，uv， modelViewMatrix, modelMatrix 不需要去定义，可以直接在ShaderMaterial中使用，three.js 会自动定义好这些通用的 变量，并且时候去更新这些 内建变量，也不用去操心，由 three.js 来接管。 后者 RawShaderMaterial 没有这些内建变量，shader代码里
计算THREE.Shape()生成的形状的uv，用shader material贴图
郭不耐 {大数据 @ 可视化}
10-23 2691
THREE.Shape()生成的形状会打破默认uv计算方式，需要重新计算才能正确应用shader的渐变色。
Three.js的着色器材质(ShaderMaterial)
地理信息技术杂谈 博客，欢迎技术交流
08-23 1840
ShaderMaterial简介： http://www.webgl3d.cn/threejs/docs/index.html#api/zh/materials/ShaderMaterial Three.js中可以使用自定义的着色器（shader），进行材质的渲染，并且Three.js的类库中预置了一些常用的shader，可以直接拿来进行使用，下载Three.js的类库包，可以在three\examples\js\shaders中使用对应的js文件。 使用方式 以垂直模糊为例： js引用 <scr
THREE.ShaderMaterial 添加纹理sampler2D texture
X01动力装甲的专栏
11-06 4404
THREE.ShaderMaterial 添加纹理 sampler2D texture 研究一下ShaderMaterial，主要包含以下几个功能。 给plane添加纹理 用灰度图生成地形 用简单的函数生成水波 让水波流动起来 设置多张纹理 动态改变纹理的颜色 用法线改变物体的颜色 效果如下，场景中主要又三个物体，plane1,plane2，Sphere。 plane1: 演示给plane添加...
ThreeJS-3D教学十五：ShaderMaterial（noise、random）
最新发布
weixin_44384273的博客
07-08 567
threejs shader的顶点着色器写法
three.js实现贴图的倒影效果
05-10
使用three.js实现贴图的倒影效果可以通过以下步骤实现： 1. 创建一个场景和相机 ``` const scene = new THREE.Scene(); const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); camera.position.z = 5; ``` 2. 创建一个平面几何体，并设置其位置和旋转，同时为其添加一个材质（使用图片贴图）和一个网格 ``` const geometry = new THREE.PlaneGeometry(2, 2); const texture = new THREE.TextureLoader().load('path/to/texture.jpg'); const material = new THREE.MeshBasicMaterial({map: texture}); const plane = new THREE.Mesh(geometry, material); plane.position.y = -1; plane.rotation.x = -Math.PI / 2; scene.add(plane); ``` 3. 创建一个渲染器，并将其添加到DOM元素中 ``` const renderer = new THREE.WebGLRenderer(); renderer.setSize(window.innerWidth, window.innerHeight); document.body.appendChild(renderer.domElement); ``` 4. 创建一个渲染目标，并将其设置为平面几何体的材质的map属性 ``` const renderTarget = new THREE.WebGLRenderTarget(window.innerWidth, window.innerHeight); material.map = renderTarget.texture; ``` 5. 创建一个镜像相机，并将其放置在平面几何体的下方 ``` const mirrorCamera = new THREE.CubeCamera(0.1, 10, 256); mirrorCamera.position.set(0, -1, 0); scene.add(mirrorCamera); ``` 6. 将场景中的物体渲染到渲染目标中，并将镜像相机的renderTarget设置为渲染目标 ``` mirrorCamera.update(renderer, scene); ``` 7. 将渲染目标渲染到屏幕上 ``` renderer.render(scene, camera); ``` 完整代码如下： ``` const scene = new THREE.Scene(); const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); camera.position.z = 5; const geometry = new THREE.PlaneGeometry(2, 2); const texture = new THREE.TextureLoader().load('path/to/texture.jpg'); const material = new THREE.MeshBasicMaterial({map: texture}); const plane = new THREE.Mesh(geometry, material); plane.position.y = -1; plane.rotation.x = -Math.PI / 2; scene.add(plane); const renderer = new THREE.WebGLRenderer(); renderer.setSize(window.innerWidth, window.innerHeight); document.body.appendChild(renderer.domElement); const renderTarget = new THREE.WebGLRenderTarget(window.innerWidth, window.innerHeight); material.map = renderTarget.texture; const mirrorCamera = new THREE.CubeCamera(0.1, 10, 256); mirrorCamera.position.set(0, -1, 0); scene.add(mirrorCamera); mirrorCamera.update(renderer, scene); renderer.render(scene, camera); ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值