主要组成: 场景+相机+渲染器
一、场景 : 光照+网格模型。
var scene = new THREE.Scene();//创建场景
**
- 网格模型骨架:几何体模型骨架尺寸大小、
**
var geometry = new THREE.SphereGeometry(60, 40, 40); //创建一个球体几何对象
*网格材质:*几何体呈现的颜色、图片样式、透明度
var material = new THREE.MeshLambertMaterial({ color: 0xcccccc }); //材质对象Material
组合网格模型:网格模型骨架 + 网格材质
var mesh = new THREE.Mesh(geometry, material); //生成网格模型对象Mesh
光照:光照颜色和光的种类【环境光、点光源、平行光】
/**
光源设置 */ //点光源 var point = new THREE.PointLight(0xfccccf); point.position.set(400, 200, 300); //点光源位置
//环境光 var ambient = new THREE.AmbientLight(0x444444);
将元素添加到场景中
scene.add(mesh); //网格模型添加到场景中 scene.add(point); //点光源添加到场景中 scene.add(ambient);//环境光添加到场景中
二、相机=位置+ 视线方向 +投影方式
- 相机:位置、视线方向、投影方式
- 位置:相机或者视角源点所在位置坐标。
- 视线方向:视角源向哪里看的角度。
投影方式:投射投影和正射投影。
/**
- 相机设置 */ var width = window.innerWidth; //窗口宽度 var height = window.innerHeight; //窗口高度 var k = width / height; //窗口宽高比 var s = 200; //三维场景显示范围控制系数,系数越大,显示的范围越大 //创建相机对象 var camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 1000); camera.position.set(200, 380, 200); //设置相机位置 camera.lookAt(scene.position); //设置相机方向(指向的场景对象)
三、渲染器:创建、渲染
/**
* 创建渲染器对象
*/
var renderer = new THREE.WebGLRenderer();
renderer.setSize(width, height);//设置渲染区域尺寸
renderer.setClearColor(0xccffff, 1); //设置背景颜色
document.body.appendChild(renderer.domElement); //body元素中插入canvas对象
//执行渲染操作 指定场景、相机作为参数
renderer.render(scene, camera);
四、旋转
// 渲染函数
// function render() {
// renderer.render(scene,camera);//执行渲染操作
// mesh.rotateY(0.01);//每次绕y轴旋转0.01弧度
// }
// //间隔20ms周期性调用函数fun,20ms也就是刷新频率是50FPS(1s/20ms),每秒渲染50次
// setInterval("render()",20);
// function render() {
// renderer.render(scene,camera);//执行渲染操作
// mesh.rotateY(0.01);//每次绕y轴旋转0.01弧度
// requestAnimationFrame(render);//请求再次执行渲染函数render
// }
// render();
let T0 = new Date();//上次时间
function render() {
let T1 = new Date();//本次时间
let t = T1-T0;//时间差
T0 = T1;//把本次时间赋值给上次时间
requestAnimationFrame(render);
renderer.render(scene,camera);//执行渲染操作
mesh.rotateY(0.001*t);//旋转角速度0.001弧度每毫秒
}
render();