Tag: three.js

内部映射着色器自我阴影

我正在修改Joost van Dongen的内部映射着色器 ，我试图实现自我阴影。 我仍然无法弄清楚阴影投射光vector所需要的坐标。您可以在这里看到有些工作演示，我已经将光位置与相机位置的偏移连接起来，以查看发生了什么，但是显然它没有看起来也不错。 着色器代码如下。 在片段着色器中查找SHADOWS DEV。 有问题的vector是： shad_E和shad_I 。 顶点着色器： varying vec3 oP; // surface position in object space varying vec3 oE; // position of the eye in object space varying vec3 oI; // incident ray direction in object space varying vec3 shad_E; // shadow light position varying vec3 shad_I; // shadow direction […]

与three.js的透明背景

代码的工作，但我有一个问题，设置与three.jscanvas的透明背景。 我用： Background.renderer.setClearColor(0xffffff, 0); 但是背景变黑了。 我如何改变它是透明的？ 代码： var camera, scene, renderer; var mouseX = 0, mouseY = 0; var p; var windowHalfX = site.Width / 2; var windowHalfY = site.Height / 2; Background.camera = new THREE.PerspectiveCamera( 35, site.Width / site.Height, 1, 2000 ); Background.camera.position.z = 300; //camera.position.y = 200; // scene Background.scene = new THREE.Scene(); […]

将three.js背景更改为透明或其他颜色

我一直在试图改变什么似乎是从黑色到透明/任何其他颜色的canvas的默认背景颜色 – 但没有运气。 我的HTML： <canvas id="canvasColor"> 我的CSS： <style type="text/css"> #canvasColor { z-index: 998; opacity:1; background: red; } </style> 正如你在下面的在线例子中看到的，我在canvas上添加了一些animation，所以不能只是做一个不透明的：0; 在身份证。 实时预览： http ： //devsgs.com/preview/test/particle/ 任何想法如何覆盖默认的黑色？

学习WebGL和three.js

我是新来的，开始在网页浏览器上学习3D计算机graphics。 我有兴趣在浏览器中制作3D游戏。 对于已经学习WebGL和three.js的人… WebGL的知识是否需要使用three.js？ 使用three.js和WebGL有什么好处？

Three.js中同一网格物体上的多个透明纹理

是否可以在Three.js的同一个面上放置多个纹理，以便在GPU中加速GPU？ 纹理是（或应该）应用到同一个面，以便底部纹理（纹理1）没有alpha通道，上面的纹理是像下面的图像示例中纹理2的方式alpha通道。 这种混合可以使用HTML5 Canvas作为预备步骤来实现，但是由于纹理位图可能很大，我倾向于跳过Canvas混合操作。 我testing了创build一个网格的副本，并应用每个网格一个纹理，并使其他网格透明，并移动了一点，这几乎成功，但有一些闪烁，因为对象不能完全在相同的位置，有一些纹理之间的空间不是正确的效果。 他们应该看起来像他们混合在例如。 Photoshop（如下图）。

Three.js投影仪和Ray对象

