1

Хочу научить сферу вращаться вокруг оси Y.
Вопрос в том, как это сделать?

Вот этот код, он не работает так как мне надо:

Vue.config.devtools = false
Vue.config.productionTip = false

var app = new Vue({
  el: '#app'
})
.rotate {
  animation: rotate 5s infinite;
  transform-style: preserve-3d;
}

@keyframes rotate {
  to {
    transform: rotateY(360deg);
  }
}

.svg {
  transform-style: preserve-3d;
}

.circle {
  stroke: orangered;
  fill: rgba(0, 0, 0, 0);
}
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<div id="app">
  <svg width="178px" height="178px" version="1.1" viewBox="-100 -100 200 200" class="svg">
    <g class="rotate">
      <circle class="circle" v-for="x in 10" cx="0" cy="0" :r="95" :style="`transform: rotateY(${12*x}deg); transform-style: preserve-3d;`" />
    </g>
  </svg>
</div>

Оказалось что вращается диск. А мне нужно что бы это было вращение сферы, по типу как Земля крутится вокруг своей оси.

Почему данный код не работает удалось узнать, причина в том что вне зависимости от внутренних вращений весь рисунок SVG это плоскость.

Как можно решить задачу и анимировать вращение всей сферы целиком?

Во всех вместе ответаз я хочу получить все возможные решения этой задачи сделанные на различных технологиях.
Подходят: HTML, CSS, SVG, SMIL, Canvas, WebGl, three.js и др.

PS: Сфера должна состоять именно из колец как на моделе в примере, не любая сфера.

4
  • 1
    ru.stackoverflow.com/questions/1082458/… - вот тут есть на WebGl )
    – Dmytro
    18 фев 2020 в 14:52
  • Сфера должна именно из кооец состоять, как в моём примере. Добавил в PC 18 фев 2020 в 16:04
  • сфера должна быть прозрачная снаружи и непрозрачная внутри? 18 фев 2020 в 16:31
  • @StrangerintheQ в идеале задняя стенка непрозрачная, а передняя прозрачная. И там что бы в центр можно было что-то поместить в идеале. 18 фев 2020 в 17:30

1 ответ 1

4

Задняя стенка непрозрачная, передняя прозрачная и чтобы в центр можно было что-нибудь поместить (другую сферу, например) на Three.js:

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(60, innerWidth / innerHeight, 1, 1000);
camera.position.set(0, 0, 10);
var renderer = new THREE.WebGLRenderer({
  antialias: true
});
renderer.setSize(innerWidth, innerHeight);
document.body.appendChild(renderer.domElement);

var controls = new THREE.OrbitControls(camera, renderer.domElement);

var tex = new THREE.TextureLoader().load('https://threejs.org/examples/textures/uv_grid_opengl.jpg');

// сфера внешняя (прозрачная спереди, непрозрачная сзади)
var sphereGeom = new THREE.SphereBufferGeometry(1, 36, 36);
var sphereMat = new THREE.MeshBasicMaterial({
  map: tex,
  side: THREE.BackSide
});
var sphere = new THREE.Mesh(sphereGeom, sphereMat);
sphere.scale.setScalar(5);
scene.add(sphere);

// сфера внутренняя
var innerSphere = new THREE.Mesh(sphereGeom, new THREE.MeshBasicMaterial({
  map: tex
}));
innerSphere.scale.setScalar(3);
scene.add(innerSphere);

var clock = new THREE.Clock();

renderer.setAnimationLoop(() => {
  sphere.rotation.y = clock.getElapsedTime();
  renderer.render(scene, camera);
});
body {
  overflow: hidden;
  margin: 0;
}
<script src="https://threejs.org/build/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>

4
  • Очень круто! Это как раз то что я хотел, и именно на three.js для меня наиболее интересно. 19 фев 2020 в 6:50
  • А можешь мне на Телеграм написать? у меня в профиле есть. Хочу тебя в группу пригласить. 19 фев 2020 в 6:56
  • 1
    @ДмитрийПолянин Телеграма нет. Есть дискорд: discord.gg/dkHT2wy . Еще есть форум discourse.threejs.org. И slack: threejs.slack.com Правда, все на английском. 19 фев 2020 в 7:08
  • Ясно. Ну если заведёшь телеграмм - присоединяйся. У нас классная группа - t.me/web_graphics_ru 20 фев 2020 в 8:11

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.