小编mrd*_*oob的帖子

使用THREE.LineBasicMaterial的线条粗细

我正在使用下面的代码在我的three.js场景中创建数百行

edgeGeometry[i] = new THREE.Geometry();
edgeGeometry[i].vertices[0] = v(x1,y1,z1);
edgeGeometry[i].vertices[1] = v(x2,y2,z2);
edgesMat[i] = new THREE.LineBasicMaterial({
    color: 0x6699FF, linewidth: 1, fog:true});
edge[i] = new THREE.Line(edgeGeometry[i], edgesMat[i]);
edge[i].type = THREE.Lines;
scene2.add(edge[i]);
Run Code Online (Sandbox Code Playgroud)

它工作得很好,但是当我将"linewidth"的值更改为更大或更小的值时,我看到场景中没有区别.
我该如何改变线条的粗细?有任何想法吗?
谢谢,迪米特里斯

javascript webgl three.js

30
推荐指数
5
解决办法
3万
查看次数

限制Three.js中的帧率以提高性能,requestAnimationFrame?

我在想,对于一些项目我做60fps并不是完全需要的.我想我可以有更多的物体和物体以30fps运行,如果我能让它以该帧速率平稳运行.我想如果我在three.js中编辑了requestAnimationFrame垫片,我可以将它限制为30.但是我想知道是否有更好的方法来使用提供的three.js本身.此外,这会给我带来我正在思考的性能提升.我能以30fps的速度渲染两倍于60fps的物体吗?我知道在30和60之间运行的东西之间的区别,但是我能够以平稳的恒定30fps运行吗?

我通常使用WebGLRenderer,如果需要,可以回退到Canvas,除了专门针对一个的项目,通常是webgl着色器项目.

javascript html5 canvas three.js requestanimationframe

23
推荐指数
4
解决办法
2万
查看次数

ThreeJS:更新相机FOV

我正在尝试更新相机视野,而无需创建新相机.我已经能够通过使用以下代码执行此操作:

camera.position.set()
Run Code Online (Sandbox Code Playgroud)

我想用与fov类似的方式设置它:

camera.fov.set()
Run Code Online (Sandbox Code Playgroud)

这在脚本中不起作用.其他人可以建议一个快速的方法吗?

javascript three.js

19
推荐指数
1
解决办法
8901
查看次数

将材料分配给三个.js中的OBJLoader模型

我使用以下代码导入了一个OBJ模型:

var loader = new THREE.OBJLoader();
loader.addEventListener('load', function (geometry) {
    object = geometry.content;
    scene.add(object);
});
loader.load('ship.obj');
Run Code Online (Sandbox Code Playgroud)

它工作正常,但每当我尝试添加一个材料时,它要么没有效果,要么模型消失.我以为我可以这样做:

var ship = new THREE.Mesh(object, material);
Run Code Online (Sandbox Code Playgroud)

但这不起作用.有没有人知道这样做的方法,或者甚至可能吗?我也试过使用OBJMTLLoader,但它只是增加了复杂性,但仍然不允许我更改材料.

three.js

15
推荐指数
2
解决办法
2万
查看次数

将GeometryUtils.merge()迁移到geometry.merge()

从r66迁移到r67我收到消息:

DEPRECATED:GeometryUtils的.merge()已移至Geometry.请改用geometry.merge(geometry2,matrix,materialIndexOffset).

它似乎不是直接转换,因为旧代码看起来像这样:

THREE.GeometryUtils.merge(cgeo,cloudgeometry);

我尝试过以下方法:

cgeo.merge(cloudgeometry.geometry,cgeo.matrixWorld);

编辑,也尝试了以下产生与上面相同的结果:

cgeo.merge(cloudgeometry.geometry);

结果是一个在区域内被压缩的网格,好像它完全忽略了被添加到我创建的新网格中的子网格的位置,所以我得到一个小的白色博客,而不是一个漂亮的大看起来.

没有关于这个最新变化的文档,所以我试图理解它是如何工作的,如果它是一个简单的1对1迁移它会很好,因为它会工作,但它似乎完全改变的方式.

javascript three.js

10
推荐指数
1
解决办法
2644
查看次数

Three.js如何获得网格的位置?

使用下面的代码,返回网格的位置,(0, 0, 0)但不是.那么渲染过程后计算的positioın向量是什么?

me.scene.add(objMesh); //me is a project class
objMesh.updateMatrixWorld(true);
alert(objMesh.position.x + ',' + objMesh.position.y + ',' + objMesh.position.z);
Run Code Online (Sandbox Code Playgroud)

objMesh是从objfile创建的,它被正确地添加到场景中并且质心是大约(-8,3,0)但是objMesh的位置向量是(0,0,0)我们是否必须先自动计算某些东西或者我应该计算它是从网格的几何顶点手动?

http://81.214.75.32:8181/admin 是网址

该网站是土耳其语所以我将翻译UI项目

在网站上有"Dosya"菜单项选择菜单项并选择"ProjeAç"对话框中出现一个对话框选择MUTFAK_1场景将出现在该场景中,每个网格位置为(0,0,0)即可: )

javascript three.js

8
推荐指数
3
解决办法
3万
查看次数

切换threejs控件(从TrackBall到FlyControls,反之亦然)

