0

Estoy algo perdida con three js

El primer paso que se realiza es crear un punto en el centro (ancla).

A partir de ahí le agrego un grupo de cubos. La idea es que los cubos se los debo agregar en circunferencia, (alrededor del centro formando una circunferencia) como si fuera una rueda de la fortuna.

No se que formula matemática usar para que los cubos se agreguen dependiendo el angulo entre cada uno.

Por ejemplo, si quiero agregar 4 cubos serian cada 90 grados, o si son 8 separarlos cada 45 grados.

Código utilizado :

var ancla = new THREE.Object3D();
    ancla.position.set(0, 0, 0);
    ancla.name = "ancla";
    ancla.add(cubo02);

    scene.add(ancla);
    for ( var i = 0; i < 10; i ++ ) {
        var angleInRadians = (45 * i) * Math.PI / 180.0;
        var mesh = new THREE.Mesh(geometria, material);
        mesh.position.set( i * 3, 0, 0 );
        ancla.rotation.z = (2 * Math.cos(angleInRadians))
        ancla.add( mesh );
    }

2 respuestas 2

1

Puedes utilizar las coordenadas polares de una circunferencia para agregar los cubos de manera circular con respecto al centro. Las coordenadas x y y de una circunferencia están dados por x = rcosθ y y=rsenθ. Dependiendo de la cantidad de cubos que quieras poner, divides el ángulo en entre esa cantidad, y vas encontrando la coodenada de los cubos:

let numberOfCubes = 10;
let radio = 5;
let cubesArray = [];
for (let i = 0; i < numberOfCubes; i++) {
   let cube = new THREE.Mesh(geometry, material);
   cube.position.x = radio * Math.cos(2 * Math.PI / numberOfCubes * i);
   cube.position.y = radio * Math.sin(2 * Math.PI / numberOfCubes * i);
   scene.add(cube);
   cubesArray.push(cube)
}

Utilizando el fragmento de código anterior, simplemente especifica la cantidad de cubos y el radio de la circunferencia y tendrás todos los cubos ubicados en forma circular.

Te adjunto un ejemplo que puedes probar en vivo si estás usando stackoverflow en una PC.

const scene = new THREE.Scene();
        const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
        const renderer = new THREE.WebGLRenderer();
        camera.position.z = 10;
        
        renderer.setSize(window.innerWidth, window.innerHeight);
        document.body.appendChild(renderer.domElement);

        const geometry = new THREE.BoxGeometry();
        const material = new THREE.MeshBasicMaterial({ color: 0x00ff00});

        let numberOfCubes = 10;
        let radio = 5;
        let cubesArray = [];
        for (let i = 0; i < numberOfCubes; i++) {
            let cube = new THREE.Mesh(geometry, material);
            cube.position.x = radio * Math.cos(2 * Math.PI / numberOfCubes * i);
            cube.position.y = radio * Math.sin(2 * Math.PI / numberOfCubes * i);
            scene.add(cube);
            cubesArray.push(cube)
        }
        
        let quaternion = new THREE.Quaternion;
        let z_axis = new THREE.Vector3( 0, 0, 1 );
        let rotate = 0.01;
        function animate() {
            camera.up.applyQuaternion(quaternion.setFromAxisAngle(z_axis, rotate));
           
            camera.lookAt( scene.position );
            requestAnimationFrame(animate);
            renderer.render(scene, camera);
        }
        animate();
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>

3
  • esta perfecto tu ejemplo, puedo hacerte otra pregunta ? Se como hacerlos girar sobre el eje del centro pero los cubos apuntan al centro, y yo quiero que los cubos conserven siempre su posicion inicial, es decir imaginate que en vez de cubos tengas una cabeza de payaso, si gira sobre el eje del centro al llegar a los 180 grados la cabeza estaria volteada, como la flecha de un reloj que su flecha estaria apuntando hacia abajo, y quiero que si fuera una cabeza siempre este sin rotar. Gracias. Commented el 25 sept. 2021 a las 19:49
  • @ErikaAranda no entiendo bien lo que quieres hacer, ¿quieres hacerlos girar como un reloj? Checa mi edición a ver si es eso.
    – Jaime
    Commented el 25 sept. 2021 a las 20:42
  • Es correcto, hacerlos girar como un reloj pero conservando su rotacion, es decir que siempre este congelado el cubo, en tu caso los cubos giran pero girando tambien individualmente cada cubo , no puedo añadir el codigo que acabo de hacer en este comentario , pero imaginate una rueda de la fortuna, las sillas donde va la gente no se voltean porque se caerian las personas de la rueda Commented el 25 sept. 2021 a las 21:04
1

Ademas de la ingeniosa respuesta de Jaime he encontrado otra forma de hacer este ejercicio.

var ancla = new THREE.Object3D();
    ancla.position.set(0, 0, 0);
    ancla.name = "ancla";
    
    scene.add(ancla);
    var i = 0,
    radius = 2,
    count = 8;
    while (i < count) { 
        var cube = new THREE.Mesh(geometria, material);
         r = Math.PI * 2 / count * i;
         cube.position.x = -1;
         cube.position.set(
        Math.cos(r) * radius,
        0,
        Math.sin(r) * radius);
         ancla.add(cube);
          i += 1;
          cube.parent.localToWorld(cube.position); 
    }
    
    ancla.rotation.x = 90;
    
    scene.add(ancla);

En la funcion de render:

tiempoDelta = clock.getDelta();
    counter += speed;

    var ancla = scene.getObjectByName("ancla");
    
    ancla.rotation.y += THREE.Math.degToRad(velocidad * tiempoDelta);
1
  • Tu respuesta podría mejorarse con información de apoyo adicional. Por favor, pulsa en editar para añadir más detalles, como citas o documentación, para que otros puedan confirmar que tu respuesta es correcta. Puedes encontrar más información sobre cómo escribir buenas respuestas en el centro de ayuda.
    – Comunidad Bot
    Commented el 25 sept. 2021 a las 21:23

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.