主页 / 问题 / 1084332
Accepted
Дмитрий Полянин
Asked:2020-02-18 22:33:05 +0000 UTC2020-02-18 22:33:05 +0000 UTC

如何制作一个旋转的 3D 球体？

  • 772

我想教球体绕 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：球体应该完全由示例中模型上的环组成，而不是任何球体。

javascript

1 个回答

  1. Best Answer

    后墙是不透明的，前墙是透明的，因此您可以在 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

相关问题