Как сделать вращающуюся 3D сферу?

Question

Хочу научить сферу вращаться вокруг оси 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: Сфера должна состоять именно из колец как на моделе в примере, не любая сфера.

Answer 1

Задняя стенка непрозрачная, передняя прозрачная и чтобы в центр можно было что-нибудь поместить (другую сферу, например) на 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>

БЛОГ НА HUSL

Как сделать вращающуюся 3D сферу?

Ответы (1 шт):