threejs繪制長方體
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>WebGL三維場景</title>
<style>
body {
margin: 0;
overflow: hidden;
/* 隱藏body窗口區域滾動條 */
}
</style>
<!--引入three.js三維引擎-->
<!--<script src="http://www.yanhuangxueyuan.com/versions/threejsR92/build/three.js"></script>-->
<script src="js/three2.js"></script>
<script src="js/OrbitControls2.js"></script>
<!-- <script src="./three.js"></script> -->
<!-- <script src="http://www.yanhuangxueyuan.com/threejs/build/three.js"></script> -->
</head>
<body>
<script>
//創建一個renderer ,
var renderer = new THREE.WebGLRenderer({ antialias: true });
//設置清空顏色，每秒會渲染60次，渲染的時候會使用此顏色先清空
renderer.setClearColor(new THREE.Color(0x000000, 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(0, 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 lights = new Array();
lights[0] = new THREE.PointLight(0xffffff, 1, 0);
lights[1] = new THREE.PointLight(0xffffff, 1, 0);
lights[2] = new THREE.PointLight(0xffffff, 1, 0);
lights[0].position.set(0, 200, 0);
lights[1].position.set(100, 200, 100);
lights[2].position.set(-100, -200, -100);
scene.add(lights[0]);
scene.add(lights[1]);
scene.add(lights[2]);
var meshPolygon = createPolygon();
scene.add(meshPolygon);
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 createPolygon(){
var group = new THREE.Group();
var geometry2 = new THREE.BoxGeometry(500, 500, 4000);
var material2 = new THREE.MeshBasicMaterial( { color: 15245878, side: THREE.DoubleSide } );
var mesh2 = new THREE.Mesh( geometry2, material2 ) ;
group.add(mesh2);
return group;
}
</script>
</body>
</html>
###############################