这次要模拟的场景如下图:就是在绿草地上足球的运动,并且视角会随着足球的运动发生变化,同时整个草地的视角也会旋转。

接下来,我们就对各个元素进行分析:

1,草地

用PlaneGeometry在三维空间里创建一个平面对象,添加草场纹理,然后rotation.x在x轴方向旋转90度,营造一种立体的视角

我们用 floorMater.map.repeat.set将草皮重复,是不要让草皮太放大,看起来失真;

function addFloor() {
var floorGeom = new THREE.PlaneGeometry(100,100,20,20);
var floorMater = new THREE.MeshPhongMaterial();
floorMater.map = THREE.ImageUtils.loadTexture('http://10.1.26.29:84/assets/textures/06_DIFFUSE.jpg');
//沿着(S)x,(T)y方向允许纹理重复自己
floorMater.map.wrapS = floorMater.map.wrapT = THREE.REpeatWrapping;
//material.map.repeat.set(repeatX,repeatY);repeatX:指定在x轴方向多久重复一次。repeatY:指定在y轴方向多久重复一次。
//如果设置为1,都不会重复。 如果设置<1,纹理就会被放大。 如果设置为负数,就会产生纹理镜像。
floorMater.map.repeat.set(10,10);
var floor = new THREE.Mesh(floorGeom,floorMater);
floor.receiveShadow = true;
floor.rotation.x = -0.5 * Math.PI;
scene.add(floor);
}

2,添加横杆 

这里用的就是一个圆柱,通过旋转将其与草地几乎平行

function addRail() {
var cylinderGeometry = new THREE.CylinderGeometry(0.1, 0.1,15,50,50);
var cylinderMaterial = new THREE.MeshPhongMaterial({color:0xeeeeee});
var cylinder = new THREE.Mesh(cylinderGeometry,cylinderMaterial);
cylinder.position.set(1,5,1);
cylinder.rotation.x = '15';
cylinder.rotation.y = '-57.8';
cylinder.rotation.z = '-14.85';
cylinder.name = 'cylinder';
scene.add(cylinder);
}

3,添加足球 

Three.js的光源默认不会导致物体间的投影,打开投影需要执行以下几步:

打开渲染器的地图阴影: renderer.shadowMapEnabled = true;

启用光线的投影:light.castShadow = true;

把模型设置为生成投影:mesh.castShadow = true;

把模型设置为接收阴影:mesh.receiveShadow= true;

然后为足球添加一个足球的纹理

function addSphere() {
var sphereGeometry = new THREE.SphereGeometry(0.8, 25, 25);
var sphereMaterial = new THREE.MeshBasicMaterial({specular: '#a9fcff',emissive: '#006063',shininess: 10});
var sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);
sphere.position.set(7,0.8,-1);
sphere.castShadow = true;
var texture = new THREE.ImageUtils.loadTexture("http://10.1.26.29:84/assets/football.jpg");
sphereMaterial.map = texture;
sphere.name = 'sphere';
scene.add(sphere);
}

4,render()函数

我们为每个元素分别写了一个函数,然后在init()初始化函数中调用即可

这一节的重点就是render函数中改变camera的视角

首先我们相机的视角是以足球的位置camera.lookAt(sphere.position); 然后我们通过step改变足球的位置,camera视角就会跟着足球发生变化

然后我们为camera添加位置变化,使得camera本身位置发生旋转、

我们可以通过分别注释(1)(2)

function render() {
var sphere = scene.getObjectByName('sphere');
renderer.render(scene, camera);
camera.lookAt(sphere.position);
   // (1)
step += 0.02;
sphere.position.x = 0 + ( 10 * (Math.cos(step)));
sphere.position.y = 0.75 * Math.PI / 2 + ( 6.5 * Math.abs(Math.sin(step)));
sphere.rotation.z += 0.03;
    //(2)
var x = camera.position.x;
var z = camera.position.z; camera.position.x = x * Math.cos(0.015) + z * Math.sin(0.015);
camera.position.z = z * Math.cos(0.015) - x * Math.sin(0.015); requestAnimationFrame(render);
}

完整代码下载:github(threejs-four) 如果你觉得我写的对你有所帮助的话,请给我个star吧,谢谢

