晋江微信小程序开发_Three.js基础学习教程

Three.js基础学习教程       这篇文章主要为大家详细介绍了Three.js基础学习教程,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

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

1.Three.js 官网

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渲染器)之间的关系


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

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

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

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

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

效果图如下

官网案例实现源码

 html 
 head 
 title My first three.js app /title 
 style 
 body { margin: 0; }
 canvas { width: 100%; height: 100% }
 /style 
 /head 
 body 
 script src="./lib/three.js" /script 
 script 
 //创建一个场景对象
 var scene = new THREE.Scene();
 //创建一个相机对象
 var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 );
 //创建一个渲染器对象
 var renderer = new THREE.WebGLRenderer(); 
 //设置画布尺寸
 renderer.setSize( window.innerWidth, window.innerHeight );
 //设置画布色
 renderer.setClearColor(0x00AABB, 1.0);
 //将渲染画布添加到浏览器中,以便后面剩放相机拍下的景
 document.body.appendChild( renderer.domElement );
 //创建一个几何体长、宽、高分别为1几何体对象
 var geometry = new THREE.BoxGeometry( 1, 1, 1 );
 //材料、皮肤
 var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
 //将material材料添加到几何体geometry,产生新的对象几何体cube
 var cube = new THREE.Mesh( geometry, material );
 //将几何体添加至场景中
 scene.add( cube );
 //设置相机z轴,垂直电脑屏幕位置
 camera.position.z = 5;
 var render = function () {
 /*requestAnimationFrame( render ); //循环渲染
 cube.rotation.x += 0.1; //x轴每秒旋转60次
 cube.rotation.y += 0.1;//y轴每秒旋转60次*/
 renderer.render(scene, camera); //实时将相机拍下的几何体渲染到场景中
 render();
 /script 
 /body 
 /html 

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

z轴负方向???因此这里很有必要说说三维坐标(如下图)

照相机指向原点???来说说相机camera相机(很重要!!想象一下人看不到东西是什么感觉).

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

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

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);//渲染回调函数

实现效果图如下所示

旋转立方体——案例源码

 !DOCTYPE html 
 html 
 head 
 meta charset="UTF-8" 
 title 旋转立方体 /title 
 style 
 #canvas-frame {
 width: 100%;
 height: 600px;
 /style 
 /head 
 body onload="threeStart()" 
 div id="canvas-frame" /div 
 /body 
 script type="text/javascript" src="./lib/three.js" /script 
 script type="text/javascript" 
 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);

* 不断修改相机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); /script /html

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

【参考资料】

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持凡科。