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

Question

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

JavaScript

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

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

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

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

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: Демка

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

Помогут разобраться в теме Все курсы

Нетология

Веб-разработчик с нуля: профессия с выбором специализации

14 месяцев

Далее
Академия Эдюсон

Fullstack-разработчик на JavaScript + ИИ

11 месяцев

Далее
ProductStar × РБК

Профессия: Инженер по тестированию + ИИ

6 месяцев

Далее

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

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

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

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

JavaScript

+2 ещё

Сложный
Как заставить библиотеку docs js нарисовать бордер при переносе таблицы?
- 1 подписчик
- 10 июл.
- 96 просмотров
1

ответ
JavaScript

+2 ещё

Простой
Как подстраивать размер канваса под размер страницы?
- 1 подписчик
- 01 июл.
- 113 просмотров
0

ответов
JavaScript

+2 ещё

Простой
Не работает тень + слайдер, есть варианты?
- 2 подписчика
- 21 июн.
- 197 просмотров
1

ответ
JavaScript

Средний
Значение переменной в строку или сохранение в VK?
- 1 подписчик
- 10 июн.
- 149 просмотров
2

ответа
JavaScript

+1 ещё

Сложный
Как сделать логику post запроса покупки товара, если 1 товара не хватает — отменить покупку?
- 2 подписчика
- 10 июн.
- 227 просмотров
1

ответ
JavaScript

Средний
Как правильно вывести данные из функции в див?
- 2 подписчика
- 08 июн.
- 178 просмотров
3

ответа
JavaScript

Средний
Как перемножить значения из текстовых полей?
- 2 подписчика
- 31 мая
- 398 просмотров
1

ответ
JavaScript

+2 ещё

Средний
Стоит ли переносить логику работающего онлайн-калькулятора с JS на PHP ради защиты формул от копирования?
- 3 подписчика
- 18 мая
- 2463 просмотра
8

ответов
JavaScript

Простой
Почему вместо галереи owl-gallery белое пространство?
- 1 подписчик
- 18 мая
- 102 просмотра
1

ответ
JavaScript

Простой
Как упростить/ улучшить получение данных?
- 1 подписчик
- 14 мая
- 199 просмотров
2

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

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 задать поворот объекту?

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

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

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