Three.js入门
一、前段时候花了些功夫研究了下WebGL,了解了基本实体的实现原理和实现方法,现在回忆就只记得如果要我画个圆形,怀疑都要了我的命(那得画多少个三角形。。。)。功夫不负有心人,今天学习Three.js得到了两个最大的感触。1)学习了WebGL,学习Three.js实在是太爽口了,不用考虑太多实现的细节,直接粗暴。2)艾玛,这玩意儿实在太强大,对WebGL的封装达到了一定境界,实现下图这样的效果,分分钟搞定!

二、创建场景(var scene = new THREE.Scene();),相机(var camera = new THREE.PerspectiveCamera(视角,宽高比,近,远);),渲染器(var renderer = new THREE.WebGLRenderer();renderer.setClearColor(16进制颜色代码);renderer.setSize(场景宽,场景高);),坐标轴(var axes = new axisHelper(int 坐标轴长短); scene.add(axes);)。
然后绘制地板(var planeG = new THREE.PlaneGeometry(长,宽);var planeM = new THREE.MeshLambertMaterial(颜色);var plane = new THREE.Mesh(planeG,planeM);调整角度plane.rotation.x = ..,位置plane.position.x = ...,然后scene.add(plane);)[其中MeshLambertMaterial对应的还有MeshBasicMaterial、MeshPhongMaterial。Lambert指的是漫反射表面材质,Phong指的是近镜面反射、Basic对光照没有反射效果]、正方体(BoxGeometry)、球体(SphereGeometry)、相机位置设置。
添加光源(var spotLight = new THREE.SpotLight(颜色);spotLight.position.set(光线发射起点);scene.add(spotLight);)。第二步需要修改实体的材质,第三步是使实体(包括地板)能够承载阴影,第四步是定义场景中的哪个光源能够产生阴影。
最后将渲染的内容添加到指定的<div>中,并将camera渲染到scene中。
三、学习了通过http-server开启本地服务器,一直都对web服务器没有一个概念,通过这个实践算是有了一丁点的认识。:) 三、同时今天去听了Esri公司(一听名字就觉得高大上)的arcGIS相关的内容,去之前以为自己又要打酱油了,结果后来才发现值了。不但让我对一个酷炫(至少对将来从事的行业有借鉴价值)思想有了皮肤级的认识,其次让我在其中发现了自己能够从事的东西。该Web GIS平台主要是基于GIS,同时和其他相关信息协同,并结合报表、图表等第三方控件,实现一个基于GIS的管理平台。
说到底就是要:拼命学习javascript!!!共勉!!!!
Three.js入门的更多相关文章
- 1. web前端开发分享-css,js入门篇
关注前端这么多年,没有大的成就,就入门期间积累了不少技巧与心得,跟大家分享一下,不一定都适合每个人,毕竟人与人的教育背景与成长环境心理活动都有差别,但就别人的心得再结合自己的特点,然后探索适合自己的学 ...
- React.js入门笔记
# React.js入门笔记 核心提示 这是本人学习react.js的第一篇入门笔记,估计也会是该系列涵盖内容最多的笔记,主要内容来自英文官方文档的快速上手部分和阮一峰博客教程.当然,还有我自己尝试的 ...
- Ember.js入门教程、博文汇总
第一章 对象模型 Ember.js 入门指南——类的定义.初始化.继承 Ember.js 入门指南——类的扩展(reopen) Ember.js 入门指南——计算属性(compute properti ...
- JS入门之ActiveXObject对象(转载)
JS入门之ActiveXObject对象 此对象提供自动化对象的接口. function ActiveXObject(ProgID : String [, location : String] ...
- Node.js 入门手册:那些最流行的 Web 开发框架
这篇文章与大家分享最流行的 Node.js Web 开发框架.Node 是一个服务器端 JavaScript 解释器,它将改变服务器应该如何工作的概念.它的目标是帮助程序员构建高度可伸缩的应用程序,编 ...
- 【特别推荐】Node.js 入门教程和学习资源汇总
这篇文章与大家分享一批很有用的 Node.js 入门教程和学习资源.Node 是一个服务器端的 JavaScript 解释器,它将改变服务器应该如何工作的概念.它的目标是帮助程序员构建高度可伸缩的应用 ...
- 让我们一起学习《Node.js入门》一书吧!
Node.js入门 读完本书之后,你将完成一个完整的web应用,该应用允许用户浏览页面以及上传文件. 里面对一些知识的讲解,让你略窥Node.js的门径.最好一段代码一段代码的写下来,我的习惯是手里拿 ...
- web前端开发分享-css,js入门篇(转)
转自:http://www.cnblogs.com/jikey/p/3600308.html 关注前端这么多年,没有大的成就,就入门期间积累了不少技巧与心得,跟大家分享一下,不一定都适合每个人,毕竟人 ...
- Node.js入门实例程序
在使用Node.js创建实际“Hello, World!”应用程序之前,让我们看看Node.js的应用程序的部分.Node.js应用程序由以下三个重要组成部分: 导入需要模块: 我们使用require ...
- Underscore.js(1.7.0) 中文文档 Underscore.js 入门
原文地址:http://www.css88.com/doc/underscore/ Underscore.js 入门 http://www.tuicool.com/articles/jQ3IfeR
随机推荐
- 点击按钮div显示,点击div或者document,div隐藏
$("button").click(function(event){ event.stopPropagation(); if($("div").is(':hid ...
- [iOS]浅谈NSRunloop工作原理和相关应用
一. 认识NSRunloop 1.1 NSRunloop与程序运行 那么具体什么是NSRunLoop呢?其实NSRunLoop的本质是一个消息机制的处理模式.让我们首先来看一下程序的入口——main ...
- linux进程通信之使用匿名管道进行父子进程通信
管道:是指用于连接一个读进程和一个写进程,以实现它们之间通信的共享文件,又称pipe文件. 管道是单向的.先进先出的.无结构的.固定大小的字节流,它把一个进程的标准输出和另一个进程的标准输入连接在一起 ...
- 我需要在Web上完成一个图片上传的功能后续(+1)
微信入口施工完成.关键字识别中增加了本次活动的"关键字",在系统中增加了链接.不过,由于地址包含私密关键参数,这里隐藏,敬请原谅. 下一步,微信链接的地址页面是要对微信用户的信息进 ...
- Jquery设置Cookie
jQuery代码: <script src="js/jquery-1.3.1.js" type="text/javascript"></scr ...
- mysql数据库的导入导出
当我们在操作数据库的时候,难免会遇到数据导入导出的一些操作,今天突然学到了这个知识点,特意来给大家分享. 我用的是data的这条数据 1.使用数据 mysql> use data; Databa ...
- explain 执行计划详解
id:id是一组数字,表示查询中执行select子句或操作表的顺序,如果id相同,则执行顺序从上至下,如果是子查询,id的序号会递增,id越大则优先级越高,越先会被执行. id列为null的就表是这是 ...
- 环境jdk、编码不一致造成的项目报错
一个项目在eclipse 中可以运行 , 到另一个eclipse 中不能运行,多是因为jdk过低.包没有引人.环境jdk.编码不一致造成的.或者是因为编译文件在另一个环境里跟JDK等 不匹配. 解决办 ...
- CSS3学习之分享下transition属性
最近在网上看到很多transition写的效果,借鉴http://www.w3school.com.cn分享下代码, 1.语法:transition: property duration timing ...
- python pandas根据首字母选行
ret2.loc[ret2['INNERCODE'].map(lambda x:x[0]=='6' or x[0]=='3' or x[0]=='0' ),:]和matlab不一样的风格 - -直接用 ...