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{&nbsp; overflow: hidden;&nbsp; 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 geometryvar 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(()=>{&nbsp; let t = clock.getElapsedTime();&nbsp;&nbsp;&nbsp; // re-building geometry&nbsp; usualRingGeom = new THREE.RingBufferGeometry(innerRadius, outerRadius, 32, 1, 0, (Math.sin(t) * 0.5 + 0.5) * Math.PI);&nbsp; usualRing.geometry.dispose();&nbsp; usualRing.geometry = usualRingGeom;&nbsp;&nbsp;&nbsp; renderer.render(scene, camera);});</script>PS 您也可以在不重新构建几何图形的情况下获得相同的结果。为此，您可以在 js（更改顶点）或着色器中弯曲平面 :)