文章目录
- 简介
- 例子
- 解释
专栏目录请点击
简介
- 一条曲线围绕空间中的某个轴进行旋转，会形成一个几何体
- 这个在three.js中也是可以实现的，主要就是使用到了three.js中的
LatheGeometry，官网
例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
body {
margin: 0;
overflow: hidden;
/* 隐藏body窗口区域滚动条 */
}
</style>
<!--引入three.js三维引擎-->
<script src="http://www.yanhuangxueyuan.com/versions/threejsR92/build/three.js"></script>
<!-- 引入threejs扩展控件OrbitControls.js -->
<script src="http://www.yanhuangxueyuan.com/versions/threejsR92/examples/js/controls/OrbitControls.js"></script>
</head>
<body>
<script>
/**
* 创建场景对象Scene
*/
var scene = new THREE.Scene();
/**
* 创建旋转网格模型
*/
// 三个顶点构成的轮廓（理解为两条相连的直线段）
// Vector2对象作为元素构成的数组
var points = [
new THREE.Vector2(50, 60),
new THREE.Vector2(25, 0),
new THREE.Vector2(50, -60)
];
// 30:旋转方向细分数 0,2*Math.PI：旋转起始角度设置
var geometry = new THREE.LatheGeometry(points, 30, 0, 2 * Math.PI);
var material = new THREE.MeshPhongMaterial({
color: 0x0000ff,//三角面颜色
side: THREE.DoubleSide//两面可见
});//材质对象
// material.wireframe = true;//线条模式渲染(查看细分数)
var mesh = new THREE.Mesh(geometry, material);//旋转网格模型对象
scene.add(mesh);//旋转网格模型添加到场景中
/**
* 光源设置
*/
//点光源
var point = new THREE.PointLight(0xffffff);
point.position.set(400, 200, 300); //点光源位置
scene.add(point); //点光源添加到场景中
//环境光
var ambient = new THREE.AmbientLight(0x444444);
scene.add(ambient);
/**
* 相机设置
*/
var width = window.innerWidth; //窗口宽度
var height = window.innerHeight; //窗口高度
var k = width / height; //窗口宽高比
var s = 150; //三维场景显示范围控制系数，系数越大，显示的范围越大
//创建相机对象
var camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 1000);
camera.position.set(200, 300, 200); //设置相机位置
camera.lookAt(scene.position); //设置相机方向(指向的场景对象)
/**
* 创建渲染器对象
*/
var renderer = new THREE.WebGLRenderer();
renderer.setSize(width, height); //设置渲染区域尺寸
renderer.setClearColor(0xb9d3ff, 1); //设置背景颜色
document.body.appendChild(renderer.domElement); //body元素中插入canvas对象
// 渲染函数
function render() {
renderer.render(scene, camera); //执行渲染操作
}
render();
//创建控件对象 相机对象camera作为参数 控件可以监听鼠标的变化，改变相机对象的属性
var controls = new THREE.OrbitControls(camera, renderer.domElement);
//监听鼠标事件，触发渲染函数，更新canvas画布渲染效果
controls.addEventListener('change', render);
</script>
</body>
</html>
渲染如下
解释
- 在代码中，我们首先新建了三个点，这三个点组成了一个折线
var points = [
new THREE.Vector2(50, 60),
new THREE.Vector2(25, 0),
new THREE.Vector2(50, -60)
];
2. 使用相关API进行旋转成型
var geometry = new THREE.LatheGeometry(points, 30, 0, 2 * Math.PI);
var material = new THREE.MeshPhongMaterial({
color: 0x0000ff,//三角面颜色
side: THREE.DoubleSide//两面可见
});//材质对象
- 相关参数如下
| 参数 | 值 |
|---|---|
| points | Vector2表示的坐标数据组成的数组 |
| segments | 圆周方向细分数，默认12 |
| phiStart | 开始角度,默认0 |
| phiLength | 旋转角度，默认2π |
这样，我们就可以得到一个旋转的几何体
