webgl 第4页 - IT屋-程序员软件开发技术分享社区

用户在three.js中上传的纹理

这里你会发现问题的 jsFiddle 改编版. 我想创建一个 3d 网络应用程序，用户可以在其中选择本地计算机上的图像文件: 选择文件后，图像将作为参数加载到 THREE.ShaderMaterial 对象中.将 glsl 着色器应用于图像，并将结果呈现到浏览器中的容器中: $("#userImage").change(function(){var texture = THREE.I ..

发布时间：2021-12-31 18:50:57 javascript opengl-es three.js webgl cors 前端开发

Three.js作为网站的背景可能吗?

我一直在考虑使用three.js 在网站上进行有趣的实验.我想使用当前的实验(我已经有了它的代码)并将其用作我网站的背景. 有人知道怎么做吗? 我在这里看到了它:http://janjorissen.be/ 三个 JS API:https://github.com/mrdoob/three.js/wiki/API-参考解决方案通常我会使用 iframe.这样您就不会与 ..

发布时间：2021-12-31 18:50:49 javascript opengl-es background three.js webgl 前端开发

Three.js - 在单个 PointCloud 中使用多个纹理

我正在尝试使用 ShaderMaterial 在单个 PointCloud 中使用多个纹理.我将一个纹理数组连同纹理索引属性一起传递给着色器，并选择适当的纹理以在片段着色器中使用. 相关设置代码: varparticleCount = 100;var 制服 = {纹理:{类型:'电视'，值:this.getTextures()}};var 属性 = {文本索引:{类型:'f'，价值: [] ..

发布时间：2021-12-31 18:48:20 javascript three.js webgl glsles 前端开发

如何在 Three.js 中使用和混合具有自定义值的多个纹理?

在 Three.js 中，是否可以创建包含多个纹理的材质(着色器?)，每个纹理都有自己的细节，将它们混合在一起并分配给几何体?我想使用多种精加工技术来模拟纸张表面，例如箔压花或点 UV 上光. 我想要实现的是一种具有以下特性的材料: '基础'层: 纸张颜色(例如白色、灰白色、米色等) 镜面反射反射率凹凸(光滑或有纹理的纸) '图像'层(可选): 图像纹理(印刷在纸上 ..

发布时间：2021-12-31 18:47:48 webgl three.js 其他开发

使用 THREE.Frustum 计算近/远平面顶点

我需要一些帮助来处理 THREE.Frustum 对象. 我的问题: 我需要计算近/远平面的顶点；我看过这些教程 http://www.lighthouse3d.com/tutorials/view-frustum-culling/view-frustums-shape/ http://www.lighthouse3d.com/tutorials/view-frustum-cu ..

发布时间：2021-12-31 18:47:39 javascript opengl-es webgl three.js 前端开发

使用键盘箭头使用three.js进行第一人称模拟

对于我的来源，请访问 http://jsfiddle.net/fYtwf/ 背景我使用three.js进行了一个简单的3d模拟，其中相机被立方体包围在3维中.这些立方体有助于在视图控件编码和测试之前可视化相机正在查看的位置.我想创建一个简单的 3D 应用程序，通过 up、down、left 和 right 控制相机键.就像摇头一样问题在我目前的申请中，当面向前方并开始 ..

发布时间：2021-12-31 18:47:25 javascript canvas webgl three.js 前端开发

Mesh 在three.js 中突然消失了.剪裁?

场景: 在我的场景中，我实现了一个顶点着色器，它将平面网格定位在相机位置的 xz 轴上.所以如果相机移动，平面网格也会随之移动.这会导致视觉效果，即在移动相机时，平面网格似乎保持固定不动.这似乎工作正常. 问题: 如果我将相机(以及平面网格)移动到一定程度，网格会突然消失. 我意识到消失和平面的大小之间似乎存在关系，即平面越大，我可以在平面网格消失之前移动相机越多. 此外，在我的 ..

发布时间：2021-12-31 18:47:17 javascript three.js webgl 前端开发

将带有纹理的简单模型从 Blender 导出到three.js

注意:我想避免在 javascript 代码中修改模型并在 Blender 中完成所有模型设计. 注意 #2:虽然这个问题很长，但它实际上是一个基本问题(标题说明了一切).以下是问题的“演练". 我正在尝试将 Blender 模型导出到 threejs.org 作为 DAE 模型，但在纹理模型方面存在问题(我尝试过JSON 和 OBJ+MTL 格式): 为了让事情更简单，以下是我 ..

发布时间：2021-12-31 18:47:02 three.js export textures webgl blender 其他开发

我在使用 Three.js 时遇到 Uncaught TypeError: undefined is not a function.在我创建 THREE.PerspectiveCamera 的行中显示错误.脚本是 window.requestAnimFrame = (function(callback){返回 window.requestAnimationFrame ||window.webki ..

发布时间：2021-12-31 18:46:47 javascript three.js webgl 前端开发

从three.js r.58 中的置换贴图计算法线?

我在three.js r.58中使用普通着色器，我理解需要一个法线贴图.但是，我使用的是动态置换贴图，因此在这种情况下，预先计算的法线贴图不起作用. 我发现的所有光照置换贴图示例都使用平面着色或预先计算的法线贴图.是否可以根据置换的顶点动态计算法线? 编辑:我已经发布了带有显示平面法线的置换贴图的球体演示: 这是 github 存储库的链接，其中包含说明此问题的所有示例以及我最 ..

发布时间：2021-12-31 18:46:13 three.js webgl shader fragment-shader 其他开发

WebGL - 带高度图的纹理地形

我正在尝试使用 WebGL 创建 3D 地形.我有一个带有地形纹理的 jpg，还有另一个带有高度值(-1 到 1)的 jpg. 我查看了各种包装器库(如 SpiderGL 和 Three.js)，但我找不到合适的示例，如果我这样做(如在 Three.js 中)，代码没有记录，我可以'不知道怎么做. 谁能给我一个好的教程或例子? Three.js 中有一个例子 http://mrd ..

发布时间：2021-12-31 18:45:16 javascript webgl terrain three.js heightmap 前端开发

在 webgl 中调试 GLSL 代码

是否可以在将 GLSL 代码与 webgl 一起使用时调试 GLSL 代码或从 glsl 代码中打印变量值?Three.js 或scene.js 是否包含任何此类功能? 解决方案不是真的，我通常调试 GLSL 的方式是输出颜色.例如，给定 2 个着色器，如 //顶点着色器统一 mat4 worldViewProjection；统一 vec3 lightWorldPos；统一ma ..

发布时间：2021-12-31 18:45:06 javascript three.js glsl webgl 前端开发

WebGL/OpenGL:比较性能

出于教育目的，我需要比较 WebGL 与 OpenGL 的性能.我有两个用 WebGL 和 OpenGL 编写的等效程序，现在我需要获取它们的帧速率并进行比较. 在 Javascript 中，我使用 requestAnimationFrame 进行动画处理，我注意到它导致帧速率始终为 60 FPS，并且仅当我切换选项卡或窗口时它才会下降.另一方面，如果我总是递归调用渲染函数，则窗口会因显而易 ..

发布时间：2021-12-31 18:44:35 javascript opengl opengl-es three.js webgl 前端开发

使用 Three.js 将 UI 元素直接绘制到 WebGL 区域

在 Three.js 中，是否可以像使用常规 HTML5 画布元素那样直接绘制到 WebGL 区域(例如，用于抬头显示或 UI 元素)? 如果是这样，您如何获得上下文以及可用的绘图命令? 如果没有，是否有另一种方法来实现这一点，通过其他 Three.js 或特定于 WebGL 的绘图命令与 Three.js 配合? 我的备份计划是使用 HTML div 作为叠加层，但我认为应该有 ..

发布时间：2021-12-31 18:42:55 user-interface webgl three.js hud 其他开发

如何使用三个 JS 动画 Camera.lookAt

我有一个场景，它渲染了一个包含多个对象的板.单击其中一个对象并通过使用对象拾取，我可以获取对象并设置摄像机位置的动画以使其位于对象的“头顶"视图中.然后使用camera.lookAt方法我可以强制相机直接看对象. 在 onUpdate 方法中调用 camera.lookAt 时，我注意到动画开始时的快速跳转，因为它最初有很大的旋转距离以查看所选对象.相比之下，对 camera.lookAt ..

发布时间：2021-12-31 18:42:02 three.js webgl 其他开发

将图像加载到立方体 Three.js

嗨，我试图将图像加载到立方体，但我不知道出了什么问题.立方体很好，但不是图像.这是链接:http://diegoddox.bitbucket.org/loadimage/ var 场景、相机、渲染器；renderer = new THREE.WebGLRenderer();renderer.setSize(window.innerWidth, window.innerHeight);render ..

发布时间：2021-12-31 18:40:25 javascript three.js webgl 前端开发

Three.js 在 Azure 中加载 .OBJ 错误但不在本地

我使用three.js for webGL 加载.obj但是在运行 Windows Server 2008 的 Windows Azure 中加载 .obj 时遇到问题我使用 Google chrome 浏览器，出现以下错误: GET http://websiteaddress.net/webGL/obj/test.mtl404(未找到) 甚至，我使用他们的原始源代码加载 .obj 文 ..

发布时间：2021-12-31 18:38:30 javascript html azure three.js webgl 前端开发

在多个画布上显示不同的场景共享资源

我正在使用 Three.js 创建一个交互式 Web 应用程序，但我遇到了一个小绊脚石: 我在页面上的可拖动 div 中包含了许多画布.我希望在每个画布中显示一个应用了不同材质的未点亮的 3D 对象(每种材质都使用自定义着色器).所有这些材料都具有相同的纹理(一种可能是蓝色的，一种可能是去饱和的，等等). 页面上画布的数量可能会有所不同，但我预计该数量通常会达到/超过 20 个画布，因 ..

发布时间：2021-12-31 18:38:07 javascript google-chrome three.js webgl 前端开发

如何像 GL_REPEAT 一样重复纹理贴图?

我的游戏中有一个房屋模型，并且我有一些用于房屋几何形状的材料.房子的墙壁有一个材质，我有一个纹理贴图图像来显示砖块. var mat = new THREE.MeshPhongMaterial( {环境:0x969696，地图:THREE.ImageUtils.loadTexture('textures/G/G0.jpg'),透支:真，组合:三.乘法运算}); 上面这样，纹理贴图看起来像 GL ..

发布时间：2021-12-31 18:37:22 opengl-es textures webgl three.js 其他开发

三.js - 绘制两个重叠的透明球体并隐藏交叉点

我在 webgl 上下文中有两个透明、重叠的球体.在重叠期间，我想控制球体的绘制方式.你可以在这个页面看到我的问题: http://andrewray.me/stuff/circle-clip.html 当红色和蓝色球体重叠时，我希望蓝色球体隐藏在红色球体后面. 如果我只是更改球体添加到场景中的顺序(如果我先添加大球体)，我会得到所需的行为:http://andrewray.me ..

发布时间：2021-12-31 18:36:39 javascript three.js webgl 前端开发

webgl相关内容