threejs绘制长方体
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>
###############################
QQ 3087438119
