请马上登录,朋友们都在花潮里等着你哦:)
您需要 登录 才可以下载或查看,没有账号?立即注册
x
圆形缓冲几何体(CircleGeometry)是欧式几何的一个简单形状,它由围绕着一个中心点的三角分段的数量所构造,由给定的半径来延展。 同时它也可以用于创建规则多边形,其分段数量取决于该规则多边形的边数。构造器:CircleGeometry(radius : Float, segments : Integer, thetaStart : Float, thetaLength : Float); 其中:
radius — 圆形的半径,默认值为1
segments — 分段(三角面)的数量,最小值为3,默认值为32
thetaStart — 第一个分段的起始角度,默认为0。(three o'clock position)
thetaLength — 圆形扇区的中心角,通常被称为“θ”(西塔)。默认值是2*Pi,这使其成为一个完整的圆
下面的示例,我们用圆形缓冲几何体+基础材质画一个平面六边形:
<div style="position: absolute;color: #eee;margin: 10px;">可以使用鼠标操作图像对象</div>
<script type="module">
import * as THREE from 'https://esm.sh/three'; // three主库
import { OrbitControls } from "https://esm.sh/three/examples/jsm/controls/OrbitControls"; // 轨道控制库
const scene = new THREE.Scene; // 场景
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); // 相机
camera.position.set(0, 0, 5); // 相机位置
const renderer = new THREE.WebGLRenderer({ antialias: true }); // 渲染器
renderer.setSize(window.innerWidth, window.innerHeight); // 渲染器范围
document.body.appendChild(renderer.domElement); // 渲染器加入到body标签
const controller = new OrbitControls(camera, renderer.domElement); // 实例化轨道控制器
const geometry = new THREE.CircleGeometry(1, 6); // 圆形缓冲几何体
// 基础材质 :颜色+双面渲染
const material = new THREE.MeshBasicMaterial({ color: 'tan', side: THREE.DoubleSide });
const circle = new THREE.Mesh(geometry, material); // 创建圆形对象 : 几何体+材质
scene.add(circle); // 圆形对象加入到场景
// renderer.render(scene, camera); // 至此已经可以将效果渲染出来
// 动画函数
const render = () => {
requestAnimationFrame(render); // 请求关键帧动画递归调用函数自身
controller.update(); // 更新控制器
renderer.render(scene, camera); // 渲染效果
};
render(); // 运行动画
window.onresize = () => renderer.setSize(window.innerWidth, window.innerHeight); // 随视窗改变渲染范围
</script>
|