A-Frame как методом setAttribute задать поворот объекту?

Question

Сергей Примиренков @sergeyprimirenkov

JavaScript

A-Frame как методом setAttribute задать поворот объекту?

Не работает метод setAttribute для свойства rotation. Для свойства position все нормально - объект позиционируется.

car.setAttribute('position', { x: 0, y: 0.560, z: 5 });

Вопрос задан более трёх лет назад
131 просмотр

10 комментариев

Подписаться 1 Оценить 10 комментариев

Дмитрий Лузанов @dmitry_luzanov
foo.setAttribute('position', JSON.stringify({ x: 0, y: 0.560, z: 5 });

Разве setAttribute может принимать вторым параметром объект в чистом виде?
Написано более трёх лет назад
Сергей Примиренков @sergeyprimirenkov Автор вопроса

Predve4niy: Официальная документация

Аналогично прописываю для свойства rotation - никакого результата.

Написано более трёх лет назад
Дмитрий Лузанов @dmitry_luzanov

Сергей Примиренков: Значит проблема не в данном месте. Раз один в один с документации. Без полного примера вам вряд ли можно помочь.

Написано более трёх лет назад

Сергей Примиренков @sergeyprimirenkov Автор вопроса

<!doctype html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
  <title>VR Demo</title>
  <script src="https://aframe.io/releases/0.5.0/aframe.min.js"></script>
  <!-- <script src="js/webvr-ui.min.js"></script> -->
  <!-- <script src="js/webvr-polyfill.min.js"></script> -->
  <!-- <script>
  var renderer = new THREE.WebGLRenderer();
  var options = {'color': 'rgba(255, 255, 255, .5)'};
  var enterVR = new webvrui.EnterVRButton(renderer.domElement, options);
  document.body.appendChild(enterVR.domElement);
  </script> -->
</head>

<body>
  <a-scene>

    <a-assets>
      <img id="boxTexture" crossorigin="anonymous" src="https://i.imgur.com/mYmmbrp.jpg">
      <img id="groundTexture" crossorigin="anonymous" src="https://cdn.aframe.io/a-painter/images/floor.jpg">
      <img id="skyTexture" crossorigin="anonymous" src="https://cdn.aframe.io/a-painter/images/sky.jpg">
      <!-- <img id="infoText" src="/assets/info.png"> -->
      <img id="pedestalTexture" crossorigin="anonymous" src="assets/metal.jpg">
      <audio src="assets/music.mp3" crossorigin="anonymous" autoplay
      preload loop></audio>
      <a-asset-item id="avent" crossorigin="anonymous" src="assets/avent.obj"></a-asset-item>
      <a-asset-item id="avent_texture" crossorigin="anonymous" src="assets/avent.mtl"></a-asset-item>
      <a-asset-item id="lp670" crossorigin="anonymous" src="assets/lp670.obj"></a-asset-item>
      <a-asset-item id="lp670_texture" crossorigin="anonymous" src="assets/lp670.mtl"></a-asset-item>
    </a-assets>

    <a-entity id="car" obj-model="obj:#avent;mtl:#avent_texture" scale="1 1 1" position="0 0 5" rotation="0 -90 0" visible="true" material="">
     <a-animation attribute="rotation" to="0 270 0" dur="86400" easing="linear" direction="normal" repeat="indefinite"></a-animation>
    </a-entity>

    <!-- <a-plane id="info" src="#infoText" position="0 2.1 3" rotation="14.5 180 0" height="1" width="2" visible="false">
    </a-plane> -->

    <!-- <a-entity id="title" position="0 1.9 5" rotation="0 180 0" scale="4 4 4" text="align:center;opacity:0.5;value:Lamborghini Aventador" visible="false">
      <a-animation attribute="position" to="0 1.6 5" direction="alternate" dur="2000"
      repeat="indefinite"></a-animation>
    </a-entity> -->

    <a-entity position="0 0 5" id="pedestal" geometry="mergeTo:null;primitive:cylinder;height:0.1;radius:2.5;segmentsRadial:72;" material="color:#ccc;metalness:0.7;src:#pedestalTexture">
      <a-animation attribute="rotation" to="0 360 0" dur="86400" easing="linear" repeat="indefinite"></a-animation>
    </a-entity>

    <a-entity id="car1" position="0 2.5 5" rotation="0 180 0" geometry="mergeTo:null;primitive:plane;height:1;width:1;depth:0.1"  text="align:center;color:#000;height:2;opacity:1;value:Lamborghini Aventador;width:2" material="color:#3a3a3a;">
    </a-entity>

    <a-entity id="car2" position="-1.5 2.5 5" rotation="0 180 0" geometry="mergeTo:null;primitive:plane;height:1;width:1;depth:0.1"  text="align:center;color:#000;height:2;opacity:1;value:Lamborghini Gallardo;width:2" material="color:#7d7d7d;">
    </a-entity>

    <a-sky height="2048" radius="30" src="#skyTexture" theta-length="90" width="2048"></a-sky>
    
    <a-light type="point" intensity="2" position="1 10 -3"></a-light>

    <a-plane src="#groundTexture" rotation="-90 0 0" height="100" width="100"></a-plane>

    <a-camera position="0 0 0" rotation="0 180 0">
      <a-cursor id="cursor" color="#fafafa">
    </a-camera>

  </a-scene>

  <script>
    var car = document.querySelector('#car');
    var info = document.querySelector('#title');
    var car1 = document.querySelector('#car1');
    var car2 = document.querySelector('#car2');
    var cursor = document.querySelector('#cursor');

    car1.addEventListener('mouseenter', function() {
      car1.setAttribute('scale', {x: 1.2, y: 1.2, z: 1.2});
      cursor.setAttribute('color', 'red');
    });
    car1.addEventListener('mouseleave', function() {
      car1.setAttribute('scale', {x: 1, y: 1, z: 1});
      cursor.setAttribute('color', '#fafafa');
    });
    car1.addEventListener('click', function() {
      car2.setAttribute('material', 'color:#7d7d7d');
      car1.setAttribute('material', 'color:#3a3a3a');
      car.setAttribute('obj-model', 'obj:#avent;mtl:#avent_texture');
      car.setAttribute('position', { x: 0, y: 0, z: 5 });
    });
    car2.addEventListener('mouseenter', function() {
      car2.setAttribute('scale', {x: 1.2, y: 1.2, z: 1.2});
      cursor.setAttribute('color', 'red');
    });
    car2.addEventListener('mouseleave', function() {
      car2.setAttribute('scale', {x: 1, y: 1, z: 1});
      cursor.setAttribute('color', '#fafafa');
    });
    car2.addEventListener('click', function() {
      car1.setAttribute('material', 'color:#7d7d7d');
      car2.setAttribute('material', 'color:#3a3a3a');
      car.setAttribute('obj-model', 'obj:#lp670;mtl:#lp670_texture');
      car.setAttribute('rotation', { x: -90, y: -90, z: 0 });
      car.setAttribute('position', { x: 0, y: 0.560, z: 5 });
    });
  </script>
</body>

</html>

Написано более трёх лет назад

Дмитрий Лузанов @dmitry_luzanov

Сергей Примиренков: и добавьте A-FRAME в теги, а то не понятно о чем именно идет речь. Я подумал, что вы про ванильный метод говорите.

Написано более трёх лет назад
Сергей Примиренков @sergeyprimirenkov Автор вопроса

Predve4niy: добавлял, почему-то не прописалось

Написано более трёх лет назад
Дмитрий Лузанов @dmitry_luzanov

Сергей Примиренков: было бы круто, если бы вы ещё сюда залили https://jsfiddle.net/

Написано более трёх лет назад
Сергей Примиренков @sergeyprimirenkov Автор вопроса

Predve4niy: Демка

Написано более трёх лет назад
Дмитрий Лузанов @dmitry_luzanov

Сергей Примиренков:
Соединение с сервером primirenkov.ru сбой (Сервер не отвечает.)

Написано более трёх лет назад
Сергей Примиренков @sergeyprimirenkov Автор вопроса

Predve4niy: Демка

Написано более трёх лет назад

Пригласить эксперта

Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации

Похожие вопросы

JavaScript

Простой
Как получить metadata аудио на IOS?
- 1 подписчик
- 2 часа назад
- 16 просмотров
0

ответов
JavaScript

+2 ещё

Простой
Как отобразить массив из элементов?
- 1 подписчик
- вчера
- 96 просмотров
0

ответов
JavaScript

+1 ещё

Простой
Неизвестные скрипты на сайте (plupload и moxie). Для чего?
- 1 подписчик
- вчера
- 109 просмотров
1

ответ
JavaScript

+2 ещё

Простой
Как сделать так, чтобы звезда падала только при скролле страницы?
- 1 подписчик
- вчера
- 83 просмотра
0

ответов
JavaScript

+1 ещё

Простой
Почему вылезает второй слайд?
- 1 подписчик
- вчера
- 39 просмотров
1

ответ
JavaScript

Простой
Почему в букмарклете должным образом не выполняется Alt + Click?
- 1 подписчик
- вчера
- 46 просмотров
1

ответ
JavaScript

Средний
Как создать кроссбраузерный функиональный плеер?
- 1 подписчик
- вчера
- 67 просмотров
0

ответов
JavaScript

+1 ещё

Средний
Почему функция mnemonicToWalletKey из библиотеки тон генерирует неверный адрес кошелька?
- 1 подписчик
- вчера
- 50 просмотров
1

ответ
JavaScript

+1 ещё

Простой
Как передавать данные гугл таблицы в телеграм при добавлении новой записи?
- 1 подписчик
- вчера
- 65 просмотров
1

ответ
JavaScript

Простой
Проблема с добавлением полей товара в куки, почему-то при клике ничего в куки не записывает, что делать?
- 1 подписчик
- 17 апр.
- 35 просмотров
2

ответа
Показать ещё Загружается…

JavaScript разработчик

summer • Ярославль

от 100 000 до 140 000 ₽

Junior JavaScript Developer

КРАФТТЕК • Санкт-Петербург

от 60 000 до 80 000 ₽

JavaScript разработчик

Мэтч

от 80 000 ₽

Очистка ин.текста с изображения и создание обложки+корешка для книги

19 апр. 2024, в 15:34

14000 руб./за проект

Разработать фронтенд для интернет-магазина на фреймворке TS

19 апр. 2024, в 15:33

60000 руб./за проект

Спроектировать дизайн сводной SEO таблицы

19 апр. 2024, в 15:20

5000 руб./за проект

foo.setAttribute('position', JSON.stringify({ x: 0, y: 0.560, z: 5 });

Разве setAttribute может принимать вторым параметром объект в чистом виде?
Predve4niy: Официальная документация

Аналогично прописываю для свойства rotation - никакого результата.
Сергей Примиренков: Значит проблема не в данном месте. Раз один в один с документации. Без полного примера вам вряд ли можно помочь.
Сергей Примиренков: и добавьте A-FRAME в теги, а то не понятно о чем именно идет речь. Я подумал, что вы про ванильный метод говорите.
Predve4niy: добавлял, почему-то не прописалось
Сергей Примиренков: было бы круто, если бы вы ещё сюда залили https://jsfiddle.net/
Сергей Примиренков:
Соединение с сервером primirenkov.ru сбой (Сервер не отвечает.)

A-Frame как методом setAttribute задать поворот объекту?

Войдите, чтобы написать ответ

Минуточку внимания

Войдите на сайт