threejs顶点——1、顶点位置解析
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>顶点位置数据解析渲染</title>
<style>
body {
margin: 0;
overflow: hidden;
/* 隐藏body窗⼝区域滚动条 */
}
</style>
<!--引⼊three.js三维引擎-->
<script src="www.yanhuangxueyuan/versions/threejsR92/build/three.js"></script>
<!-- 引⼊threejs扩展控件OrbitControls.js -->
<script src="www.yanhuangxueyuan/versions/threejsR92/examples/js/controls/OrbitControls.js"></script> </head>
<body>
<script>
/**
* 创建场景对象Scene
*/
var scene = new THREE.Scene();
/**
* 创建⽹格模型
*/
var geometry = new THREE.BufferGeometry(); //创建⼀个Buffer类型⼏何体对象
js控制滚动条
//类型数组创建顶点数据
var vertices = new Float32Array([
0, 0, 0, //顶点1坐标
50, 0, 0, //顶点2坐标
0, 100, 0, //顶点3坐标
0, 0, 10, //顶点4坐标
0, 0, 100, //顶点5坐标
50, 0, 10, //顶点6坐标
]);
// 创建属性缓冲区对象
var attribue = new THREE.BufferAttribute(vertices, 3); //3个为⼀组，表⽰⼀个顶点的xyz坐标
// 设置⼏何体attributes属性的位置属性
geometry.attributes.position = attribue;
// 三⾓⾯(⽹格)渲染模式
var material = new THREE.MeshBasicMaterial({
color: 0x0000ff, //三⾓⾯颜⾊
side: THREE.DoubleSide //两⾯可见
}); //材质对象
var mesh = new THREE.Mesh(geometry, material); //⽹格模型对象Mesh
scene.add(mesh); //⽹格模型添加到场景中
// 点渲染模式
// var material = new THREE.PointsMaterial({
//  color: 0xff0000,
//  size: 5.0 //点对象像素尺⼨
// }); //材质对象
// var points = new THREE.Points(geometry, material); //点模型对象
// scene.add(points); //点对象添加到场景中
/
/ 线条渲染模式
// var material=new THREE.LineBasicMaterial({
//    color:0xff0000 //线条颜⾊
//    color:0xff0000 //线条颜⾊
// });//材质对象
// var line=new THREE.Line(geometry,material);//线条模型对象
// scene.add(line);//线条对象添加到场景中
// 辅助坐标系⽼版本AxisHelper 新版本AxesHelper
var axisHelper = new THREE.AxisHelper(250);
scene.add(axisHelper);
/**
* 光源设置
*/
//点光源
// 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() {
}
render();
//创建控件对象相机对象camera作为参数控件可以监听⿏标的变化，改变相机对象的属性    var controls = new THREE.OrbitControls(camera,renderer.domElement);
//监听⿏标事件，触发渲染函数，更新canvas画布渲染效果
controls.addEventListener('change', render);
</script>
</body>
</html>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。