Three.js入门教程——教不会算我输
在javascript中使用Three.js设计并且实现3D场景是一个很有意思的事情,因为在浏览器中就能够渲染出3D场景,非常简单和轻便。接下来就总结以下我学习Three.js过程中的心得。
1 建立基本场景
在Three.js中有三要素:场景、摄像机和渲染器,只有以上三者结合才能渲染出可见的内容。当然在这之前你需要先下载Three.js文件,直接百度搜索Three.js到官网下载即可,下载完成之后新建一个html文件并且引入Three.js即可。一个最基本的使用Three.js的html文件应该是这样子的:
<!DOCTYPE html>
<html>
<head><title>Wonanut 3D</title><style type="text/css">body { margin: 0; }canvas { width: 100%; height: 100%; }</style>
</head>
<body><script type="text/javascript" src="js/three.js"></script><script type="text/javascript">// 场景var scene = new THREE.Scene();// 摄像机var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);camera.position.z = 5;// 渲染器var renderer = new THREE.WebGLRenderer();renderer.setSize( window.innerWidth, window.innerHeight );document.body.appendChild( renderer.domElement );// 渲染器 end// 物体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 );// 物体 end</script>
</body>
</html>
我们打开浏览器看一下:
哦天哪,发生了什么,浏览器上黑乎乎一片什么都没有啊。
别急,这是因为我们只是设置了三要素,但并没有渲染,只有使用渲染器scene和camera进行渲染之后才能看到内容,在scene.add( cube ); 后面添加一句:
renderer.render(scene, camera);
再试试效果如何:
快看,现在屏幕中出现了一个正方形,这正是我们所期待的!
但是,我们使用的Three.js不应该是三维场景吗,为什么现在只有平面效果?不急,接下来我们使用requestAnimationFrame让画面动起来!
2 让画面动起来
将上一步中最后一句代码:
renderer.render(scene, camera);
替换为:
// 动画
function animate() {cube.rotation.x += 0.01;cube.rotation.y += 0.01;renderer.render( scene, camera );requestAnimationFrame( animate );
}
animate();
再到浏览器看看效果,如果没有什么问题的话,现在你所看到的画面应该是一个旋转的立方体:
不过我对这个效果还是不满意,它看起来像是一个 正方体,但缺少了阴影灯光效果,接下来我们添加灯光效果。
3 添加光效
使用点光源THREE.SpotLight,代码如下:
// 光源
var spotLight = new THREE.SpotLight( 0xffffff );
spotLight.position.set( -40, 60, -10 );
scene.add( spotLight );
// 光源 end
同时将cube的材质从MeshBasicMaterial换为MeshLamberMaterial,因为最基本的MeshBasicMaterial材质对光源不会有任何反应。
// 物体
var geometry = new THREE.BoxGeometry(1, 1, 1);
var material = new THREE.MeshLambertMaterial( { color: 0x00ff00} );
var cube = new THREE.Mesh( geometry, material );
scene.add( cube );
// 物体 end
4 添加阴影效果
为了渲染阴影效果,需要对代码做如下修改:
renderer.setClearColor(new THREE.Color(0x000000, 1.0));
renderer.shadowMap.enabled = true;
同时要给立方体设置投射阴影:
cube.castShadow = true;
设置地面接受阴影:
plane.receiveShadow = true;
设置spotLight投射阴影:
spotLight.castShadow = true;
为了添加阴影效果,我们需要设置一个平面来接受阴影,因此重新创建一个场景,源码如下:
<!DOCTYPE html>
<html>
<head><title>Wonanut 3D</title><style type="text/css">body { margin: 0; }canvas { width: 100%; height: 100%; }</style>
</head>
<body><script type="text/javascript" src="js/three.js"></script><script type="text/javascript" src="js/stats.js"></script><script type="text/javascript">场景-----------------------var scene = new THREE.Scene();--------------------------摄像机---------------------var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);camera.position.x = -30;camera.position.y = 40;camera.position.z = 30camera.lookAt(scene.position);--------------------------渲染器--------------------var renderer = new THREE.WebGLRenderer();renderer.setSize( window.innerWidth, window.innerHeight );document.body.appendChild( renderer.domElement );// 设置渲染器渲染阴影效果renderer.setClearColor(new THREE.Color(0x000000));renderer.setSize(window.innerWidth, window.innerHeight);renderer.shadowMap.enabled = true;渲染器 end----------------坐标轴--------------------var axes = new THREE.AxesHelper(20);scene.add(axes);-------------------------平面---------------------var planeGeometry = new THREE.PlaneGeometry(60, 20, 1, 1);var planeMaterial = new THREE.MeshLambertMaterial({color: 0xcccccc});var plane = new THREE.Mesh(planeGeometry, planeMaterial);plane.rotation.x = -0.5 * Math.PI;plane.position.x = 15plane.position.y = 0plane.position.z = 0scene.add(plane);// 设置投影plane.receiveShadow = true;--------------------------物体----------------------var geometry = new THREE.BoxGeometry(4, 4, 4);var material = new THREE.MeshLambertMaterial( { color: 0x00ff00} );var cube = new THREE.Mesh( geometry, material );cube.position.x = 0;cube.position.y = 2;cube.position.z = 0;// 设置投影cube.castShadow = true;scene.add( cube );物体 end ------------------光源-----------------------var spotLight = new THREE.SpotLight( 0xffffff );spotLight.position.set( -40, 60, -10 );scene.add( spotLight );// 设置投影spotLight.castShadow = true;光源 end -------------------状态监视器-------------------var stats = new Stats();stats.showPanel( 0 );document.body.appendChild( stats.dom );状态监视器 end --------------renderer.render( scene, camera );</script>
</body>
</html>
渲染结果如下图:
阴影是有了,但总觉得阴影不太对劲,比较模糊。通过查阅资料,我找到了答案:
光源的位置一定要距离合适,否则容易引起阴影模糊粗糙的像打马赛克一样
所以嘛,这个东西还是要自己去调的(其实具体原因我也不清楚,反正我没调好)
Three.js入门教程——教不会算我输相关推荐
- Vue.js入门教程-组件注册
一.组件创建 1.1 创建步骤 创建Vue的组件都有三个基本步骤是 [①创建组件构造器.②注册组件和③使用组件]. 1.2 基本示例 比如,我们创建一个Button组件. // 1. 创建一个组件构造 ...
- js读取http chunk流_极简 Node.js入门 教程双工流
点击上方蓝字关注我们 小编提示: 本文是由 ICBU 的谦行小哥哥出品,我们会持续发出极简 Node.js入门 教程,敬请期待哦,文中有比较多的演示代码建议横屏阅读 双工流就是同时实现了 Readab ...
- Node.js 入门教程 23 使用 npm 的语义版本控制 24 卸载 npm 软件包 25 npm 全局或本地的软件包
Node.js 入门教程 Node.js官方入门教程 Node.js中文网 本文仅用于学习记录,不存在任何商业用途,如侵删 文章目录 Node.js 入门教程 23 使用 npm 的语义版本控制 24 ...
- Vue.js入门教程(适合初学者)
Vue.js入门教程 Vue官网网址:Vue.js 中文网 Vue.js Vue.js是渐进式JavaScript 框架,是一套构建用户界面的渐进式框架.也可以说Vue.js 是一个用来构建网页界面的 ...
- Node.js 入门教程 6 V8 JavaScript 引擎
Node.js 入门教程 Node.js官方入门教程 Node.js中文网 本文仅用于学习记录,不存在任何商业用途,如侵删 文章目录 Node.js 入门教程 6 V8 JavaScript 引擎 6 ...
- egg.js入门教程视频文件(转载于cnode社区)
记得上篇博客我满怀欣喜的去搞富文本,结果撞的头破血流. 简直是惨不忍睹.后来我也说了,我的那个有比较严重的问题,后期会考虑重构.(第一版已经放弃了) 之后我说我会去看关于后端nodejs koa框架方 ...
- Two.js入门教程
项目中需要前端画svg图像,直接在html上写标签不太优雅,于是找到了Two.js这个第三方类库,使用其完成了开发任务后,分享下使用心得,就算是入门教程了. 其官方网站为https://two.js. ...
- Ember.js入门教程、博文汇总
第一章 对象模型 Ember.js 入门指南--类的定义.初始化.继承 Ember.js 入门指南--类的扩展(reopen) Ember.js 入门指南--计算属性(compute properti ...
- 前端框架React Js入门教程【转】
现在最热门的前端框架有AngularJS.React.Bootstrap等.自从接触了ReactJS,ReactJs的虚拟DOM(Virtual DOM)和组件化的开发深深的吸引了我,下面来跟我一起领 ...
- 【React】React Js入门教程(一学就会)
现在最热门的前端框架有AngularJS.React.Bootstrap等.自从接触了ReactJS,ReactJs的虚拟DOM(Virtual DOM)和组件化的开发深深的吸引了我,下面来跟我一起领 ...
最新文章
- 【周末阅读】2019自动驾驶十大关键词
- Netty 入门示例
- 若有代数式,则以下能够正确表示该代数式的c语言表达是是 07年4月,2007年4月全国计算机等级考试二级笔试试卷...
- 你必须知道的EF知识和经验
- Redhat Linux通过RPM安装搭建LAMP环境
- python的常见矩阵除法_Python numpy矩阵处理运算工具用法汇总
- 对比解读《2020年CNCF中国云原生调查报告》
- 瑞斯康达nms_瑞斯康达iTN产品资料
- c语言第一个mfc程序,c语言之MFC的进程和线程
- Java 按行读写文件(解决中文乱码)
- [Ajax] 实现跨域访问
- Python报错'builtin_function_or_method' object is not iterable
- python脚本文件删除
- php 伪造微信浏览器头信息,php使用curl伪造浏览器访问操作示例
- 浏览器的工作原理整理
- 《Android框架揭秘》——2.5节应用程序Framework源码级别调试
- 使用html制作一个网页
- openwrt 格式化_OpenWRT上进行EXT4格式化和内容写入
- matlab中ljnspace,Matlab图像感兴趣区域编码
- 苹果CMS对接APP源码NVUE原生渲染