Javascript 在three.js中添加多维数据集的数量
我试图在下面的示例中添加一些球体。最初它只有三个立方体,但我需要添加大约10个球体,它们彼此之间的距离相等,并且以不同的速度旋转 我的尝试Javascript 在three.js中添加多维数据集的数量,javascript,html,three.js,Javascript,Html,Three.js,我试图在下面的示例中添加一些球体。最初它只有三个立方体,但我需要添加大约10个球体,它们彼此之间的距离相等,并且以不同的速度旋转 我的尝试 var parent, renderer, scene, camera, controls; init(); animate(); function init() { // renderer renderer = new THREE.WebGLRenderer(); renderer.setSize(window.innerWid
var parent, renderer, scene, camera, controls;
init();
animate();
function init()
{
// renderer
renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
// scene
scene = new THREE.Scene();
// camera
camera = new THREE.PerspectiveCamera(40, window.innerWidth / window.innerHeight, 1, 100);
camera.position.set(20, 20, 20);
// controls
controls = new THREE.OrbitControls(camera);
controls.minDistance = 10;
controls.maxDistance = 50;
// axes
scene.add(new THREE.AxisHelper(20));
// geometry
var geometry = new THREE.SphereGeometry(0.3, 50, 50, 0, Math.PI * 2, 0, Math.PI * 2)
// material
var material = new THREE.MeshBasicMaterial({
color: 0xffffff,
wireframe: true
});
// parent
parent = new THREE.Object3D();
scene.add(parent);
// pivots
var pivot1 = new THREE.Object3D();
var pivot2 = new THREE.Object3D();
var pivot3 = new THREE.Object3D();
var pivot4 = new THREE.Object3D();
pivot1.rotation.z = 0;
pivot2.rotation.z = 2 * Math.PI / 3;
pivot3.rotation.z = 4 * Math.PI / 3;
pivot4.rotation.z = 6 * Math.PI / 3;
parent.add(pivot1);
parent.add(pivot2);
parent.add(pivot3);
parent.add(pivot4);
// mesh
var mesh1 = new THREE.Mesh(geometry, material);
var mesh2 = new THREE.Mesh(geometry, material);
var mesh3 = new THREE.Mesh(geometry, material);
var mesh4 = new THREE.Mesh(geometry, material);
mesh1.position.y = 5;
mesh2.position.y = 5;
mesh3.position.y = 5;
mesh4.position.y = 5;
pivot1.add(mesh1);
pivot2.add(mesh2);
pivot3.add(mesh3);
pivot4.add(mesh4);
}
function animate()
{
requestAnimationFrame(animate);
parent.rotation.z += 0.01;
controls.update();
renderer.render(scene, camera);
}
为什么我不能在场景中添加3个以上的球体?我试图添加第四个球体,但没有成功。这里如何解释速度?也就是说:我可以为某些球体指定不同的速度吗?缺少第四个球体
您可以指定:
pivot1.rotation.z = 0;
pivot2.rotation.z = 2 * Math.PI / 3;
pivot3.rotation.z = 4 * Math.PI / 3;
pivot4.rotation.z = 6 * Math.PI / 3;
6*Math.PI/3
=2*Math.PI
注意,three.js使用弧度,因此2*PI
是0
(完全旋转与不旋转是同一位置
因此,pivot1和pivot4具有相同的有效旋转,并且您的2个球体最终位于空间中的相同位置
速度
当前通过在每帧上改变z旋转来处理速度
parent.rotation.z += 0.01;
显然,这对于演示来说效果不错。你可以通过每帧移动更多的帧(或获得更多的帧,即更好的机器或其他升级)来加快速度
现在它以4倍的速度旋转
更多球体
一旦你不再使用大于手指数的计数,我建议使用数组。不要列出pivot1、pivot2、pivot3、…pivot0451,而是使用循环生成它。(如果你愿意,在功能上可以使用范围)
首先,我们声明要制作多少个球体。然后划分圆(围绕2*Math.PI弧度)。然后永远制作一个球体,制作一个轴。然后,为每个轴添加一个网格。这样就完成了
var numberOfSpheres = 10;
var radiansPerSphere = 2 * Math.PI / numberOfSpheres;
// pivots
var pivots = [];
for (var i = 0; i < numberOfSpheres; i++) {
var pivot = new THREE.Object3D();
pivot.rotation.z = i * radiansPerSphere;
parent.add(pivot);
pivots.push(pivot);
}
var meshes = pivots.map((pivot) => {
var mesh = new THREE.Mesh(geometry, material);
mesh.position.y = 5;
pivot.add(mesh)
return mesh;
});
var numberOfSpheres=10;
var RadiansSphere=2*Math.PI/numberOfSpheres;
//支点
var pivots=[];
对于(var i=0;i{
var mesh=新的三个网格(几何体、材质);
网格位置y=5;
轴。添加(网格)
回流网;
});
我在
快乐的编码。有没有可能不同的球体有自己的轨道,就像不同的行星有自己的轨道一样。我在这里需要做什么改变,以便所有的10个球体都围绕着自己的ORIBT旋转,因为它们现在正在相互跟踪?一些疯狂的模式,比如?在第一个例子中,它们确实有自己的轨道,它们是都很相似。回想一下,你有3层深,父层控制所有层,每个层都有一个枢轴,你可以用它来控制父层的旋转,但是它们都在空间中的同一个位置,然后是球体,它们是远离每个枢轴的+y方向上的位置。我不清楚你所说的“它们自己的原点”是什么意思,b但是如果你能想到它,你可以渲染它。
var numberOfSpheres = 10;
var radiansPerSphere = 2 * Math.PI / numberOfSpheres;
// pivots
var pivots = [];
for (var i = 0; i < numberOfSpheres; i++) {
var pivot = new THREE.Object3D();
pivot.rotation.z = i * radiansPerSphere;
parent.add(pivot);
pivots.push(pivot);
}
var meshes = pivots.map((pivot) => {
var mesh = new THREE.Mesh(geometry, material);
mesh.position.y = 5;
pivot.add(mesh)
return mesh;
});