Three.js基础的示例分析

这篇文章给大家分享的是有关Three.js基础的示例分析的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。

成都创新互联公司是专业的凉城网站建设公司,凉城接单;提供成都网站建设、成都网站制作,网页设计,网站设计,建网站,PHP网站建设等专业做网站服务;采用PHP框架,可快速的进行凉城网站开发网页制作和功能扩展;专业做搜索引擎喜爱的网站,专业的做网站团队,希望更多企业前来合作!

一、Three.js官网及使用Three.js必备的三个条件

1.Three.js 官网 https://threejs.org/

2.使用Three.js必备的三个条件

(To actually be able to display anything with Three.js, we need three things: A scene, a camera, and a renderer so we can render the scene with the camera.)

大致意思是使用three.js可以实现任何显示的东西,必须满足三个条件: a scene场景、a camera相机、a renderer渲染器. 三者缺一不可。

二、使用Three.js必备三个条件(a scene场景、a camera相机、a renderer渲染器)之间的关系 

Three.js基础的示例分析

如上图所示,来说明a scene场景、a camera相机、a renderer渲染器三者之间关系[/code]

1.场景scene是一个物体的容器【通俗理解装东西的嘛】,开发者可以将需要的角色放入场景中,例如苹果,葡萄。同时,角色自身也管理着其在场景中的位置。

2.相机camera的作用就是面对场景,在场景中取一个合适的景,把它拍下来。【可以想象成人的眼睛】

3.渲染器renderer的作用就是将相机拍摄下来的图片,放到浏览器中去显示

三、通过上述理论来实践官网案例

效果图如下

Three.js基础的示例分析

官网案例实现源码


 
 My first three.js app
 
 
 
 
 
 

通过官网案例不难发现,camera照相机默认的观察方向是屏幕的方向(z轴负方向),当变化坐标以后,就要将照相机指向原点,才能观察到物体

Three.js基础的示例分析 z轴负方向???因此这里很有必要说说三维坐标(如下图)

Three.js基础的示例分析

Three.js基础的示例分析照相机指向原点???来说说相机camera相机(很重要!!想象一下人看不到东西是什么感觉).

案例中采用透视相机(从视点开始越近的物体越大、远处的物体绘制的较小的一种方式、和日常生活中我们看物体的方式是一致的。)

var camera = new THREE.PerspectiveCamera(fov, aspect , near,far)

Three.js基础的示例分析

new THREE.PerspectiveCamera(fov, aspect , near,far)  透视相机
视野角:fov 这里视野角(有的地方叫拍摄距离)越大,场景中的物体越小,视野角越小,场景中的物体越大
纵横比:aspect
相机离视体积最近的距离:near
相机离视体积最远的距离:far

综上,相信结合上述三维坐标、相机图理解相机、就应该变得很简单咯哦.接下来接着修改上述案例(说明 后面案例鼠标滚动放大缩小、三维旋转都是基于相机来实现的)

四、将官网案修改且设置相机朝向及相机位置

利用[lookAt]方法来设置相机的视野中心。 「lookAt()」的参数是一个属性包含中心坐标「x」「y」「z」的对象。

设置相机的上方向为正方向y轴 camera.up.x = 0; camera.up.y = 1/*相机朝向--相机上方为y轴*/; camera.up.z = 0;

五、实现旋转立方体

旋转动画原理相机围绕y轴旋转,不断修改相机x、z轴位置,并且保持场景中的物体一直再相机的视野中,实时将相机拍摄下来的图片,放到浏览器中去显示

//相机围绕y轴旋转,不断修改相机x、z轴位置,并且保持场景中的物体一直再相机的视野中
//实时渲染成像
function animation(){
  var timer = Date.now()*0.0001;
  camera.position.x = Math.cos(timer)*100;
  camera.position.z = Math.sin(timer)*100;
  camera.lookAt(scene.position); //设置相机视野中心
  renderer.render(scene, camera);
  requestAnimationFrame(animation);//渲染回调函数
}

实现效果图如下所示

Three.js基础的示例分析

