最近项目周期不是很紧张,一直都在学习three.js,所以将这两天学习所得记录一下~~~
three.js介绍
Three.js 是一款运行在浏览器中的 3D 引擎,我们可以使用它嵌套3D模型,也可以自己制作一些简单的3D场景。three.js主要包括了场景-相机-渲染器这三个方面。接下来以一个例子将这三个方面描述一下
第一步:引入three.js
官网上有明细的资料下载说明,这里就不详细说明。点击跳转官网
<script src="http://www.yanhuangxueyuan.com/versions/threejsR92/build/three.js"></script>
<script src="http://www.yanhuangxueyuan.com/threejs/examples/js/controls/OrbitControls.js"></script>
第二步:创建场景对象
<script>
var scene = new THREE.Scene();
//调用x,y,z轴。这个看个人习惯,不是必填
var axisHelper = new THREE.AxisHelper(500);
scene.add(axisHelper);
</script>
第三步:创建网格模型跟材质
<script>
//创建一个立方体几何对象
var body = new THREE.BoxGeometry(20, 25, 8);
//创建材质
var bodyStyle = new THREE.MeshLambertMaterial({
color: 0xFF00FF,
transparent:true,
shininess:12
});
//创建网格对象,将材质跟几何体填充到网格对象中
var bodyStyleMesh = new THREE.Mesh(body, bodyStyle);
scene.add(bodyStyleMesh);
</script>
第四步:光源设置
<script>
//点光源
var point = new THREE.PointLight(0xffffff);
point.position.set(0, 150, 500); //位置设置
scene.add(point);
//环境光
var ambient = new THREE.AmbientLight(0x0000FF);
scene.add(ambient);
</script>
第二,三,四步基本就完成一个场景流程的创建
第五步:创建相机
<script>
var width = window.innerWidth;
var height = window.innerHeight;
var k = width / height;
//三维场景显示范围控制系数,系数越大,显示的范围越大
var s = 100;
var camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 1000);
//设置相机位置
camera.position.set(0, 100, 400);
//设置相机方向(指向的场景对象)
camera.lookAt(scene.position);
</script>
第六步:创建渲染器
<script>
var renderer = new THREE.WebGLRenderer();
//设置渲染区域尺寸
renderer.setSize(width, height);
//设置背景颜色
renderer.setClearColor(0xb9d3ff, 1);
//添加到页面中
document.body.appendChild(renderer.domElement);
function render() {
renderer.render(scene, camera); //执行渲染操作
requestAnimationFrame(render)
}
render();
var controls = new THREE.OrbitControls(camera, renderer.domElement); //创建控件对象,鼠标可以控制对象
</script>
完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>第一个three.js文件_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="http://www.yanhuangxueyuan.com/threejs/examples/js/controls/OrbitControls.js"></script>
<!-- <script src="./three.js"></script> -->
<!-- <script src="http://www.yanhuangxueyuan.com/threejs/build/three.js"></script> -->
</head>
<body>
<script>
var scene = new THREE.Scene();
var axisHelper = new THREE.AxisHelper(500);
scene.add(axisHelper);
//身体
var body = new THREE.BoxGeometry(20, 25, 8);
var bodyStyle = new THREE.MeshLambertMaterial({
color: 0xFF00FF,
transparent:true,
shininess:12
});
var bodyStyleMesh = new THREE.Mesh(body, bodyStyle);
scene.add(bodyStyleMesh);
//左边眼
var leftEye = new THREE.SphereGeometry(1, 8, 8);
var leftEyeStyle = new THREE.MeshLambertMaterial({
color: 0x000000
});
var leftEyeStyleMesh = new THREE.Mesh(leftEye, leftEyeStyle);
leftEyeStyleMesh.translateY(21);
leftEyeStyleMesh.translateX(-2);
leftEyeStyleMesh.translateZ(5);
scene.add(leftEyeStyleMesh);
//右边眼
var rightEye = new THREE.SphereGeometry(1, 8, 8);
var rightEyeStyle = new THREE.MeshLambertMaterial({
color: 0x000000
});
var rightEyeStyleMesh = new THREE.Mesh(rightEye, rightEyeStyle);
rightEyeStyleMesh.translateY(21);
rightEyeStyleMesh.translateX(2);
rightEyeStyleMesh.translateZ(5);
scene.add(rightEyeStyleMesh);
//嘴巴
var mouth = new THREE.BoxGeometry(6, 1, 6);
var mouthStyle = new THREE.MeshLambertMaterial({
color: 0x000000
});
var mouthStyleMesh = new THREE.Mesh(mouth, mouthStyle);
mouthStyleMesh.translateY(18);
mouthStyleMesh.translateX(0);
mouthStyleMesh.translateZ(3);
scene.add(mouthStyleMesh);
//头部
var header = new THREE.SphereGeometry(6, 10, 10);
var headerStyle = new THREE.MeshLambertMaterial({
color: 0xFF00FF
});
var headerStyleMesh = new THREE.Mesh(header, headerStyle);
headerStyleMesh.translateY(19);
scene.add(headerStyleMesh);
//左边腿
var leftLeg = new THREE.CylinderGeometry( 2, 2, 30, 30);
var leftLegStyle = new THREE.MeshLambertMaterial({
color: 0xFF00FF
});
var leftLegStyleMesh = new THREE.Mesh(leftLeg, leftLegStyle);
leftLegStyleMesh.translateY(-25);
leftLegStyleMesh.translateX(-5);
scene.add(leftLegStyleMesh);
//右边腿
var leftLeg = new THREE.CylinderGeometry( 2, 2, 30, 30)
var leftLegStyle = new THREE.MeshLambertMaterial({
color: 0xFF00FF
});
var leftLegStyleMesh = new THREE.Mesh(leftLeg, leftLegStyle);
leftLegStyleMesh.translateY(-25);
leftLegStyleMesh.translateX(5);
scene.add(leftLegStyleMesh);
//左边手
var leftHand = new THREE.CylinderGeometry( 2, 2, 22, 30);
var leftHandStyle = new THREE.MeshLambertMaterial({
color: 0xFF00FF
});
var leftHandStyleMesh = new THREE.Mesh(leftHand, leftHandStyle);
leftHandStyleMesh.translateY(2);
leftHandStyleMesh.translateX(14);
leftHandStyleMesh.rotateZ(10);
scene.add(leftHandStyleMesh);
//右边手
var leftHand = new THREE.CylinderGeometry( 2, 2, 23, 30);
var leftHandStyle = new THREE.MeshLambertMaterial({
color: 0xFF00FF
});
var leftHandStyleMesh = new THREE.Mesh(leftHand, leftHandStyle);
leftHandStyleMesh.translateY(2);
leftHandStyleMesh.translateX(-14);
leftHandStyleMesh.rotateZ(-10);
scene.add(leftHandStyleMesh);
//光源设置
var point = new THREE.PointLight(0xffffff);
point.position.set(0, 150, 500);
scene.add(point);
var ambient = new THREE.AmbientLight(0x0000FF);
scene.add(ambient);
//照相机位置
var width = window.innerWidth;
var height = window.innerHeight;
var k = width / height;
var s = 100;
var camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 1000);
camera.position.set(0, 100, 400);
camera.lookAt(scene.position);
//创建渲染对象
var renderer = new THREE.WebGLRenderer();
renderer.setSize(width, height);
renderer.setClearColor(0xb9d3ff, 1);
document.body.appendChild(renderer.domElement);
function render() {
renderer.render(scene, camera); //执行渲染操作
requestAnimationFrame(render)
}
render();
var controls = new THREE.OrbitControls(camera, renderer.domElement); //创建控件对象
</script>
</body>
</html>
效果图