我是3D编程的新手,我开始用Three.JS从WebGL开始探索3D世界.
我想在更改camera.position.z和对象的"Z"位置时预先确定对象大小.
例如:我有一个大小为100x100x100的立方体网格.
cube = new THREE.Mesh(
new THREE.CubeGeometry(100, 100, 100, 1,1,1, materials),
new THREE.MeshFaceMaterial()
);
和纵横比为1.8311874的凸轮
camera = new THREE.PerspectiveCamera( 45, aspect_ratio, 1, 30000 );
我想知道屏幕上多维数据集对象的大小(2D宽度和高度),
camera.position.z = 750;
cube.position.z = 500;
有没有办法找到它/预先确定它？
我正在使用three.js r67,顶点似乎没有更新.我订了geometry.dynamic = true,geometry.verticesNeedUpdate = true.圆正在移动,但线是静态的....
有人可以帮帮我吗？
var scene = new THREE.Scene();
var renderer = new THREE.WebGLRenderer();
var g = new THREE.CircleGeometry( 4, 16 );
var m = new THREE.MeshBasicMaterial({color: 0x114949});
var circle = new THREE.Mesh( g, m );
circle.position.x = 2;
circle.position.y = 2;
circle.position.z = -1;
scene.add( circle );
var material = new THREE.LineBasicMaterial({color: 0xDF4949, linewidth: 5});
var geometry = new THREE.Geometry();
geometry.vertices.push(new THREE.Vector3(0, 0, 0));
geometry.vertices.push(new THREE.Vector3(1, 1, 0));
geometry.verticesNeedUpdate = true;
geometry.dynamic …我想在Three.js中处理丢失的上下文事件.有一个关于一个很好的文件在这里,但不幸的是,当我把它应用到我这是行不通的renderer.domElement.我尝试通过单击来丢失上下文,并且某些变量loseContext()未定义.
我猜Three.js的结构不同.有专家吗？
我想获得由three.js自动创建的canvas元素的id.
或者,我会同样高兴(或许更是如此)能够在构造期间传递预先存在的画布元素id.
经过研究,我试过这个:
renderer = new THREE.WebGLRenderer( { canvas: my_canvas } );
没有成功(它来自一个非常古老的版本,但希望它能工作).也许一些参数语法自2年前发生了变化？
(my_canvas是画布的id,也试过传递上下文,没有运气)
最后我试过:
document.getElementsByTagName('canvas');
什么都没有回来......这是一个让人感到困惑的谚语,让我在这里发帖.
有任何见解,谢谢!(我现在有投票权)
我想重置时钟,以便从重置时钟开始clock.getElapsedTime()给我一个新的时间(例如,第二次重启游戏关卡/场景时很有用).
我发起clock = new THREE.Clock(); 的init(),在我的游戏循环update()中,我使用这个时钟.但是当游戏结束时,我想重置时钟(我没有再次启动该级别,而只是将玩家放回到开头,所以我没有启动新的时钟).
我怎样才能做到这一点？
我正在尝试使用 THREE.js 中的直通顶点着色器建立一个全屏四边形。四边形本身是一个平面几何体，尺寸 (2, 2) 位于原点。它被分配了 ShaderMaterial。相机瞄准z = 1四边形。
着色器非常简单：
顶点着色器：
void main() {
gl_Position = vec4( position, 1.0 );
}
片段着色器：
void main() {
gl_FragColor = vec4(0.0, 1.0, 0.0, 1.0);
}
但屏幕上什么也没有显示。此设置是渲染到纹理的标准方法，为什么它在 THREE.js 中不起作用？
我尝试过plane.frustumCulled = false更改相机的剪辑平面，但无济于事。
任何帮助表示赞赏。
经过进一步调查，看不到渲染结果的原因更为复杂，并指出了 Three.js 中的一些奇怪行为。
我使用的是应用了旋转矩阵的 PlaneGeometry，然后由具有反向旋转的 Object3D 包裹。
var geometry = new THREE.PlaneGeometry(2, 2);
var m4 = new THREE.Matrix4().makeRotationX(Math.PI * 0.5);
geometry.applyMatrix(m4);
var mesh = new THREE.Mesh(geometry, material);
var obj = new THREE.Object3D();
obj.add(mesh);
obj.rotation.x = -Math.PI * …我有许多可能长的折线(或短,顶点数很高的易变性)来显示,所以我考虑将它们打包成一堆固定大小(比如10000个顶点)位置BufferAttribute并drawcall每个折线发送一个.如果折线穿过10000极限边界,我可以将其拆分,重复上一个缓冲区中的最后一个顶点作为新缓冲区的第一个顶点,并继续使用多个THREE.Line对象.
我的理解是a drawcall是addGroup()在最近的three.js中定义的,但是我很难理解与之相关的链接setDrawRange().
我在这个例子中替换setDrawRange()了addGroup():http://jsfiddle.net/1v00pxx5/并且它不再动画(动态地绘制一条带有three.js的行).
我换了:
line.geometry.setDrawRange( 0, drawCount );
通过
line.geometry.clearGroups();
line.geometry.addGroup( 0, drawCount );
看起来我误解了一些东西,因为它渲染了所有内容,而不仅仅是我定义的单个组.
这是我疯狂的上下文:我正在构建一个访问USB的chrome打包应用程序,webgl和USB都必须在主要的JS线程上,但有时当将几何上传到webgl时,它会使USB匮乏,我可以'使用更大的USB缓冲区,因为USB电缆另一侧的设备没有足够的内存.