相关疑难解决方法(0)

我是新手,开始在网络浏览器中学习3D计算机图形学.我有兴趣在浏览器中制作3D游戏.对于那些同时学习了WebGL和three.js的人来说......

1. 使用three.js需要WebGL的知识吗？

2. 使用three.js与WebGL有什么好处？

我有一个位置为(x,y,z)的3D对象.如何计算该对象的屏幕位置(x,y)？

我已经找到了它,一个解决方案是我必须找出投影矩阵然后将3D位置点乘以该矩阵以将其投影到某个2D观察表面(计算机屏幕)上.但我不知道如何在Three.js中找到这个矩阵.

我尝试这样的转换函数,但它给出了错误的结果

function Point3DToScreen2D(point3D){
            var screenX = 0;
            var screenY = 0;
            var inputX = point3D.x - camera.position.x;
            var inputY = point3D.y - camera.position.y;
            var inputZ = point3D.z - camera.position.z;
            var aspectRatio = renderer.domElement.width / renderer.domElement.height;
            screenX = inputX / (-inputZ * Math.tan(camera.fov/2));
            screenY = (inputY * aspectRatio) / (-inputZ * Math.tan(camera.fov / 2));
            screenX = screenX * renderer.domElement.width;
            screenY = renderer.domElement.height * (1-screenY);
            return {x: screenX, y: screenY};
        }

预先感谢.

我有一个场景，我想将透视对象（即远离时看起来较小的对象）与正交对象（即，无论距离如何都显示相同大小的对象）结合起来。透视对象是渲染“世界”的一部分，而正交对象是装饰品，如标签或图标。与 HUD 不同的是，我希望正交对象在世界“内部”渲染，这意味着它们可以被世界对象覆盖（想象一下在标签之前经过的平面）。

我的解决办法是使用一个渲染器，但两个场景，一个具有PerspectiveCamera和一个带OrthogographicCamera。我在不清除 z 缓冲区的情况下按顺序渲染它们（渲染器的autoClear属性设置为false）。我面临的问题是，我需要同步每个场景中对象的放置，以便为一个场景中的对象分配一个 z 位置，该位置位于另一个场景中位于它之前的对象之后，但位于其之前的对象之前在它后面。

为此，我将我的透视场景指定为“领先”场景，即。所有对象的所有坐标（透视和正交）都是基于这个场景分配的。透视对象直接使用这些坐标并在该场景中使用透视相机进行渲染。正交对象的坐标被转换为正交场景中的坐标，然后使用正交相机在该场景中渲染。我通过将透视场景中的坐标投影到透视相机的视图窗格，然后使用正交相机返回到正交场景来进行转换：

position.project(perspectiveCamera).unproject(orthogographicCamera);

唉，这并不像预期的那样工作。正交对象总是在透视对象之前渲染，即使它们应该在它们之间。考虑这个例子，其中蓝色圆圈应该显示在红色方块后面，但在绿色方块之前（它不是）：

var pScene = new THREE.Scene();
var oScene = new THREE.Scene();

var pCam = new THREE.PerspectiveCamera(40, window.innerWidth / window.innerHeight, 1, 1000);
pCam.position.set(0, 40, 50);
pCam.lookAt(new THREE.Vector3(0, 0, -50));

var oCam = new THREE.OrthographicCamera(window.innerWidth / -2, window.innerWidth / 2, window.innerHeight / 2, window.innerHeight / -2, 1, 500);
oCam.Position = pCam.position.clone();

pScene.add(pCam);
pScene.add(new THREE.AmbientLight(0xFFFFFF)); …

我想知道如何获取场景中给定点的光强度和/或像素值（rgba）。

例如，我有一个场景，移动的光照射在立方体上，并且想要测量立方体上某些点的亮度：

// Our Javascript will go here.
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );

var renderer = new THREE.WebGLRenderer({ preserveDrawingBuffer: true });
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );

var geometry = new THREE.BoxGeometry( 1, 1, 1 );
var material = new THREE.MeshLambertMaterial( );
var cube = new THREE.Mesh( geometry, material );
cube.rotation.x += 0.4;
cube.rotation.y += 0.4;
scene.add( cube );

var plane_geo = new THREE.PlaneGeometry(2,2,2);
var plane = …