three.js入门

要准备开始做3D展示的H5,所以准备在下班后和周末开始提前练习,学习。

做一个3d h5,直接从webGL开始,不太现实,于是准备先练习使用框架,在three.js和Babylon纠结了一下后,考虑到:本人新手,three年代久远,社区活跃,于是选择了three。

three中文社区:http://www.webgl3d.cn      在上面可以按步骤下载源码,和环境安装,本人家里用的windows,所以直接iis本地服务。

three搭建界面基本元素,套路如下:

1.创建一个场景(scene),场景相对于一块画布

2.创建模型材质对象(geometry),材质对象相当于画布里面画画的内容,创建完后,scene add geometry

3.创建光源(light),光源的作用是影响材质对面显示的样子,就像现实生活中不同光源下看到的东西不一样,光源有分很多种,比如:点光,环境光,创建完成后,scene add light

4.创建摄像机(camera),摄像机顾名思义,就是找一个角度去观看物体,画面呈现的角度就是摄像机决定的,相机也分种类:正交和透视,正交可见区域是一个立方体,远近模型大小都一样,和人眼看到的不一样;透视则类似人眼,近大远小,创建完成后,

5.创建渲染器对象(renderer)渲染操作,指定场景相机作为参数  renderer add  scene   add camera

 

下面开始实际代码:

//创建场景

var scene = new THREE.Scene();

 

//创建材质对象

var geometry = new THREE.BoxGeometry(100, 100, 100); //创建一个立方体几何对象Geometry

var material = new THREE.MeshLambertMaterial({

      color: 0x0000ff

}); //材质对象Material

 var mesh = new THREE.Mesh(geometry, material); //网格模型对象Mesh

 scene.add(mesh); //网格模型添加到场景中

 

//注意:此处坐标系如果用屏幕作为标准:向右是x轴正,向左反之,想上是y轴正,向下反之,屏幕向外是z轴正,向里反之。

 

//创建光源

//点光源

 var point = new THREE.PointLight(0xffffff);

 point.position.set(400, 200, 300); //点光源位置

 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 = 900; //三维场景显示范围控制系数,系数越大,显示的范围越大

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(width, height);//设置渲染区域尺寸

renderer.setClearColor(0xb9d3ff, 1); //设置背景颜色

document.body.appendChild(renderer.domElement); //body元素中插入canvas对象 //执行渲染操作   指定场景、相机作为参数

 renderer.render(scene, camera);

 

 

 

如此,一个简单的展示3D立方体的网页就出来了。

©️2020 CSDN 皮肤主题: 精致技术 设计师:CSDN官方博客 返回首页