three.js几何体之圆锥缓冲几何体
圆锥缓冲几何体（ConeGeometry）是一个用于生成圆锥几何体的类。构造器：
ConeGeometry(radius : Float, height : Float, radialSegments : Integer, heightSegments : Integer, openEnded : Boolean, thetaStart : Float, thetaLength : Float)
其中：
radius — 圆锥底部的半径，默认值为 1
height — 圆锥的高度，默认值为 1
radialSegments — 圆锥侧面周围的分段数，默认为 32
heightSegments — 圆锥侧面沿着其高度的分段数，默认值为 1
openEnded — 一个Boolean值，指明该圆锥的底面是开放的还是封顶的。默认值为false，即其底面默认是封顶的
thetaStart — 第一个分段的起始角度，默认为 0（三点钟方向）
thetaLength — 圆锥底面圆扇区的中心角，通常被称为 θ（西塔）。默认值是 2*PI，这使其成为一个完整的圆锥
下面的示例，我们用圆锥几何体+基础材质画一对嵌套的圆锥立体图案：
<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; // 场景
scene.background = new THREE.Color('rgba(40,40,40,0.5)'); // 场景背景色
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); // 实例化轨道控制器
controller.autoRotate = true; // 开启自动旋转
// 创建两个嵌套的圆锥体
const geometry = new THREE.ConeGeometry(1, 2, 32); // 圆锥形几何体
// 材质 1
const material1 = new THREE.MeshBasicMaterial({
color: 0x0a8ff6, // 颜色
wireframe: true // 线框
});
// 材质 2
const material2 = new THREE.MeshBasicMaterial({
color: 0x12ddf0, // 颜色
transparent: true, // 开启透明度
opacity: 0.5 // 不透明度（透明度 = 1 - opacity）
});
const cone1 = new THREE.Mesh(geometry, material1); // 圆锥 1
const cone2 = new THREE.Mesh(geometry, material2); // 圆锥 2
cone1.add(cone2); // 第 2 个圆锥加入到第 1 个圆锥
scene.add(cone1); // 第 1 个圆锥加入到场景
//renderer.render(scene, camera); // 至此已经可以将静态效果渲染出来
// 动画函数
const animate = () => {
requestAnimationFrame(animate); // 请求关键帧动画递归调用函数自身
controller.update(); // 更新轨道控制器
renderer.render(scene, camera); // 渲染效果
};
animate(); // 运行动画
window.onresize = () => renderer.setSize(window.innerWidth, window.innerHeight);
</script>
前一篇: three.js几何体之胶囊图形几何体
下一篇: three.js : 独立控制图形对象
发表评论:
评论列表 [0条]
