```python
```html
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Threejs对象、曲线、三维</title><style>
body {
margin:0;
overflow: hidden;/* 隐藏body窗口区域滚动条 */}</style><!--引入three.js三维引擎--><script src="http://www.yanhuangxueyuan.com/threejs/build/three.js"></script><script src="http://www.yanhuangxueyuan.com/threejs/examples/js/controls/OrbitControls.js"></script><script src="http://www.yanhuangxueyuan.com/threejs/build/three.min.js"></script><!--<script src="http://www.yanhuangxueyuan.com/threejs/examples/js/loaders/STLLoader.js"></script><script src="http://www.yanhuangxueyuan.com/threejs/examples/js/loaders/STLLoader.js"></script><script src="http://www.yanhuangxueyuan.com/threejs/examples/js/loaders/STLLoader.js"></script>--><!--<script src="./three.js"></script>--><!--<script src="http://www.yanhuangxueyuan.com/threejs/build/three.js"></script>--></head><body><script>/*** 创建场景对象Scene
*/
var scene = new THREE.Scene();/*** 创建网格模型
*/// 球体---网格模型创建函数
// 声明一个三维向量用来保存世界坐标
//1 创建两个网格模型mesh1、mesh2
var geometry = new THREE.BoxGeometry(20,20,20);
var material = new THREE.MeshLambertMaterial({color:0x0000ff});
var mesh = new THREE.Mesh(geometry, material);// mesh本地坐标
mesh.position.set(50,50,0);
var group = new THREE.Group();// group本地坐标---设置同mesh(50,0,0)// mesh父对象:设置position会影响得到mesh的世界坐标
group.position.set(50,0,0);
group.add(mesh);
scene.add(group);//.position属性获得本地坐标
console.log('本地坐标',mesh.position);// getWorldPosition()方法获得世界坐标
//默认threejs渲染过程中执行,如渲染前想获得世界矩阵属性、世界位置属性等属性--需通过代码更新
scene.updateMatrixWorld(true);
var worldPosition = new THREE.Vector3();
mesh.getWorldPosition(worldPosition);
console.log('世界坐标',worldPosition);//2 圆弧线ArcCurve绘制一个圆弧轮廓。
var geometry = new THREE.Geometry();//声明一个几何体对象Geometry
//参数:0,0圆弧坐标原点x,y 100:圆弧半径 0,2* Math.PI:圆弧起始角度
var arc = new THREE.ArcCurve(0,0,100,0,2* Math.PI);//getPoints是基类Curve的方法,返回一个vector2对象作为元素组成的数组
var points = arc.getPoints(50);//分段数50,返回51个顶点
// setFromPoints方法从points中提取数据改变几何体的顶点属性vertices
geometry.setFromPoints(points);//材质对象
var material = new THREE.LineBasicMaterial({
color:0x000000});//线条模型对象
var line = new THREE.Line(geometry, material);
scene.add(line);//线条对象添加到场景中
//3 圆弧线--通过算法得到--沿特定轨迹--顶点数据。
var geometry = new THREE.Geometry();//声明一个几何体对象Geometry
var R =200;//圆弧半径
var N =50;//分段数量
// 批量生成圆弧上---点数据
for(var i =0; i < N; i++){
var angle =2* Math.PI / N * i;
var x = R * Math.sin(angle);
var y = R * Math.cos(angle);
geometry.vertices.push(new THREE.Vector3(x, y,0));}// 插入最后一个点,line渲染模产生闭合效果
// geometry.vertices.push(geometry.vertices[0])//材质对象
var material = new THREE.LineBasicMaterial({
color:0x000000});//线条模型对象
var line1 = new THREE.Line(geometry, material);
scene.add(line1);//线条对象添加到场景中
//4 直接给几何体Geometry设置两个顶点数据。
var geometry = new THREE.Geometry();//声明一个几何体对象Geometry
var p1 = new THREE.Vector3(50,0,0);//顶点1坐标
var p2 = new THREE.Vector3(0,70,0);//顶点2坐标
//顶点坐标添加到geometry对象
geometry.vertices.push(p1, p2);
var material = new THREE.LineBasicMaterial({
color:0xffff00,});//材质对象
//线条模型对象
var line = new THREE.Line(geometry, material);
scene.add(line);//线条对象添加到场景中
//5 通过LineCurve3绘制一条三维直线。
var geometry4 = new THREE.Geometry();//声明一个几何体对象Geometry
var p1 = new THREE.Vector3(0,0,0);//顶点1坐标
var p2 = new THREE.Vector3(0,70,0);//顶点2坐标
// 三维直线LineCurve3
var LineCurve = new THREE.LineCurve3(p1, p2);// 二维直线LineCurve
var LineCurve = new THREE.LineCurve(new THREE.Vector2(50,0), new THREE.Vector2(0,70));
var pointArr = LineCurve.getPoints(10);
geometry4.setFromPoints(pointArr);
var material4 = new THREE.LineBasicMaterial({
color:0xffff00,});//材质对象
var line4 = new THREE.Line(geometry4, material4);
scene.add(line4);//线条对象添加到场景中
//6 通过LineCurve绘制一条二维直线。
var geometry6 = new THREE.Geometry();//声明一个几何体对象Geometry
var p1 = new THREE.Vector2(50,0);//顶点1坐标
var p2 = new THREE.Vector2(0,70);//顶点2坐标
// 二维直线LineCurve
var LineCurve = new THREE.LineCurve(p1, p2);
var pointArr = LineCurve.getPoints(10);
geometry.setFromPoints(pointArr);
var material6 = new THREE.LineBasicMaterial({
color:0xffff00,});//材质对象
var line6 = new THREE.Line(geometry6, material6);
scene.add(line6);//线条对象添加到场景中
/*** 相机设置
*/
var width = window.innerWidth;//窗口宽度
var height = window.innerHeight;//窗口高度
var k = width / height;//窗口宽高比
var s =200;//三维场景显示范围控制系数,系数越大,显示的范围越大
//创建相机对象
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对象
//执行渲染操作 指定场景、相机作为参数
renderer.render(scene, camera);</script></body></html>