Tag: three.js

使用投影在Three.js中将世界坐标转换为屏幕坐标: 在Three.js中有几个优秀的堆栈问题（ 1，2 ）是关于如何将浏览器中的（x，y）鼠标坐标转换为Three.jscanvas空间中的（x，y，z）坐标。他们大多遵循这种模式： var elem = renderer.domElement, boundingRect = elem.getBoundingClientRect(), x = (event.clientX – boundingRect.left) * (elem.width / boundingRect.width), y = (event.clientY – boundingRect.top) * (elem.height / boundingRect.height); var vector = new THREE.Vector3( ( x / WIDTH ) * 2 – 1, – ( y / HEIGHT ) * 2 + 1, 0.5 ); […]

如何在three.js轴上旋转3D对象？: 我有一个很大的关于three.js的旋转问题，我想在我的游戏中旋转我的3D立方体。 //init geometry = new THREE.CubeGeometry grid, grid, grid material = new THREE.MeshLambertMaterial {color:0xFFFFFF * Math.random(), shading:THREE.FlatShading, overdraw:true, transparent: true, opacity:0.8} for i in [1…@shape.length] othergeo = new THREE.Mesh new THREE.CubeGeometry(grid, grid, grid) othergeo.position.x = grid * @shape[i][0] othergeo.position.y = grid * @shape[i][1] THREE.GeometryUtils.merge geometry, othergeo @mesh = new THREE.Mesh geometry, material //rotate @mesh.rotation.y += […]

Three.js相机上下倾斜并保持水平: camera.rotate.y以可预测的方式向左或向右平移。当camera.rotate.y在180度时，camera.rotate.x可以预测地查看或者下载。但是当我把camera.rotate.y的值改成一些新的值，然后我改变camera.rotate.x的值，水平旋转。我找了一个algorithm来调整camera.rotate.x改变后的水平旋转，但没有find它。

Three.js – 视图的宽度: 有没有办法找出场景的渲染部分的宽度？例如，如果我们有一个宽度为100的网格，但是具有一定的缩放级别，我将如何计算在屏幕上渲染的网格部分的宽度？

Threejs中的透明对象: 我正在尝试在Three.js中写一个小程序，显示两个球体，一个在另一个的内部。球体2的半径应该在0.5到1.5之间摆动，而球体1的半径总是为1.0。每个球体都是透明的（不透明度：0.5），这样就可以看到较大球体中包含的较小球体。当然，“更小”和“更大”的angular色随着球体半径的变化而变化。现在的问题是，Three.js使我在程序中定义的第一个球体透明，而不是第二个球体。如果我定义第一个sphere1，那么它变成透明的，但是sphere2是完全不透明的。如果我定义第一个sphere2，那么这是透明的。将它们添加到场景中的顺序不起作用。我在下面包含一个显示正在进行的最小程序（没有animation）。在当前状态下，sphere1是可见的，并且不透明。如果我在sphere2之前定义sphere1，那么sphere1变成透明，但sphere2不再透明。然后将sphere2的半径改为1.2将隐藏sphere1。有没有什么办法使两个球体都是透明的？ var scene = new THREE.Scene(); var camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000); camera.position.set(0, 0, 3); camera.lookAt(new THREE.Vector3(0, 0, 0)); scene.add(camera); var ambient = new THREE.AmbientLight( 0x555555 ); scene.add(ambient); var light = new THREE.DirectionalLight( 0xffffff ); light.position = camera.position; scene.add(light); var renderer […]

鼠标/canvasX，Y到Three.js世界X，Y，Z: 我search了一个与我的用例相匹配的例子，但找不到一个例子。我试图将屏幕鼠标坐标转换为3D世界坐标考虑到相机。我find的解决scheme都是通过射线交叉来实现对象拾取。我想要做的是将Three.js对象的中心定位在鼠标当前“结束”的坐标上。我的相机是在x：0，y：0，z：500（虽然它会在模拟过程中移动），而我所有的物体都在z = 0，具有不同的x和y值，所以我需要知道世界X，Y假定az = 0的对象将遵循鼠标的位置。这个问题看起来像一个类似的问题，但没有解决scheme：在THREE.js中获取鼠标的坐标相对于三维空间给定鼠标在“左上angular= 0,0 |右下= window.innerWidth，window.innerHeight”的范围上的位置，任何人都可以提供一个解决scheme，将Three.js对象移动到鼠标坐标沿z = 0？

THREE.js生成UV坐标: 我正在使用THREE.js OBJ加载器将模型导入场景。我知道我可以很好地导入几何体，因为当我为它分配一个MeshNormalMaterial时，它显示很好。但是，如果我使用任何需要UV坐标的东西，它给我的错误： [.WebGLRenderingContext]GL ERROR :GL_INVALID_OPERATION : glDrawElements: attempt to access out of range vertices in attribute 1 我知道这是因为加载的OBJ没有UV坐标，但我想知道是否有任何方法来生成所需的纹理坐标。我努力了 material.needsUpdate = true; geometry.uvsNeedUpdate = true; geometry.buffersNeedUpdate = true; …但无济于事。有没有办法使用three.js自动生成UV纹理，还是我必须自己分配坐标？

THREE.js射线相交失败通过添加div: 如果页面上只有一个目标div（其中包含renderer.domElement），则Three.js脚本运行良好。只要我在目标div上方添加具有固定高度和宽度的另一个div，ray.intersectObjects就会返回null。我怀疑我为ray创build的vector是造成这个问题的原因。这是代码。 var vector = new THREE.Vector3( ( event.clientX / divWidth ) * 2 – 1, -( event.clientY / divHeight ) * 2 + 1, 0.5 ); projector.unprojectVector( vector, camera ); var ray = new THREE.Ray( camera.position, vector.subSelf( camera.position ).normalize() ); var intersects = ray.intersectObjects( myObjects, true ); 任何想法如何我可以解决这个问题。编辑：现在是THREE.Raycaster （three.js r.56）

在Three.js中如何渲染地球的“气氛”？: 在过去的几天里，我一直在试图让Three.js纹理工作。我遇到的问题是，我的浏览器阻止加载的纹理，这是按照这里的说明解决。无论如何，我正在为我的一个课程制作太空导航游戏，演示如何通过太空导航航天器。所以，我正在渲染一堆行星，地球就是其中之一。我在下面添加了一张我的地球图片。它看起来没问题，但是我想要做的是通过在地球周围增加一个“气氛”使它看起来更加真实。我环顾四周，发现了一些看起来很整齐的创作，但不幸的是，我认为它们不适用于我的情况。这是将地球添加到我的场景中的代码（这是我从Three.js教程中获得的代码的修改版本）： function addEarth(x,y){ var sphereMaterial = new THREE.MeshLambertMaterial({ //color: 0x0000ff, map: earthTexture }); // set up the sphere vars var radius = 75; segments = 16; rings = 16; // create a new mesh with // sphere geometry – we will cover // the sphereMaterial next! earth […]

如何使相机适合对象: 使用three.js我有以下几点。包含多个Object3D实例的场景几个预定义的相机Vector3的位置如果屏幕大小调整，canvas的dynamic宽度/高度用户可以从上面select一个对象用户可以select一个摄像头位置（从上方）鉴于一个对象被查看，他们已经select了相机的位置，我如何计算最终的相机位置，以“最适合”屏幕上的对象？如果摄像头的位置在某些屏幕上“按原样”使用，则在我的视口的边缘stream血，而其他的则显得较小。我相信有可能将这个物体固定到相机的平截头体上，但是还没有find合适的东西。