十分钟快速实战Three.js

JavaScript06

十分钟快速实战Three.js,第1张

前言

本文不会对Three.js几何体、材质、相机、模型、光源等概念详细讲解,会首先分成几个模块给大家快速演示一盒小案例。大家可以根据这几个模块快速了解Three.js的无限魅力。

学习

我们会使用Three.js简单做一个立方体,为了大家更能宏观的了解Three.js。我将会分解成代码段(模块)来进行开发。

模块如下:

场景对象

网格模型

光源

相机

渲染器对象

渲染操作

1. 创建html文件

首先,我们得创建一个html文件,这样才有地方开发。创建完成后,我们可以引入Three.js文件,今天,它可是主角。我是直接引入远程URL地址进行加载,你也可以去官网进行下载到本地引入。

2. 创建场景对象

借助Three.js引擎创建好一个虚拟的三维场景。

3. 创建网格模型

这行代码new THREE.BoxGeometry(200, 200, 200)的意思是创建了一个长200、宽200、高200的立方体对象。然后并通过代码new THREE.MeshLambertMaterial给立方体对象定义材质,这里可以理解成立方体的属性(包含了颜色、透明度等属性),这里暂时列举颜色属性。然后我们需要将立方体与属性联系起来,就用到网格模型,将两者作为构造函数Mesh的两个参数传进去,最后添加到场景里面。

4. 设置光源

代码new THREE.PointLight('#fff')创建了一个点光源对象,参数#fff定义的是光照强度, 你可以尝试把参数更改为#666,你会看到立方体的表面颜色变暗,这很好理解,实际生活中灯光强度变低了,周围的景物自然暗淡。比如夜空中的照明弹就是一个点光源例子。代码THREE.AmbientLight('#333')创建了一个环境光对象,环境光的颜色会影响到整个场景,环境光没有特定的光源,是模拟漫反射的一种光源,因此不需要指定位置它能将灯光均匀地照射在场景中每个物体上面,一般情况下用来弱化阴影或者添加一些颜色到环境中,因此不能将环境光作为场景中的唯一光源。

。。。。。。。。。。。。。

作者:Vam的金豆之路

篇幅有限更多请见扩展链接:http://www.mark-to-win.com/tutorial/50733.html

目标描述:多个图片排列下来,按右边的小按钮,抵达相应位置,鼠标滑动,抵达下一图,或者上一图

知识点:onmousewheel,addEventListener,scrollTo,setTimeout

过程:

1.body 宽,高钉死,100vw,100vh,overflow:hidden 使得不出现滚动条,不然不好看

2.图片放进去,排起来,(注意:默认空隙的处理,可以使用flex布局,空隙就不见了)

3.制作相对于视窗的按钮,几张图片就几个按钮,(position: fixed计算一下高度,可以利用calc计算top使得上下居中)

4.美化一下,css写写

5.先写简单的按钮事件

6.写监听滑动事件(onmousewheel在火狐无效,DOMMouseScroll只在火狐有效)

react在componentDidMount的时候监听

7.补充写一下火狐的

9.测试检查一下。

完成啦,啦啦啦~

我的截图:

缺点:这里我是一直对页面进行监听,导致滑动过快对时候动画效果开始执行对时间延后。体现为滑动对轻,整个就流畅一点。

ps:写这种带计算带页面,我觉得是考验思维的,你可以对这里的知识点不熟练,但是你必须得能理解每一步的加加减减。

《nodejs开发实战详解电子式》百度网盘pdf最新全集下载:

链接:https://pan.baidu.com/s/1sx6HT1Ktwwq5R_IGauqWlQ

?pwd=nkw0 提取码:nkw0

简介:本书共分为11章。涵盖的主要内容有:Node.js的概念、应用场景、环境搭建和配置、异步编程;Node.js的模块概念及应用、Node.js的设计模式;简单服务的搭建、Node.js静态资源管理、文件处理、Cookie和Session实践、Crypto模块加密、Node.js与Nginx配合;UDP服务器的搭建、Node.js与PHP之间合作;Node.js的实现机制、Node.js的原生扩展与应用;Node.js的编码习惯;Node.js操作MySQL和MongoDB;基于Node.js的Myweb框架的基本设计架构及实现;利用Myweb框架实现一个简单的Web聊天室;在线聊天室案例和在线中国象棋案例的实现;Node.js的日志模块、curl模块、crontab模块、forever模块、xml模块和邮件发送模块等应用工具。

本书非常适合从事编程开发的学生、教师、广大科研人员和工程技术人员研读。建议阅读本书的读者对的语法和PHP的相关知识有的了解。当然,如果你是初学者,本书也是一本难得的参考书。