3d弹弹球(加强版)
上篇文章带读者完成了一个3d弹弹球,本文我们来继续看看这个3d弹弹球的一个增强版,即给弹弹球添加上光线和阴影。
本文是threejs系列的第四篇,阅读前面的文章有助于更好的理解本文:
1.一个简单的案例,理解threejs中几个基本概念
2.三维世界中的坐标系
3.3d弹弹球
添加灯光
本文的案例在上文的基础上完成,首先通过SpotLight构造一个灯光,添加到场景中,如下:
var spotLight = new THREE.SpotLight(0xffffff);
spotLight.position.set(-40, 60, -10);
spotLight.castShadow = true;
scene.add(spotLight);
构造光源时,参数表示光源的颜色,然后设置光源的位置为(-40,60,-10),这个坐标在三维坐标系的第6卦限中,同时设置castShadow为true,表示这个光源会产生阴影,不过单纯的添加光源,并不能使物体的颜色作出改变,还需要修改组件的材料,代码如下:
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.set(15, 0, 0);
scene.add(plane);
var sphereGeometry = new THREE.SphereGeometry(4, 20, 20);
var sphereMaterial = new THREE.MeshLambertMaterial({color: 0x7777ff, wireframe: true});
var sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);
sphere.position.set(20, 4, 2);
scene.add(sphere);
和上文相比,这里主要是将物体材料由MeshBasicMaterial转为MeshLambertMaterial,其他的均未变化,最终显示效果如下:
可以看到,球体背光一侧为黑色的,plane离光源远的地方颜色也暗淡(由于gif录制的原因,这里看起来色彩不均匀,实际上是均匀的,读者可以文末下载源码查看)。
作为比较,如果不添加光源,效果如下:
添加阴影
此时并没有阴影展现出来,要使阴影展示出来,需要从三个方面作出改变:1.render支持;2.组件支持;3.灯光支持,其中灯光支持我们在上文已经添加了,render支持和组件支持则未添加,添加方式如下:
render.shadowMapEnabled = true;
plane.receiveShadow = true;
sphere.castShadow = true;
有了阴影支持之后,再来运行,结果如下:
好了,这样一个简单的案例,向读者展示了灯光和阴影的简单用法,有问题欢迎留言讨论。
本文案例:https://github.com/lenve/threejsDemo
▼往期精彩回顾▼Docker教程Redis教程SpringCloud教程Git教程MongoDB教程SpringBoot+Vue前后端分离开源项目-微人事SpringBoot+Vue前后端分离开源项目-V部落
3d弹弹球(加强版)相关推荐
- html5 popup,popup.js-jQuery和CSS3可互动的3D弹出窗口插件
popup.js是一款使用jQuery和CSS3制作并可以使用鼠标进行互动的3D弹出窗口插件.该3D弹出窗口插件使用简单,并且在旧的浏览器中会回退为非3D状态,兼容IE8+的所有现代浏览器. 使用方法 ...
- Android游戏:弹弹球(打砖块)
新学android,试手了第一个游戏:弹弹球(其实就是打砖块),代码粗糙,只为练手. 游戏只有六关,按菜单键开始和暂停,每两关玩法界面不一样,砖块颜色分蓝.红.紫.绿,分数依次5.10.15.20,开 ...
- 用计算机弹小猪佩奇,【绘本时间】小猪佩奇之弹弹球
原标题:[绘本时间]小猪佩奇之弹弹球 小朋友们, 如果你也有一个主播梦, 067 It's a sunny day. Peppa Pig and Suzy Sheep are playing tenn ...
- (五)少儿scratch编程第二课--第一个游戏练习,弹弹球
游戏是最好的老师,,,. 活学活用才是最好的,我看了很多教程,什么麻省理工学院开发的,什么面向对象的编程,什么.... 我*,小学生难道对这些感兴趣?这不都是忽悠大人掏钱的套话么? 大家可以试玩一下哦 ...
- 弹弹球小游戏(Java)
游戏规则:利用键盘上的->或者<-控制方向,用球拍接住小球,否则游戏结束! 该代码主要利用了GUI的绘图,用Timer保证球拍和小球位置的更新,用适配器KeyAdapter获取用户的指令, ...
- JavaScript 弹弹球小游戏(二)
新版弹弹球小游戏,在上一次的基础上,做了改进,可以任意添加小球,而且跑动时可以互不干扰 <html><head><meta charset="utf-8&quo ...
- html5 简单的弹弹球制作
就是利用canvas画圆和擦除,利用setInterval <!DOCTYPE html PUBLIC "--//W3C//DTD XHTML 1.0 Transitional//EN ...
- JS初练——弹弹球与墙壁碰撞处理实例
最近在js学习中,发现关于碰撞反弹的问题,笔者觉得非常有趣,就浅浅了解了一下相关原理,如有不足,可以在评论区批评指正,碰撞处理中对于小球与其他形状的处理,主要取决于小球与其他正形状的相切问题(复杂图形 ...
- 关于processing弹弹球
这些是关于弹弹球的过程,而制作弹弹球我们肯定首先要画一个圆,接着还要设置碰到边框就反弹等程序,还可以加上背景颜色和球的颜色,更好看 转载于:https://www.cnblogs.com/wanyue ...
最新文章
- 理解GloVe模型(Global vectors for word representation)
- new vue 方法参数_vue源码解析 lt;1gt; 数据驱动
- 关于实验中的makefile相关知识
- scanf family API 高级用法
- 【大局观很关键】关于找程序的bug
- 人工神经网络_用人工神经网络控制猴子大脑,MIT科学家做到了
- DIY一个基于树莓派和Python的无人机视觉跟踪系统
- Java与XML编程之SAX
- alisql mysql_AliSQL · 特性介绍 · 动态加字段
- 深度阅读----人工智能简史及其思维辩证
- 2019APMCM亚太数学建模题目
- 杰理AC692X---691X,690X,692X芯片差异(2)
- 【计算机网络实验】使用Packet Tracer搭建网络拓扑
- 转:李开复:打造领导力,我的九点思考
- 一寸照纯红色底图片_红底证件照换成蓝色背景,边缘怎样处理,才能让照片更自然呢?...
- 网站跳出率的相关要点介绍 1
- Django-3-网址和网页内容的”红娘“-路由配置
- 在3D城市模型中添加不同的纹理
- Android仿微信语音聊天
- 从红包场景谈事务一致性
热门文章
- SPSS数据分析方法不知道如何选择​​​​​​​
- Percona SFX:计算型存储在PostgreSQL中的价值
- 刷机命令-直接命令上
- 如何知道申请加你QQ好友的是不是骗子
- ubuntu强制退出当前命令
- Ubuntu 下的哈囉!GTK+!
- PNN网络(Product-based Neural Network)
- 从《红色警戒:复兴》论MongoDB设计模式的重要性
- POJ2987 Firing (网络流)
- 【MATLAB教程案例4】直接序列扩频通信系统的MATLAB仿真