Tag: three.js

ThreeJS：从场景中移除物体

我正在使用ThreeJS开发一个Web应用程序，显示实体列表，每个实体都有相应的“查看”和“隐藏”button。 例如entityName 查看隐藏 。 当用户点击查看button时，下面的函数被调用，实体在屏幕上绘制成功。 function loadOBJFile(objFile){ /* material of OBJ model */ var OBJMaterial = new THREE.MeshPhongMaterial({color: 0x8888ff}); var loader = new THREE.OBJLoader(); loader.load(objFile, function (object){ object.traverse (function (child){ if (child instanceof THREE.Mesh) { child.material = OBJMaterial; } }); object.position.y = 0.1; scene.add(object); }); } function addEntity(object) { loadOBJFile(object.name); } 并点击隐藏button，下面的函数被调用： function removeEntity(object){ scene.remove(object.name); […]

three.js – 网格组的例子？ （THREE.Object3D（）高级）

我试图了解如何将孩子网格分组/链接到父母。 我希望能够： 拖动父项 相对于父元素旋转子元素 有父母轮换/翻译为孩子做正确的事情 我唯一的背景是在第二人生中使用LSL来操作对象中的链接的元素。 我想我不想合并网格，因为我想保持每个孩子的控制（hover，纹理，旋转，缩放等）。 有什么好的教程呢？ 这是用THREE.Object3D（）实现的，是吗？ 谢谢Daniel

Three.js检测webgl支持并回退到常规canvas

任何使用three.js的人都可以告诉我它是否有可能检测到webgl支持，如果不存在，可以回退到标准的Canvas呈现器吗？

THREE.JS的首选3D模型格式

THREE.JS的首选3D模型格式，被3Dbuild模软件广泛使用（可以导出为这种格式）。 我问这个，因为我有我自己独特格式的3D模型，并且想在THREE.JS中使用它们。 虽然我可以编写自己的加载程序，但我认为最好将其转换为标准格式。

如何获得一个孩子对象的全球/世界的位置？

如何获得Object3D在另一个Object3D中的全局位置？ build立： var parent = new THREE.Object3D(); parent.position.set(100, 100, 100); var child = new THREE.Object3D(); child.position.set(100, 100, 100); parent.add(child); scene.add(parent); 笔记： 我认为这是做到这一点的方法： console.log(child.localToWorld(parent.position)); …但它给我（100，100，100） ，而不是（200，200，200） 。

如何在THREE.JS上创build自定义网格？

我问了这个，得到了答案： var geom = new THREE.Geometry(); var v1 = new THREE.Vector3(0,0,0); var v2 = new THREE.Vector3(0,500,0); var v3 = new THREE.Vector3(0,500,500); geom.vertices.push(new THREE.Vertex(v1)); geom.vertices.push(new THREE.Vertex(v2)); geom.vertices.push(new THREE.Vertex(v3)); var object = new THREE.Mesh( geom, new THREE.MeshNormalMaterial() ); scene.addObject(object); 我希望这个工作，但没有。

为什么我的three.js场景中的焦点仍然集中在相机的视angular，但只在Chrome的Android？

我正在使用AngularJS和Three.js来尝试开发一个VR应用程序的小例子。 我已经根据用户代理是否是移动设备来定义控件。 这是一个狡猾的方法，但这只是一个例子。 OrbitControls用于非移动设备，否则使用DeviceOrientationControls。 var controls = new THREE.OrbitControls(camera, game.renderer.domElement); controls.noPan = true; controls.noZoom = true; controls.target.set( camera.position.x, camera.position.y, camera.position.z ); // Really dodgy method of checking if we're on mobile or not if(/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) { controls = new THREE.DeviceOrientationControls(camera, true); controls.connect(); controls.update(); } return controls; 我还创build了一些实际显示的对象。 this.camera = new THREE.PerspectiveCamera(90, window.innerWidth / window.innerHeight, 0.001, […]

如何停止requestAnimationFramerecursion/循环？

我正在使用WebGL渲染器的Three.js来制作一个游戏，当点击一个play链接时，它将全屏显示。 对于animation，我使用requestAnimationFrame 。 我发起这样的： self.animate = function() { self.camera.lookAt(self.scene.position); self.renderer.render(self.scene, self.camera); if (self.willAnimate) window.requestAnimationFrame(self.animate, self.renderer.domElement); } self.startAnimating = function() { self.willAnimate = true; self.animate(); } self.stopAnimating = function() { self.willAnimate = false; } 当我想要时，我称之为开始startAnimating方法，是的，它按预期工作。 但是，当我调用stopAnimating函数时，事情就会中断！ 没有报告的错误，虽然… 设置基本上是这样的： 页面上有play链接 一旦用户点击链接，渲染器的domElement应该全屏显示，并且确实如此 startAnimating方法被调用，渲染器开始渲染东西 一旦点击逃生，我注册一个fullscreenchange事件并执行stopAnimating方法 页面尝试退出全屏，但是，整个文档是完全空白的 我很确定我的其他代码是好的，而且我以某种方式以错误的方式停止requestAnimationFrame 。 我的解释可能会被吸引，所以我上传了代码到我的网站，你可以看到它发生在这里： http : //banehq.com/Placeholdername/main.html 。 这里是我不试图调用animation方法，并进行全屏播放的版本： http : //banehq.com/Correct/Placeholdername/main.html 。 一旦第一次点击游戏，游戏初始化并执行start方法。 […]

用鼠标在Three.js中旋转相机

在我的场景中，我有很多的东西，所以旋转它们都可能是一种痛苦。 那么在鼠标点击和拖拽的情况下移动相机的最简单方法是什么？ 这样，场景中的所有灯光，物体都在同一个位置，所以唯一改变的就是相机。 Three.js没有提供围绕某个点旋转摄像机的方法，或者是这样吗？ 谢谢

WebGL和ThreeJS中改进的区域照明

我一直在研究与WebGL相似的区域照明实现： http://threejs.org/examples/webgldeferred_arealights.html three.js中的上述实现已经从gamedev.net上的ArKano22的工作中移出： http://www.gamedev.net/topic/552315-glsl-area-light-implementation/ 虽然这些解决scheme非常令人印象深刻，但它们都有一些限制。 ArKano22最初实现的主要问题是漫射项的计算不考虑曲面法线。 我几个星期以来一直在扩充这个解决scheme，通过redPlant的改进来解决这个问题。 目前我有正常的计算纳入解决scheme，但结果也有缺陷。 这是我目前实现的一个预览： 介绍 计算每个片段的漫射项的步骤如下： 将顶点投影到区域光线所在的平面上，以使投影的vector与光线的法向/方向一致。 通过比较投影向量和光的法线，检查顶点是否在区域光平面的正确的一侧。 计算平面上该投影点从光源中心/位置的二维偏移量。 钳位这个二维偏移vector，使它位于光线区域内（由其宽度和高度定义）。 导出投影和钳位的2D点的3D世界位置。 这是顶点上的最近点 。 通过取顶点到最近点向量（归一化）和顶点法线之间的点积来执行通常的漫reflection计算。 问题 这个解决scheme的问题在于，照明计算是从最近的点完成的，并且不考虑灯表面上的其他点可能更多地照亮片段。 让我试着解释为什么… 考虑下图： 面光既垂直于表面又与其相交。 表面上的每个碎片将始终返回表面和光线相交处的区域光线上的最近点 。 由于曲面法线和顶点 – 光线vector总是垂直的，它们之间的点积是零。 随后，尽pipe在表面上有大面积的光线，漫射贡献的计算是零。 潜在的解决scheme 我build议，不要从面积光线上的最近点计算光线，而是从面积光点上计算顶点到光线vector（归一化）和顶点法线之间的最大点积。 在上图中，这将是紫色点，而不是蓝色点。 帮帮我！ 所以，这是我需要你的帮助。 在我的脑海里，我对这个观点是如何得出的有一个很好的想法，但是没有达到解决的math能力。 目前我在片段着色器中有以下信息： 顶点位置 顶点法线（单位vector） 光的位置，宽度和高度 光正常（单位vector） 轻右（单位vector） 点亮（单位vector） 投影点从顶点到灯光平面（3D） 距离灯光中心的投影点偏移量（2D） 夹持偏移（2D） 这个夹持偏移的世界位置 – 最近点 （3D） 为了将所有这些信息放到一个可视的上下文中，我创build了这个图（希望它有帮助）： 为了testing我的build议，我需要在由红点表示的区域灯光上的投射点，以便在顶点到投射点（标准化）和顶点法线之间执行点积。 再次，这应该产生最大可能的贡献值。 UPDATE！ 我已经在CodePen上创build了一个交互式的草图，它可视化我目前已经实现的math： […]