threejs绘制三角面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>ifc三维场景</title>
<style>
body {
margin: 0;
overflow: hidden;
}
</style>
<script src="js/three2.js"></script>
<script src="js/OrbitControls2.js"></script>
</head>
<body>
<script>
//创建一个renderer ,
var renderer = new THREE.WebGLRenderer({ antialias: true });
//设置清空颜色，每秒会渲染60次，渲染的时候会使用此颜色先清空
renderer.setClearColor(new THREE.Color(0xeeeeee, 1));
//设置渲染尺寸
renderer.setSize(window.innerWidth, window.innerHeight);
//设置阴影允许
renderer.shadowMapEnabled = true;
//将webgl元素添加到body中
document.body.appendChild(renderer.domElement);
//创建场景
var scene = new THREE.Scene();
//创建一个透视相机，45是相机的视角 ， 宽高比是屏幕的宽高比 ， 最近能看到0.1 ， 最远能看到10000
var camera = new THREE.PerspectiveCamera(
45,
window.innerWidth / window.innerHeight,
0.1,
20000
);
//将相机放到x:1000 , y:1000 , z:1000的位置
camera.position.set(2000, 1000, 1000);
//设置相机的朝向，可以认为与相机镜头垂直的轴线应该和哪一个轴相交
camera.up.set(0, 1, 0);
//将相机的镜头对准x:0 , y:0 , z:0的位置 经过这个设置相机就被固定住了
camera.lookAt({ x: 0, y: 0, z: 0 });
//将相机添加到场景中
scene.add(camera);
//创建一个自然光，自然光无处不在
var light1 = new THREE.AmbientLight(0xffffff);
//设置灯光的位置
light1.position.set(0, 0, 0);
//将灯光加入场景
scene.add(light1);
var mesh17 = test17();
var mesh18 = test18();
scene.add(mesh17);
scene.add(mesh18);
var orbitCtl = new THREE.OrbitControls(camera);
orbitCtl.autoRotate = false;
var clock = new THREE.Clock();
function threeStart() {
var delta = clock.getDelta();
orbitCtl.update(delta);
renderer.clear();
renderer.render(scene, camera);
requestAnimationFrame(threeStart);
}
threeStart();
function test17(){
var geometry = new THREE.BufferGeometry();
var triangleGeometry = new THREE.Geometry();
triangleGeometry.vertices.push(new THREE.Vector3(0.0,-150.0,-150.0));
triangleGeometry.vertices.push(new THREE.Vector3(0.0,-150.0,-10.0));
triangleGeometry.vertices.push(new THREE.Vector3(0.0,150.0,-150.0));
triangleGeometry.faces.push(new THREE.Face3(0,1,2));
var triangleMaterial = new THREE.MeshBasicMaterial({ color:0xff0000, side:THREE.DoubleSide });
var mesh = new THREE.Mesh(triangleGeometry, triangleMaterial); //网格模型对象Mesh
//scene.add(mesh); //网格模型添加到场景中
return mesh;
}
function test18(){
var geometry = new THREE.BufferGeometry();
var triangleGeometry = new THREE.Geometry();
triangleGeometry.vertices.push(new THREE.Vector3(50.0,-150.0,-150.0));
triangleGeometry.vertices.push(new THREE.Vector3(50.0,-150.0,-10.0));
triangleGeometry.vertices.push(new THREE.Vector3(50.0,150.0,-150.0));
triangleGeometry.faces.push(new THREE.Face3(0,1,2));
var triangleMaterial = new THREE.MeshBasicMaterial({ color:0xff0000, side:THREE.DoubleSide });
var mesh = new THREE.Mesh(triangleGeometry, triangleMaterial); //网格模型对象Mesh
//scene.add(mesh); //网格模型添加到场景中
return mesh;
}
</script>
</body>
</html>
###########################