Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/three.js/2.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript Three.js仅从一侧增加长方体几何图形_Javascript_Three.js_Geometry - Fatal编程技术网

Javascript Three.js仅从一侧增加长方体几何图形

Javascript Three.js仅从一侧增加长方体几何图形,javascript,three.js,geometry,Javascript,Three.js,Geometry,我是three.js的新手,我的第一个功能是创建一个只从一侧增加的长方体几何体 问题:当您增加对象的宽度或高度时,两侧会自动增加。 所以我浪费了1个小时来找到好的算法: geometry = new THREE.BoxGeometry(strength, 200, 200); material = new THREE.MeshBasicMaterial({ color: 0xff0000 }); mesh = new THREE.Mesh(ge

我是three.js的新手,我的第一个功能是创建一个只从一侧增加的长方体几何体

问题:当您增加对象的宽度或高度时,两侧会自动增加。

所以我浪费了1个小时来找到好的算法:

    geometry = new THREE.BoxGeometry(strength, 200, 200);
    material = new THREE.MeshBasicMaterial({
        color: 0xff0000
    });

    mesh = new THREE.Mesh(geometry, material);
    mesh.applyMatrix( new THREE.Matrix4().makeTranslation( - strength + strength / 2, 0, 0 ) );
有人可以向我解释:-strength+strength/2(如果我将强度增加1,则翻译为-0.5而不是-1?)

这类算法的名称是什么,在那里我可以找到学习这一目的的好资源(初学者)?

另一种选择:

var container = new THREE.Object3D()
var boxMesh = new THREE.Mesh(new THREE.BoxGeometry(1,1,1));
boxMesh.position.set(0.5,0.5,0.5)
container.add(boxMesh)

scene.add(container)

container.scale.set(strength,200,200);

此外,您可以使用
.translate()
方法移动几何体,因此场景图中不会有容器对象:

var scene=new THREE.scene();
var摄像机=新的三透视摄像机(60,window.innerWidth/window.innerHeight,11000);
摄像机。位置。设置(2,3,5);
var renderer=new THREE.WebGLRenderer({
反别名:对
});
renderer.setSize(window.innerWidth、window.innerHeight);
document.body.appendChild(renderer.doElement);
var controls=新的三个.OrbitControls(摄影机、渲染器.doElement);
添加(新的三个.GridHelper(10,10));
var-boxGeom=new THREE.BoxGeometry();
boxGeom.translate(0.5,0.5,0);//轴心点移动了
var box=new THREE.Mesh(boxGeom,new THREE.MeshNormalMaterial());
场景。添加(框);
var clock=新的三个时钟();
var-delta=0;
var时间=0;
render();
函数render(){
请求动画帧(渲染);
delta=clock.getDelta();
时间+=增量;
盒子.刻度.设置(2.5+数学sin(时间)*2,1.5,1.5);
渲染器。渲染(场景、摄影机);
}
正文{
溢出:隐藏;
保证金:0;
}


不清楚您想要实现什么目标。这里有三个很好的参考资料:和:在jsFiddle中尝试使用和不使用这一行:
mesh.applyMatrix(新的三个.Matrix4().makeTranslation(-strength+strength/2,0,0))更改init()参数值以理解。是的,我看到您正在对网格进行奇怪的转换。。。但是为什么呢?你想在高层次上实现什么?不,这是我的全部功能,我成功实现了我想要的!我不明白这一点:-力量+力量/2它为什么有效?我寻找好的资源来学习3D几何算法。。。例如,不随机搜索公式。您可以将立方体偏移到它的左上角,就像您现在所做的那样。。。比如.makeTranslation(100100100),然后只需使用mesh.scale.set(10,20,30)或其他任何东西来控制缩放。。。通常,您不希望多次执行mesh.applyMatrix。因为这是一个缓慢的操作,因为它修改了实际的顶点,如果您不断地对顶点应用变换,将导致漂移。相反,您希望使用mesh.scale和mesh.position来控制对象,因为它们是设计为动态更新的单个值!请你解释一下
2.5+Math.sin(time)*2
,你是如何找到这种公式的?谢谢@用户3703539不客气:)好吧。。。窦房结函数给出的值在-1到1的范围内,因此当你将它乘以2时,你会得到-2到2的范围)我用2作为例子,来说明这些东西是如何工作的:)