Ответы пользователя по тегу three.js
  • Как применить разные текстуры к сторонам icosahedron?

    strangerintheq
    @strangerintheq
    z = z*z + с
    https://codepen.io/strangerintheq/pen/abNrYdj

    Вот разные геометрии

    const meshes = [
          new THREE.BoxGeometry(),
          new THREE.SphereGeometry(),
          new THREE.CylinderGeometry(),
          new THREE.ConeGeometry(),
          new THREE.IcosahedronGeometry(),
          new THREE.OctahedronGeometry(),
          new THREE.TorusGeometry(),
          new THREE.TorusKnotGeometry(),
          new THREE.DodecahedronGeometry(),
    ].map(geometry => new THREE.Mesh( geometry, materials ));


    У каждого face геометрии есть materialIndex, смотрим на них:

    console.log(meshes.map(mat => [
        mat.geometry.type, 
        mat.geometry.faces.map(face => face.materialIndex).join('')
    ]));


    И видим, что разные индексы есть далеко не везде:

    0: (2) ["BoxGeometry", "001122334455"]
    1: (2) ["SphereGeometry", "00000000000000000000000000000000000000000000000000000000000000000000000000000000"]
    2: (2) ["CylinderGeometry", "00000000000000001111111122222222"]
    3: (2) ["ConeGeometry", "0000000022222222"]
    4: (2) ["IcosahedronGeometry", "00000000000000000000"]
    5: (2) ["OctahedronGeometry", "00000000"]
    6: (2) ["TorusGeometry", "000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000"]
    7: (2) ["TorusKnotGeometry", "00000000000000000000000000000000000000000000000000…0000000000000000000000000000000000000000000000000"]
    8: (2) ["DodecahedronGeometry", "000000000000000000000000000000000000"]
    Ответ написан
    7 комментариев
  • Как сделать так чтобы анимация gltf модели воспроизводилась в three js?

    strangerintheq
    @strangerintheq
    z = z*z + с
    Загружаем модель, выбираем проигрываемую анимацию:

    const gltfLoader = new THREE.GLTFLoader();
    const clock = new THREE.Clock();
    
    let mixer;
    
    gltfLoader.load( "model.gltf", model =>  {
        mixer = new THREE.AnimationMixer(model.scene);
        mixer.clipAction(model.animations[0]).play();  // <- первая по списку анимация
        scene.add(model.scene);
    });


    И потом в requestAnimationFrame обновляем время:

    mixer.update( clock.getDelta() )
    Ответ написан
    Комментировать
  • Как вращать объекты в threejs с помощью мыши?

    strangerintheq
    @strangerintheq
    z = z*z + с
    Можно, но необходимо будет вручную пытаться определить какой же Вы объект собрались вращать.

    Например можно поделить экран на 3 области, закрыть их прозрачными элементами и на них уже повесить слушатели мыши, которые будут вращать объекты.

    Или, вариант 2: вешать один слушатель, но анализировать координату по X, определять в какую из третей экрана она попала при начале перетаскивания - тот объект и вращать.
    Ответ написан
    2 комментария