在three.js中添加多维数据集 [英] Adding number of cubes in three.js
问题描述
我的尝试
var父，渲染器，场景，相机，控件;
init（）;
animate（）;
函数init（）
{
//渲染器
渲染器= new THREE.WebGLRenderer（）;
renderer.setSize（window.innerWidth，window.innerHeight）;
document.body.appendChild（renderer.domElement）;
//场景
scene = new THREE.Scene（）;
// camera
camera = new THREE.PerspectiveCamera（40，window.innerWidth / window.innerHeight，1，100）;
camera.position.set（20，20，20）;
//控制
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
}）;
//父母
父母=新THREE.Object3D（）;
scene.add（parent）;
//支点
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）;
//网格
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）;
函数animate（）
{
requestAnimationFrame（animate）;
parent.rotation.z + = 0.01;
controls.update（）;
renderer.render（scene，camera）;
}
为什么我无法在场景中添加3个以上的球体？我试图添加第四个球体，但没有奏效。如何在这里解决速度问题？也就是说：我可以为某些球体指定不同的速度吗？
$ b您指定：
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;
对于演示来说，这显然很好，您可以通过移动更多的每帧更多的框架，即更好的机器或其他升级）
parent.rotation.z + = 0.04;
更多球体 h3>
一旦您的手指数量超过您的手指数量，我建议您开始生成ic与数组。而不是列出 pivot1，pivot2，pivot3，。 。 。 pivot0451 ，用循环生成。 （功能上你可以使用范围，如果你愿意的话）。
首先，我们声明要创建多少个范围。然后划分圆圈（2 * Math.PI弧度去绕过）。然后永远球体，做一个枢轴。然后，为每个支点添加一个网格。你完成了。
var numberOfSpheres = 10;
var radiansPerSphere = 2 * Math.PI / numberOfSpheres;
//支点
var pivot = [];
for（var i = 0; i< numberOfSpheres; i ++）{
var pivot = new THREE.Object3D（）;
pivot.rotation.z = i * radiansPerSphere;
parent.add（pivot）;
pivots.push（pivot）;
var mesh = pivots.map（（pivot）=> {
var mesh = new THREE.Mesh（geometry，material）;
mesh。 position.y = 5;
pivot.add（mesh）
return mesh;
}）;
快乐编码。
I am trying to add a number of spheres in the following example. Initially it had only three cubes, but I need to add some 10 spheres that would be equidistant from each other and would be rotating in different speeds.
My Try
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);
}
Why am I not able to add more than 3 spheres into the scene? I tried to add the fourth sphere but it did not work. How can speed be accounted for here? That is: can I specify different speeds for some spheres?
解决方案 Missing 4th Sphere
You specify:
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
Note, three.js uses radians, therefore 2 * PI is 0 (a full revolution is the same place as no rotation.
So pivot1 and pivot4 have the same effective rotation and your 2 sphere end up in the same place in space.
Speed
You currently handle speed by mutating the z rotation on every frame.
parent.rotation.z += 0.01;
This obviously works just fine for a demo. You can speed it up by moving more per frame (or getting more frames, ie better machine or other upgrades)
parent.rotation.z += 0.04;
Now it rotates at 4 times the speed!
More Spheres
Once you get past working with counts larger than your number of fingers on a hand, I recommend getting generic with arrays. Instead of listing out pivot1, pivot2, pivot3, . . . pivot0451, generate this with a loop. (Functionally you could use ranges if you prefer).
First, we declare how many spheres to make. Then divide up the circle (2 * Math.PI radians to go around). Then for ever sphere, make a pivot. Then, for every pivot, add a mesh. And you're done.
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;
});
I implemented this at this codepen.io
Happy coding.
这篇关于在three.js中添加多维数据集的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
