Three.js（WebGL分支）

Posted 搞技小萌娃

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Three.js（WebGL分支）相关的知识，希望对你有一定的参考价值。

可参考资料：

1、官网：https://threejs.org/

2、来自网友：http://www.yanhuangxueyuan.com/

3、网易云课堂实战教程：
https://study.163.com/course/courseMain.htm?courseId=1210801830&share=1&shareId=1138545427

4、B站视频推荐：

    （1）初级教程：
https://www.bilibili.com/video/BV1s4411c7RD?t=14

https://www.bilibili.com/video/BV1va4y1p7QB?t=91

    （2）进阶教程：

https://www.bilibili.com/video/BV1vg411G7tB?p=4&t=336

（推荐学习过程：先看three.js初级教程 -> 再看网易云课堂实战教程 -> 后期感兴趣再看进阶教程）

5、three.js官网所有案例源码：

链接：https://pan.baidu.com/s/1nax-H2iLxdOgpKrDlim6Vw

提取码：ohio

--来自百度网盘超级会员V3的分享



创建第一个three.js

** ** ** ** **

1、引入three.js三维引擎：

<!DOCTYPE html><html> <head> <meta charset=utf-8> <title>My first three.js app</title> <style> body { margin: 0; } canvas { width: 100%; height: 100% }</style> </head> <body>    <script src="js/three.js"></script>  // 引入 <script>      // Our javascript will go here.(后期代码放在此标签)</script> </body></html>


2、引入对象：场景、相机、渲染器

  • 引入场景

var scene = new THREE.Scene();

  • 引入相机

var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );camera.lookAt(0,0.5,-1) // 设置camera的视角，即观看的角度camera.position.x = 1  // 设置camera的三维上的位置

     参数：

    1. 第一个参数： 摄像机视锥体垂直视野角度

    2.  第二个参数：摄像机视锥体长宽比

    3.  第三个参数:  控制相机的近距离

    4. 第四个参数：控制相机的远距离


  • 引入渲染器

var renderer = new THREE.WebGLRenderer();  // 创建渲染器renderer.setSize( window.innerWidth, window.innerHeight );  // 设置渲染器的大小document.body.appendChild( renderer.domElement ); // 将渲染器作为子节点，放到body标签中


3、引入立方体以及材质，并放入到场景中

var geometry = new THREE.BoxGeometry( 1, 1, 1 );   // 创建几何体var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } ); // 创建基础材质var cube = new THREE.Mesh( geometry, material );  // 创建网格，并包含几何体和相关材质scene.add( cube );  // 将网格放入到场景中


4、渲染场景

function animate() {   // 控制场景实时的刷新，便于后期数据的更新以及场景中动画的更新  requestAnimationFrame( animate ); renderer.render( scene, camera );}animate();


完整代码：

<html> <head> <title>My first three.js app</title> <style> body { margin: 0; } canvas { width: 100%; height: 100% }</style> </head> <body> <script src="js/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 ); document.body.appendChild( renderer.domElement );
 var geometry = new THREE.BoxGeometry( 1, 1, 1 ); var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } ); var cube = new THREE.Mesh( geometry, material ); scene.add( cube );
 camera.position.z = 5;
 var animate = function () { requestAnimationFrame( animate );
        cube.rotation.x += 0.01;    // 控制几何体以x轴，进行旋转        cube.rotation.y += 0.01;   // 控制几何体以y轴，进行旋转
 renderer.render( scene, camera ); };
 animate();</script> </body></html>



以上是关于Three.js（WebGL分支）的主要内容，如果未能解决你的问题，请参考以下文章

WebGL vs Three.js

WebGL和three.js的关系是啥样的？

今日推荐WebGL系列之Three.js

WebGL Three.js ColladaLoader 示例失败

深入理解Three.js（WebGL）贴图（纹理映射）和UV映射

深入理解Three.js（WebGL）贴图（纹理映射）和UV映射