threejs 草场足球运动视角(三)的更多相关文章

  1. 足球运动训练心得及经验分析-c语言学习调查

    在准备预备作业02之前,我参考娄老师的提示,阅读了<[做中学(Learning By Doing)]之乒乓球刻意训练一年总结>一文. 在文章描述的字里行间,给予我的印象是系统.负责,娄老师 ...

  2. 如何使用threejs实现第一人称视角的移动

    在数据可视化领域利用webgl来创建三维场景或VR已经越来越普遍,各种开发框架也应运而生.今天我们就通过最基本的threejs来完成第一人称视角的场景巡检功能.如果你是一位threejs的初学者或正打 ...

  3. JS运动基础(三) 弹性运动

    加减速运动速度不断增加或减少速度减小到负值,会向反方向运动 弹性运动在目标点左边,加速:在目标点右边,减速根据距离,计算加速度 带摩擦力的弹性运动弹性运动+摩擦力 弹性:速度 += (目标点 - 当前 ...

  4. 足球foteball运动

    foteball  英语词汇,中文翻译为一种体育项目:足球运动 中文名:运动用的足球 外文名:foteball 目录 释义 foteball 读音:英 [ˈfʊtbɔ:l] 美 [ˈfʊtˌbɔl] ...

  5. 足球3v3心得

    最近常踢球,由于不容易凑人,所以都是最小场:3v3.一开始是凭发育踢,谁的体力好.技术好.速度快.身体壮谁占优.渐渐觉得这样没有意思,就花点时间研究了下足球技战术,总结出几个简单的规律,后来发现这些好 ...

  6. webgl图库研究(包括BabylonJS、Threejs、LayaboxJS、SceneJS、ThingJS等框架的特性、适用范围、支持格式、优缺点、相关网址)

    3D图库框架范围与示例 摘要: 为实现企业80%以上的生产数据进行智能转化,在烟草.造纸.能源.电力.机床.化肥等行业,赢得领袖企业青睐,助力企业构建AI赋能中心,实现智能化转型升级.“远舢文龙数据处 ...

  7. 当会打王者荣耀的AI学会踢足球,一不小心拿下世界冠军!

    难得的元旦小假期,没有什么比得上在慵懒的冬日艳阳下放松自己,拿起手机,叫上了许久未一起作战的小伙伴,到王者荣耀中激战了一番,仿佛又回到了当年那个年轻的自己. 厉害不,毕竟当年DD也是王者五十星的水平, ...

  8. Windows Store App JavaScript 开发:小球运动示例

    通过前面内容的学习,相信读者已经对开发基于JavaScript的Windows应用商店应用有了一定的了解,本小节通过一个小球运动的示例来介绍如何新建一个JavaScript的Windows应用商店项目 ...

  9. Win10系列:JavaScript小球运动示例

    通过前面内容的学习,相信读者已经对开发基于JavaScript的Windows应用商店应用有了一定的了解,本小节通过一个小球运动的示例来介绍如何新建一个JavaScript的Windows应用商店项目 ...

随机推荐

  1. Docker Machine批量安装docker host

    Dokcer Machine Docker Machine 可以批量安装和配置 docker host   提高docker的安装效率   同时减少人工安装操作的失误 [root@localhost ...

  2. [LintCode] 77. Longest common subsequences_ Medium tag: Dynamic Programming

    Given two strings, find the longest common subsequence (LCS). Example Example 1: Input: "ABCD&q ...

  3. spring boot集成redis实现session共享

    1.pom文件依赖 <!--spring boot 与redis应用基本环境配置 --> <dependency> <groupId>org.springframe ...

  4. newcode网学习笔记(1)

    1.类的内存结构一开始指向的是虚函数表,指向虚函数表的指针为4个字节(32位系统)[类的内存结构最前面的是指向虚函数表的指针] 2.包含标准库文件以及相关命名空间,则系统不允许用户重新定义标准库函数, ...

  5. List、Set、Map集合

    1 List接口 我们掌握了Collection接口的使用后,再来看看Collection接口中的子类,他们都具备那些特性呢? 接下来,我们一起学习Collection中的常用几个子类(List集合. ...

  6. Jmeter笔记(Ⅱ)使用Jmeter实现轻量级的接口自动化测试

    接口测试虽然作为版本的一环,但是也是有一套完整的体系,有接口的功能测试.性能测试.安全测试:同时,由于接口的特性,接口的自动化低成本高收益的,使用一些开源工具或一些轻量级的方法,在测试用例开发的成本不 ...

  7. 快速学习C语言途径,让你少走弯路

    1.标准C语言能干什么? 坦白讲,在今天软件已经发展了半个多世纪,单纯的C语言什么都干不了.标准C语言库只提供了一些通用的逻辑运算方法以及字符串处理,当然字符串在C语言看来也是一种操作内存的方法,所以 ...

  8. windows 共享文件

  9. SQL 连接(内连接,外连接)

    内连接 现在有两张表,学生表student1,成绩表SC1,两张表的数据如下 现在要对两张表做连接查询,连接一般需要写条件,where 或者 on 后面 , select * from student ...

  10. 安装percona-toolkit工具时遇到的问题

    1. 从这个链接https://www.percona.com/doc/percona-toolkit/3.0/index.html下载percona-toolkit安装包 2. 下载完成通过ftp工 ...