javascript - Three.js – 创建半个环并为其设置动画

Question

我已经创建了一个戒指并且只想拥有它的一半。然后动画它，它从0到一半建立自己。

var geometry = new THREE.RingGeometry(10, 9, 32);
var material = new THREE.MeshBasicMaterial({
  color: 0xffff00,
  side: THREE.DoubleSide,
});
var mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);

我该如何存档？我是 Three.js 的新手。

Answer 1

使用 thetaStart和 thetaLength为半环设置动画。

body{
  overflow: hidden;
  margin: 0;
}

<script type="module">
import * as THREE from "https://cdn.jsdelivr.net/npm/three@0.118.3/build/three.module.js";

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

var grid = new THREE.GridHelper(10, 10);
grid.rotation.x = Math.PI * 0.5;
scene.add(grid);

var innerRadius = 1;
var outerRadius = 2;

// re-building geometry
var usualRingGeom = new THREE.RingBufferGeometry(innerRadius, outerRadius, 32, 1, 0, 1);
var usualRingMat = new THREE.MeshBasicMaterial({color: 0xffff00});
var usualRing = new THREE.Mesh(usualRingGeom, usualRingMat);
scene.add(usualRing);

var clock = new THREE.Clock();

renderer.setAnimationLoop(()=>{
  let t = clock.getElapsedTime();
  
  // re-building geometry
  usualRingGeom = new THREE.RingBufferGeometry(innerRadius, outerRadius, 32, 1, 0, (Math.sin(t) * 0.5 + 0.5) * Math.PI);
  usualRing.geometry.dispose();
  usualRing.geometry = usualRingGeom;
  
  renderer.render(scene, camera);
});
</script>

PS 您也可以在不重新构建几何体的情况下获得相同的结果。为此，您可以在 js(更改顶点)或着色器中弯曲平面 :)