学习目标:
理解3D 场景前置知识学习内容:
1、场景(Scene): 场景是[物体,光源等元素]的容器.可以配合 chorme 插件使用,抛出 window.scene 对象,即可实时调整和场景相关的所有对象数据,包括物体,光源等.
2、相机(Camera): 场景中的相机,代替人眼去观察.一个场景中有且只能有一个相机,一般常用的是透视相机(perspectiveCamera),遵循真实的物理场景法则 – 远小近大. 还有一个叫正交相机(一般 2D 平面场景游戏使用的比较多,物体的大小和远近无关)
3、物体对象(Mesh): 包括二维物体(点,线,面),三维物体和模型等.
4、光源(Light): 场景中的光源,如果场景中不添加光源,那么整个世界(Scene)将会一片黑暗. 常见的光源包括: 全局光,平行光,点光源(蜡烛).每种光源的表现形式都是不一样的(联想实际生活场景).
5、渲染器(renderer): 场景渲染器. 在基于浏览器的 Three.js 开发模式中,这里就是指的 WebGL —> Canvas
6、控制器(Control): 通过键盘,鼠标等,可以控制相机的位置,视角等.
“其中场景(Scene)、相机(Camera)、渲染器(renderer)是必须有的的”
代码:
(跑一下代码,看一下注释理解一下)
<!DOCTYPE html>
<html>
<head>
<title>自动旋转</title>
<style type="text/css">
body { margin: 0; }
canvas { width: 100%; height: 100%; }
</style>
</head>
<body>
<script src="./three.js-dev/build/three.js"></script>
<!-- module text/javascript -->
<script type="text/javascript" >
/*
创建场景
*/
var scene = new THREE.Scene();
var geometry = new THREE.SphereGeometry(60,40,40);//创建一个球体几何对象
//var geometry = new THREE.BoxGeometry( 100, 100, 10 );//创建一个长方体几何对象
var material = new THREE.MeshLambertMaterial({
color:0x0000ff
});//创建材质对象
var mesh = new THREE.Mesh(geometry,material);//网格模型对象
scene.add(mesh);//添加到场景中
/*
光源设置
*/
var point = new THREE.PointLight(0Xffffff);//点光源
point.position.set(400,100,200)//光源位置
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 = 100;//三维场景显示范围控制系数,系数越大,显示范围越大
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( window.innerWidth, window.innerHeight );
renderer.setClearColor(0xb9d3ff,0.3);//设置背景颜色
document.body.appendChild( renderer.domElement );
renderer.render(scene,camera)
var animate = function () {
requestAnimationFrame( animate );
scene.rotation.y += 0.01;
scene.rotation.x += 0.01;
renderer.render( scene, camera );
};//创建一个旋转的方法
animate();//动起来
</script>
</body>
</html>
效果图
项目展示:点击跳转
总结理解:
1、 场景(scene):你要搞一块地方放东西,场景里面就是放物体的。
2、相机(camera ):定义一个相机,想象自己拿相机对着场景,来调节角度和距离。
3、 渲染器对象(renderer ):renderer.render(scene,camera)这句就是把场景和相机渲染出来,他们才能显示在页面上。(不然只是定义场景和相机,不渲染出来页面也是什么都没有的)。
4、形状(geometry):形状的api后面篇章细说。
5、材质(material):定义颜色这些。
6、物体对象(Mesh):var mesh = new THREE.Mesh(geometry,material);//网格模型对象,这句是指定义一个物体,物体有参数有形状和材质。