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

Question

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

JavaScript

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

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

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

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

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

+2 ещё

Простой
Как подключить 3D персонажа в three.js?
- 1 подписчик
- 5 часов назад
- 43 просмотра
0

ответов
JavaScript

+2 ещё

Простой
Как сделать плавное появление скрытых под display: none; карточек по клику на кнопку, при подключеной AOS?
- 1 подписчик
- вчера
- 111 просмотров
1

ответ
JavaScript

+4 ещё

Сложный
Почему в WebSockets History в Burp Suite отображаются кракозябры?
- 1 подписчик
- вчера
- 92 просмотра
2

ответа
JavaScript

Простой
Как выводить JS код?
- 2 подписчика
- 21 дек.
- 1704 просмотра
1

ответ
JavaScript

Простой
Как заставить срабатывать trigger change в Select2?
- 1 подписчик
- 21 дек.
- 59 просмотров
0

ответов
JavaScript

Простой
Почему появляется ошибка Uncaught Reference?
- 1 подписчик
- 20 дек.
- 85 просмотров
2

ответа
JavaScript

Средний
Порождается ли событие в элементе или оно само по себе?
- 1 подписчик
- 20 дек.
- 102 просмотра
1

ответ
JavaScript

+2 ещё

Средний
Как можно изменить настройки модуля навигации карт Google на Яндекс карты?
- 2 подписчика
- 19 дек.
- 214 просмотров
2

ответа
JavaScript

+2 ещё

Простой
Как исправить вёрстку, чтобы блок с изображением не уезжал из-за блока с описанием?
- 1 подписчик
- 19 дек.
- 108 просмотров
0

ответов
JavaScript

+1 ещё

Простой
Как загрузить img в первой очереди при загрузке страницы?
- 1 подписчик
- 19 дек.
- 95 просмотров
1

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

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

Rocket • Смоленск

от 80 000 до 130 000 ₽

JavaScript Fullstack

OnClass

от 2 000 до 7 000 $

JavaScript FullStack developer

Wanted. • Санкт-Петербург

До 220 000 ₽

Cоздание 3d сцены с симуляцией пызырьков

23 дек. 2024, в 16:13

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

Сбор данных из HH

23 дек. 2024, в 15:25

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

Сделать js-модуль для Тильды

23 дек. 2024, в 14:47

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

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

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

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

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