Three.js 教程

了解Three.js

Threejs是一款WebGL三维引擎，在所有WebGL引擎中，Three.js是国内文资料最多、使用最广泛的三维引擎。

如何学习Three.js

当你开始思考你应该如何学习WebGL和Three.js的时候，相信你至少对相关的关键词了解过了，希望通过WebGL或Three.js实现你想要的Web3D功能。

也许你也会去思考通过WebGL或Three.js能不能实现你想要的功能，也许你是因为领导临时分配任务，还不太清楚WebGL和Three.js是什么，个人建议是不要做过多思考，先看看相关的具体技术教程，随着时间的推移你自然会明白Canvas、WebGl、Three.js等关键词指什么。

如果你急于要实现一个Web3D功能，时间有限，也没有图形学基础，个人建议直接学习先Three.js即可，以后想深入掌握，可以学习原生WebGL和图形学相关知识。

如果时间比较充足，又希望有更大的成长空间，学习底层原生WebGL肯定是必要的，可以WebGL和Threejs结合着学习，顺序也不是非常重要。

下面直接进入教程

创建第一个Three.js场景

创建场景对象Scene

var scene = new THREE.Scene();

创建场景光源

//点光源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 = 200; //三维场景显示范围控制系数，系数越大，显示的范围越大

创建相机对象

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);

执行渲染操作指定场景、相机作为参数

renderer.render(scene, camera);

附上源码

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title></title><style>body {margin: 0;overflow: hidden;/* 隐藏body窗口区域滚动条 */}</style><!--引入three.js三维引擎--><script src="http://www.yanhuangxueyuan.com/versions/threejsR92/build/three.js"></script>
</head>
<body><script>/*** 创建场景对象Scene*/var scene = new THREE.Scene();/*** 创建网格模型*/var geometry = new THREE.BoxGeometry(100, 100, 100); //创建一个立方体几何对象Geometryvar material = new THREE.MeshLambertMaterial({color: 0x0000ff}); //材质对象Materialvar mesh = new THREE.Mesh(geometry, material); //网格模型对象Meshscene.add(mesh); //网格模型添加到场景中/*** 光源设置*///点光源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 = 200; //创建相机对象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对象// 渲染函数function render() {renderer.render(scene,camera);//执行渲染操作mesh.rotateY(0.01);//每次绕y轴旋转0.01弧度requestAnimationFrame(render);//请求再次执行渲染函数render，渲染下一帧}render();</script>
<div class="" style="position:absolute;top:0px;left:0px;background: rgba(0, 0, 0, 0.5);padding:10px 20px;"><a href="http://www.yanhuangxueyuan.com/Three.js/" target="_blank" style="color:#fff;text-decoration: none;">案例对应电子书地址</a></div>
</body></html>

Three.js 教程相关推荐

riot.js教程【四】Mixins、HTML内嵌表达式
前文回顾 riot.js教程[三]访问DOM元素.使用jquery.mount输入参数.riotjs标签的生命周期: riot.js教程[二]组件撰写准则.预处理器.标签样式和装配方法: riot.j ...
Vue.js教程视频
Vue.js教程视频链接 https://www.bilibili.com/video/av32611687/?p=1 https://www.bilibili.com/video/av3261168 ...
10+ 最佳的 Node.js 教程和实例
如果你正在找Node.js的学习资料及指南,那么请继续(阅读),我们的教程将会覆盖即时聊天应用.API服务编写.投票问卷应用.人物投票APP.社交授权. Node.js on Raspberry Pi ...
Node.js 教程
菜鸟教程:https://www.runoob.com/nodejs/nodejs-tutorial.html node js 官网:https://nodejs.org/en/download/ 廖 ...
prototype.js教程及prototype中文手册
在线API文档: http://www.prototypejs.org/api 1.4网页版: http://thinhunan.cnblogs.com/archive/2006/04/01/De ...
Web前端开发入门教程，HTML5+CSS3+JS教程，达到web前端工程师的水平
Web前端开发是一个非常热门的职业,随着互联网的发展,越来越多的企业需要拥有自己的网站和应用程序.本文将介绍Web前端开发的入门教程,包括HTML5.CSS3和JS教程,帮助读者达到Web前端工程师的 ...
mysql存储图片node_Node.js教程阿里云mysql如何支持存储emoji表情
本篇教程介绍了Node.js教程阿里云mysql如何支持存储emoji表情,希望阅读本篇文章以后大家有所收获,帮助大家对Node.js的理解更加深入. < 本篇主要记录nodejs项目阿里云m ...
李炎恢 js教程拖拽上思路解析
李炎恢再讲js教程拖拽上讲到一个登录框,通过鼠标移动登录框到浏览器各个地方,我们现在对李炎恢的怎么想出进行分析: 问题期望是什么? 1.我们通过鼠标点击登录框,然后登录框被移动,松开鼠标,停止移动 ...
Three.js教程：三维坐标系
推荐:将 NSDT场景编辑器加入你的3D工具链其他系列工具: NSDT简石数字孪生三维坐标系本节课的目的就是为了加强大家对threejs三维空间的认识. 辅助观察坐标系 THREE.AxesH ...
Vue.js教程-Vue项目的目录结构和.vue文件的构成
Vue.js教程-Vue项目的目录结构和.vue文件的构成前言 Vue项目的目录结构(Vue-cli3/4版本) .vue文件的构成 Html区域(template) script区域 export ...

Three.js 教程

了解Three.js

如何学习Three.js

创建第一个Three.js场景

Three.js 教程相关推荐

最新文章

热门文章