旋转立方体——案例源码



 
 
 旋转立方体 
 
 
 
 
        var renderer, //渲染器   width = document.getElementById('canvas-frame').clientWidth, //画布宽   height = document.getElementById('canvas-frame').clientHeight; //画布高   //初始化渲染器   function initThree(){   renderer = new THREE.WebGLRenderer({    antialias : true    //canvas: document.getElementById('canvas-frame')   });   renderer.setSize(width, height);   renderer.setClearColor(0xFFFFFF, 1.0);   document.getElementById('canvas-frame').appendChild(renderer.domElement);   renderer.setClearColor(0xFFFFFF, 1.0);   }   //初始化场景   var scene;   function initScene(){   scene = new THREE.Scene();   }   var camera;   function initCamera() { //透视相机   camera = new THREE.PerspectiveCamera(45, width/height , 1, 10000);   camera.position.x = 50;   camera.position.y = 150;   camera.position.z =150;   camera.up.x = 0;   camera.up.y = 1; //相机朝向--相机上方为y轴   camera.up.z = 0;   camera.lookAt({ //相机的中心点    x : 0,    y : 0,    z : 0   });       // camera 正交相机   /*camera = new THREE.OrthographicCamera(-300, 300, 100, -100, 1, 10000);   camera.position.x = 250;   camera.position.y = 100;   camera.position.z = 1800;   camera.up.x = 0;   camera.up.y = 1; //相机朝向--相机上方为y轴   camera.up.z = 0;   camera.lookAt({ //相机的中心点    x : 0,    y : 0,    z : 0   });*/   }      function initLight(){   // light--这里使用环境光   //var light = new THREE.DirectionalLight(0xffffff); /*方向性光源*/   //light.position.set(600, 1000, 800);   var light = new THREE.AmbientLight(0xffffff); //模拟漫反射光源   light.position.set(600, 1000, 800); //使用Ambient Light时可以忽略方向和角度,只考虑光源的位置   scene.add(light);   }   function initObject(){ //初始化对象       //初始化地板   initFloor();   }   function initGrid(){ //辅助网格   var helper = new THREE.GridHelper( 1000, 50 );   helper.setColors( 0x0000ff, 0x808080 );   scene.add( helper );   }      function initFloor(){   //创建一个立方体   var geometry = new THREE.BoxGeometry(80, 20, 80);    for ( var i = 0; i < geometry.faces.length; i += 2 ) {    var hex = Math.random() * 0xffffff;    geometry.faces[ i ].color.setHex( hex );    geometry.faces[ i + 1 ].color.setHex( hex );   }   var material = new THREE.MeshBasicMaterial( { vertexColors: THREE.FaceColors} );   //将material材料添加到几何体geometry   var mesh = new THREE.Mesh(geometry, material);   mesh.position = new THREE.Vector3(0,0,0);   scene.add(mesh);   }        //初始化页面加载   function threeStart(){   //初始化渲染器   initThree();   //初始化场景   initScene();   //初始透视化相机   initCamera();   //初始化光源   //initLight();   //模型对象   initObject();   //初始化网格辅助线   initGrid();   //renderer.render(scene, camera);   //实时动画   animation();      }   /*   * 旋转原理   * 相机围绕y轴旋转   * 不断修改相机x、z轴位置,并且保持场景中的物体一直再相机的视野中,   * 实时将相机拍摄下来的图片,放到浏览器中去显示   */   function animation(){   //渲染成像   var timer = Date.now()*0.0001;   camera.position.x = Math.cos(timer)*100; //相机位置x轴方向   camera.position.z = Math.sin(timer)*100; //相机位置y轴方向   //设置相机视野中心   camera.lookAt(scene.position);   //渲染成像   renderer.render(scene, camera);   //渲染回调animation函数   requestAnimationFrame(animation);   }  

至此完毕,附上个人绘制思路流程图

Three.js基础的示例分析

感谢各位的阅读!关于“Three.js基础的示例分析”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识,如果觉得文章不错,可以把它分享出去让更多的人看到吧!


当前文章:Three.js基础的示例分析
标题来源:http://myzitong.com/article/iigsph.html

其他资讯