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（更改顶点）或着色器中弯曲平面 :)