我一直在尝试使用Projector和Ray类来做一些碰撞检测演示。 我已经开始尝试使用鼠标来select对象或拖动它们。 我已经看过使用这些对象的例子，但是他们似乎都没有解释投影机和Ray的某些方法在做什么。 我有一些问题，我希望有人会很容易回答。 究竟发生了什么，Projector.projectVector（）和Projector.unprojectVector（）之间有什么区别？ 我注意到在所有使用投影仪和光线对象的例子中，在创build光线之前调用了未投影的方法。 你什么时候使用projectVector？ 在这个演示中 ，我使用下面的代码在用鼠标拖动时旋转多维数据集。 有人可以用简单的术语解释，当我用mouse3D和相机取消投影，然后创buildRay时究竟发生了什么。 光线是否取决于对unprojectVector（）的调用 /** Event fired when the mouse button is pressed down */ function onDocumentMouseDown(event) { event.preventDefault(); mouseDown = true; mouse3D.x = mouse2D.x = mouseDown2D.x = (event.clientX / window.innerWidth) * 2 – 1; mouse3D.y = mouse2D.y = mouseDown2D.y = -(event.clientY / window.innerHeight) * 2 + 1; […]

Three.js：添加和移除旋转对象的孩子

我试图模拟一个魔方。 我想随机select一张脸并旋转它。 所以我创build了27个立方体网格并定位它们。 你可以在这里看到工作（不正常）rubik的立方体http://codepen.io/theonepa1/full/fzAli 什么是问题。 从上面的链接可以看到，边上的小立方体以随机方式移动（至less不是我所期望的方式） 我做了什么。 当试图旋转脸部时，我已经将属于脸部的9个立方体添加为一个新的Object3D对象。 然后使用object3d.rotate.x（或y或z）沿着它的轴旋转object3d。 我debugging了什么 我已经确定我select的第二张脸旋转的立方体是正确的。 第一次脸部旋转完成后，我更新他们的虚拟位置（不是实际的坐标）。 所以对于第二次面部旋转，我已经validation了立方体被正确拾取。 究竟发生了什么 我所做的一个观察是，在旋转object3d（拥有一个面的9个立方体的父项）之后，立方体（较小的）轴被改变。 并且立方体的坐标也不会在脸部旋转后自动更新。 例如，如果其中一个立方体具有（0,0,22）作为面部旋转之前的坐标，则即使在旋转之后坐标也是相同的。 然而，立方体的轴的方向改变。 围绕轴旋转一组对象的最佳方法是什么？ 使用Object3D是否正确？ 我们是否应该在将其添加到另一个组中以进行第二次面部轮换之前，将其从一位父母中移除？ 在将其添加到第二组进行第二次面部轮转之前，是否需要对各个立方体进行某种更新？ 我已经阅读了一些关于applyMatrixWorld的文章，但我真的不明白它对轴的方向和立方体的坐标有何影响？ 你可以让我知道我在哪里可以阅读像applyMatrixWorld这样的概念，在正常的3D编程中它是一种常见的概念吗？ 这是一个很长的问题。 真的很感激你的回复:)

使用ShaderMaterial复制MeshLambertMaterial将忽略纹理

我注意到THREE.js在内部使用着色器来创build核心材质，例如MeshLambertMaterial，所以我决定将Three.js代码中的lambert着色器复制到一个新的着色器中并在其上构build。 这是我得到的代码（从Three.js r66忠实复制） THREE.MyShader = { uniforms: THREE.UniformsUtils.merge( [ THREE.UniformsLib[ "common" ], THREE.UniformsLib[ "fog" ], THREE.UniformsLib[ "lights" ], THREE.UniformsLib[ "shadowmap" ], { "ambient" : { type: "c", value: new THREE.Color( 0xffffff ) }, "emissive" : { type: "c", value: new THREE.Color( 0x000000 ) }, "wrapRGB" : { type: "v3", value: new THREE.Vector3( 1, 1, 1 […]

在THREE.js中使用纹理

我从THREE.js开始，我正在尝试绘制一个带有纹理的矩形，并由一个光源点亮。 我认为这是如此简单（为简洁起见，省略了HTML）： function loadScene() { var world = document.getElementById('world'), WIDTH = 1200, HEIGHT = 500, VIEW_ANGLE = 45, ASPECT = WIDTH / HEIGHT, NEAR = 0.1, FAR = 10000, renderer = new THREE.WebGLRenderer(), camera = new THREE.Camera(VIEW_ANGLE, ASPECT, NEAR, FAR), scene = new THREE.Scene(), texture = THREE.ImageUtils.loadTexture('crate.gif'), material = new THREE.MeshBasicMaterial({map: texture}), // material = […]

如何从Three.jscanvas保存图像？

如何从Three.jscanvas保存图像？ 我试图使用Canvas2Image，但不喜欢玩Threejs。 由于canvas没有被定义，直到它有一个div来附加canvas对象。 Canvas2Image: Save out your canvas data to images