小编maa*_*ine的帖子

Three.js围绕物体旋转相机(可能会移动)

我有一个相机在场景中以几种不同的方式移动.相机应围绕目标位置旋转.就我而言,这是用户定位的网格上的一个点.因为相机通常不需要相对于这一点移动,所以我无法在这里使用枢轴点:https://github.com/mrdoob/three.js/issues/1830.我当前的解决方案使用以下代码:

var rotationY = new THREE.Matrix4();
var rotationX = new THREE.Matrix4();
var translation = new THREE.Matrix4();
var translationInverse = new THREE.Matrix4();
var matrix = new THREE.Matrix4();
function rotateCameraAroundObject(dx, dy, target) {  
    // collect up and right vectors from camera perspective
    camComponents.up = rotateVectorForObject(new THREE.Vector3(0,1,0), camera.matrixWorld);
    camComponents.right = rotateVectorForObject(new THREE.Vector3(1,0,0), camera.matrixWorld);

    matrix.identity();

    rotationX.makeRotationAxis(camComponents.right, -dx);
    rotationY.makeRotationAxis(camComponents.up, -dy);
    translation.makeTranslation(
        target.position.x - camera.position.x,
        target.position.y - camera.position.y,
        target.position.z - camera.position.z);
    translationInverse.getInverse(translation);

    matrix.multiply(translation).multiply(rotationY).multiply(rotationX).multiply(translationInverse);
    camera.applyMatrix(matrix);
    camera.lookAt(target.position); 
}
Run Code Online (Sandbox Code Playgroud)

问题是我们不想使用lookAt,因为重新定位.我们希望能够删除该行.

如果我们在没有lookAt的情况下使用上面的代码,我们会围绕这一点进行旋转,但是我们不会看到这一点.我的理解是我的方法应该像摄像机本身旋转一样旋转摄像机的视图,而是相机旋转一小部分.谁能帮我理解什么是错的?

编辑:清理原始帖子和代码,希望澄清我的问题.

我的想法是我可以转换到原点(我的目标位置),旋转我想要的数量,然后转换回起始位置.由于轮换,我希望看到原点的新位置.

事实上,我现在正在测试它而没有使用转换矩阵,所以矩阵乘法线是:

matrix.multiply(rotationY).multiply(rotationX); …
Run Code Online (Sandbox Code Playgroud)

javascript webgl three.js

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

如何确保在Meteor中的其他文件之前加载Three.js?

我正在使用Meteor 0.6.3和Meteorite.我正在尝试使用Meteor开发一款使用Meteor进行多人游戏的游戏.完整代码在这里.我在这里试过使用Atmosphere包,但是我得到了:

ReferenceError:未定义THREE

我的解决方法是在模板文件的标题中包含Three.js.当我不调用Three.js函数直到客户端启动时,这种方法有效.当我尝试使用原型来定义我的盟友类时,我遇到了问题.我的代码如下:

var Enemy = function() {
 this.mesh = new THREE.Mesh();
};

var Enemy = function(){};
Enemy.prototype = new Entity();
Run Code Online (Sandbox Code Playgroud)

这给出了一个错误,即没有定义THREE,即使代码工作正常如果写为:

var Entity = function() {
 this.mesh = new THREE.Mesh();
};

var Enemy = function() {
 this.mesh = new THREE.Mesh();
};
Run Code Online (Sandbox Code Playgroud)

我希望能够使用这样的原型来管理具有相同基本接口的几种类型的实体.以下是我也尝试过的一些事情:

  1. 根据文档,我尝试在project /,project/client /,project/client/compatability /和project/lib /中放置一个three.min.js. 每次它表示没有定义THREE或Meteor崩溃.

  2. 在我们称为Three.js的html文件中定义这些原型.

为了澄清我的问题,我想知道是否有人可以建议如何构建我的文件,以便它将加载Three.js然后我的所有类型文件然后尝试在Meteor.startup()中启动客户端.这是当前的文件结构:

project/model.js
project/server/server.js
project/client/game.css
project/client/game.html
project/client/game.js
Run Code Online (Sandbox Code Playgroud)

如果有任何我应该提供的信息,请告诉我.我希望我不是在严厉地屠杀任何关键词!

javascript three.js meteor

6
推荐指数
1
解决办法
3733
查看次数

Three.js相机的孩子不可见

我正在尝试将一个对象附加到相机,以便它可以更多或更少地用作GUI元素.

我的相机定义如下:

camera = new THREE.PerspectiveCamera( 45, windowWidth / windowHeight, 1, 2000 );
camera.position.z = 100;
Run Code Online (Sandbox Code Playgroud)

在我的init()中,我定义了要添加的对象:

    obj = new THREE.Mesh(new THREE.CubeGeometry(5, 5, 5, 1, 1, 1),
new THREE.MeshBasicMaterial({ color: 0xFFFFFF } ));
    obj.position.set( 0, 0, -50);
    camera.add(obj);
Run Code Online (Sandbox Code Playgroud)

但是,该块不会出现.我已经尝试将此对象添加到场景中,并且它是可见的.我添加了一个循环到animate(),它会将对象的z位置滑动到(-50,50)之间,但是我看不到它.

我尝试使用camera.lookAt(obj)并记录obj的世界位置(obj位置+摄像机位置),它们的行为与预期一致.世界位置似乎是我所期待的,而当z位置越过0时,camera.look会翻转相机.

我为没有提供更清晰的示例代码而道歉,但我会尽力与任何想要帮助我的人合作.谢谢!

javascript webgl three.js

4
推荐指数
1
解决办法
2346
查看次数

标签 统计

javascript ×3

three.js ×3

webgl ×2

meteor ×1