草庐IT

myseries_three

全部标签

javascript - 用网格填充 three.js 场景

我在找什么在three.js场景中显示填充整个场景的网格。在这种情况下,场景是整个窗口。这个网格代表一个3D表面,可以使用THREE.TrackballControls用鼠标四处移动这个网格面向相机,所以最初它看起来像一个平面(2D)表面,直到轨迹球被移动用鼠标四处移动。网格线的宽度应等于渲染器的宽度。我做了什么我已经设置了一个工作jsFiddle对于我到目前为止所做的。首先我找到场景的边界(所有这些都在jsFiddle中),App=function(sceneContainerName){this.sceneContainerName=sceneContainerName;this.

javascript - 如何正确处理 Three.js 场景? (r55)

似乎Three.js没有一个很好的方法来处理THREE.Scene和该场景中的所有对象。目前我正在做以下事情:$.each(scene.__objects,function(idx,obj){scene.remove(obj);if(obj.geometry){obj.geometry.dispose();}if(obj.material){if(obj.materialinstanceofTHREE.MeshFaceMaterial){$.each(obj.material.materials,function(idx,obj){obj.dispose();});}else{obj.

javascript - 将 Three.js 骨骼动画更新到新的基于混合器的系统

混音器系统是在r73中引入的,从那时起我一直在尝试将我的游戏更新到这个新系统。除了一件事,我几乎就在那里。某些具有特定几何形状的动画的淡入淡出有轻微的延迟,这在r72中是不存在的。我破解了r72的BlendCharacter和Animation函数以允许回调并且效果很好。在73中,这不是必需的,因为它通过事件触发器内置了此功能。在下面的fiddle中,一切都按预期工作(r72)。http://jsfiddle.net/titansoftime/a93w5hw0/varscene,camera,renderer,ambient,directional;varmesh,geoCache={

javascript - 使用 React-Three-Renderer 的 Sprite 标签(包括 MVCE)

我正在使用react-three-renderer(npm,github)来构建带有three.js的场景.我正在尝试使用和制作一个始终面向相机的标签,就像在stemkoski'sexample中一样.但是,我无法显示标签并正确设置其坐标。我在Sprite-Label-Test有一个最低限度可验证的完整示例.下载它,运行npminstall,然后打开_dev/public/home.html。我的目标是让文本显示在我期望的位置,但如您所见,它只是黑色。为了证明Sprite在相机的视野中,我在相同的位置放了一个盒子。要查看从渲染方法中取消注释并重新吞咽。这是我的文件。它有两个主要组成部分

javascript - 如何在 three.js 中设置 Z 坐标系?

在three.js中,Y轴代表上下,Z轴代表前进和后退。但我希望Z轴表示上下,Y轴表示向前和向后。这是一张显示我想要的图像:我想改变整个坐标系,如果我绕y轴旋转网格,它会遵循新坐标系而不是传统坐标系。现在,我搜索了堆栈溢出并找到了这个链接:Three.JSrotateprojectionsothattheyaxisbecomesthez-axis.它不起作用。THREEJS:MatrixfromZ-UpCoordinateSystemtoY-UpCoordinateSystem.此方法仅更改对象或网格的y和z顶点,但如果我围绕y轴旋转它,它会围绕传统的y轴旋转。我还必须将矩阵应用于旋转

javascript - Three.js - 如何旋转对象以注视一个点并朝向另一个点

一般来说,我是three.js和3d编程的新手,所以这似乎是一个非常简单的问题。理想情况下,我希望答案可以帮助我理解基本原理。我有一个对象需要“指向”另一点(为简单起见,在本例中为原点),这可以使用Object3D.lookAt(point)函数轻松完成。这很好地指向了对象的Z轴。我还想围绕其Z轴旋转名为looker的对象,使其X轴通常指向另一个对象refObj。我知道X轴不能直接指向refObj除非该对象恰好与原点形成直Angular。我希望looker的X轴位于由origin、refObj和looker创建的平面上,如图所示下面:进行旋转的最简单方法似乎是修改looker.rota

javascript - 一个场景,但带有自己的相机的多个视口(viewport)(three.js)

我有一个场景想重复使用,在两个div中渲染场景,每个div的相机Angular不同。Thislink说一个场景不能在多个渲染器之间共享,并建议将多个视口(viewport)与单个渲染器一起使用。如何将多个摄像头分配给一个渲染器,然后获取显示每个摄像头的DOM元素?谢谢 最佳答案 您想完全按照这个three.js示例中的方式进行操作:https://threejs.org/examples/webgl_multiple_views.html这使用多个视口(viewport),而不是多个div。这确实是最好的方法。

javascript - Three.js 将对象附加到骨骼

有什么方法可以将网格附加到骨骼上吗?例如,我加载了动画.jsAngular色,我想将武器附加到它的手上。 最佳答案 在Bone和Object3D原型(prototype)上使用一些简单的hack是可能的。由于骨骼继承自Object3D,它们可能有子对象,所以我们可以轻松地.add()一个网格到任何骨骼。但是,SkinnedMesh只会对非Bone子对象调用updateMatrixWorld(),对Bone子对象调用update()。此外,骨骼会为其每个子级调用update()(无论它是否是骨骼)。以下片段改变了这种行为://modi

javascript - Three.js - 在自定义几何体上对 Lambert Material 进行平滑着色时出现问题

我在Three.js中创建了一个自定义几何体。现在,我想创建一个使用平滑阴影LambertMaterial的网格。使用循环,我创建了顶点数组,然后是面,然后我调用了geometry.computeCentroids();geometry.computeFaceNormals();geometry.computeVertexNormals();varcolorMaterial=newTHREE.MeshLambertMaterial({color:0x0000ff,side:THREE.DoubleSide});varmesh=newTHREE.Mesh(geometry,colorMa

javascript - 如何在 three.js 中切换 preserveDrawingBuffer?

基本上,我想要可以转到preserveDrawingBuffer=true的设置,渲染场景一次,抓取屏幕截图,然后返回。然而,这带来了两个问题:渲染器中没有处理所有缓冲区的方法,如果我这样做,Canvas会变黑renderer=newTHREE.WebGLRenderer({canvas:renderer.domElement,preserveDrawingBuffer:true});如何正确执行此操作?编辑:我没有找到切换它的方法,所以我不得不克隆场景并创建第二个渲染器来制作屏幕截图。参见https://github.com/mrdoob/three.js/issues/189