我想要实现的是拥有两种控制模式,一种是免费的"飞行"控制模式,另一种是以物体为中心的控制模式(轨迹球),按下按钮可以在它们之间无缝切换.

我最初尝试使用TrackBallControls和FlyControls.这两个问题是,TrackballControls基于欧拉角,而FlyControls则基于Quartenions.我尝试将camera.rotation矢量转换为四元数,

quaternion.setFromEuler( target ); //where target, a Vector3 that contains degrees
Run Code Online (Sandbox Code Playgroud)

并手动设置位置(因为它们使用相同的位置对象),虽然它似乎正在工作,但稍微旋转相机 - 并切换控件,开始产生可怕的错误结果.此外,从四元数(setEulerFromQuaternion)中获取Euler角度会导致错误的数据.

因此,虽然我能够在它们之间切换,但我始终无法同步它们的旋转坐标,所以"在开关上",而相机位置正确时,旋转是错误的.

PS.我使用FirstPersonControls(欧拉角也是如此)得到了一些结果,但屏幕lat,它使用的长方法非常容易出错,并且在Z轴旋转时完全失败.

javascript three.js

7
推荐指数
1
解决办法
3781
查看次数

如何纹理球体的不规则平面?

我想给THREE.js球体的每个面部赋予它自己的纹理.所以我让SphereGeometry计算顶点并使用面的顶点将每个面转换为PlaneGeometry.

THREE.SpherePlaneGeometry = function ( v1, v2, v3, v4 ) {

  THREE.Geometry.call( this );

  var normal = new THREE.Vector3( 0, 1, 0 );

  this.vertices.push( v1.clone() );
  this.vertices.push( v2.clone() );
  this.vertices.push( v3.clone() );
  this.vertices.push( v4.clone() );

  var face = new THREE.Face4( 0, 1, 2, 3 );

  face.normal.copy( normal );
  face.vertexNormals.push( normal.clone(), normal.clone(), normal.clone(), normal.clone() );

  this.faces.push( face );

  var uvs = [
    new THREE.UV( 1.0, 0.0 ),
    new THREE.UV( 0.0, 0.0 ),
    new THREE.UV( 0.0, 1.0 ),
    new THREE.UV( 1.0, 1.0 …
Run Code Online (Sandbox Code Playgroud)

javascript textures three.js

7
推荐指数
1
解决办法
1454
查看次数

ImageUtils.loadTexture,在Canvas渲染器中具有回调功能

我正在使用three.js修订版53

在Canvas Renderer(Win7上的IE)中加载纹理并为onLoad事件添加回调时,纹理不会显示.当我删除回调函数时,纹理将按预期显示:

//不使用回调添加

var material = new THREE.MeshBasicMaterial({
            map: THREE.ImageUtils.loadTexture('text_build.png', {}, function()
            {
 //do something
            })
});
var plane = new THREE.Mesh(new THREE.PlaneGeometry(135, 135), material);
plane .overdraw = true;
scene.add(plane );
Run Code Online (Sandbox Code Playgroud)

//没有回调的工作

var material = new THREE.MeshBasicMaterial({
             map: THREE.ImageUtils.loadTexture('text_build.png')
});
var plane = new THREE.Mesh(new THREE.PlaneGeometry(135, 135), material);
plane .overdraw = true;
scene.add(plane );
Run Code Online (Sandbox Code Playgroud)

在WebGL渲染器(FF,WIn7上的Chrome)中运行相同的代码时,两个示例都可以正常工作.

也许有人可以指出我在这里做的错误.

非常感谢.

javascript canvas webgl three.js

7
推荐指数
1
解决办法
6483
查看次数

创建透明圆柱体

我正在尝试创建一个透明的圆柱体。我尝试过设置透明、不透明度等,但似乎无法使其工作。有什么办法可以做到这一点吗?我需要加载带有 Alpha 通道的虚拟纹理吗?有没有更简单的方法?

material = new THREE.MeshBasicMaterial({wireframe: true});
material.transparent = true;
mesh = new THREE.Mesh(new THREE.CylinderGeometry(4, 4, 50, 8, 1, true), material);
scene.add(mesh);
Run Code Online (Sandbox Code Playgroud)

更新:我已将代码更改为以下内容,但以这种方式使用 ShaderMaterial 似乎是错误的。但它有效...

material = new THREE.ShaderMaterial({wireframe: true, transparent: true});
mesh = new THREE.Mesh(new THREE.CylinderGeometry(4, 4, 50, 8, 1, true), material);
scene.add(mesh);
Run Code Online (Sandbox Code Playgroud)

更新:这是图像。

  • 我无法正确添加图像或添加链接,因为我需要 11 的声誉,但只有 10,所以我添加了损坏的链接。在每个 url 前面添加“h”。

ttp://img692.imageshack.us/img692/6412/shadermaterial.png 使用 ShaderMaterial,您可以看到由透明圆柱体包围的矩形灰色精灵。

http://img855.imageshack.us/img855/3988/opacity00.png 使用具有不透明度 0.0 的 MeshBasicMaterial。

http://img27.imageshack.us/img27/6087/opacity05.png 使用不透明度为 0.5 的 MeshBasicMaterial。

http://img837.imageshack.us/img837/8043/opacity10.png 使用具有不透明度 1.0 的 MeshBasicMaterial。

javascript webgl three.js

5
推荐指数
1
解决办法
1万
查看次数