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
随机推荐
- 14TH本周工作量及进度统计
14TH本周工作量及进度统计 本周psp: C(类别) C(内容) S(开始时间) ST(结束时间) I(中断时间) T(实际时间) 活动 本周会议 1 ...
- ROS学习笔记(八)——ROSTOPIC
NEW 1 $ roscore NEW 2 $ rosrun turtlesim turtlesim_node NEW 3 $ rosrun turtlesim turtle_teleop_key N ...
- 关于String的equals问题和StringBuilder问题
今天弄了一下String和StringBuilder,遇到了一些问题. 老规矩上代码图片: 发现stringBuilder的equals方法有问题,看了一下源码,发现stringbuilder没有重写 ...
- iOS多线程
关于iOS多线程 概述 这篇文章中,我不会说多线程是什么.线程和进程的区别.多线程有什么用,当然我也不会说什么是串行.什么是并行等问题,这些我们应该都知道的. 在 iOS 中其实目前有 4 套多线程方 ...
- welcome-file-list设置问题之css,js文件无法加载
web.xml里的welcome-file-list里设置默认访问页面为/html/index.html 但是在访问时,页面CSS都没加载. 正常输入网址却没问题.用/html/index.jsp也没 ...
- loadrunner实现excel文件导出操作
项目中需要对“商品信息”进行查询及导出,但是loadrunner并不能录制到“保存”这一操作. 项目介绍:flex+Http协议: 不能录制的原因: 在我们点击了“导出”按钮后,服务端已经生成一份我们 ...
- vue的选项
这篇是我自己看着方便整理的,请直接看官方api:http://cn.vuejs.org/v2/api/ 数据 data,props,computed 注意,不应该使用箭头函数来定义计算属性函数 (例如 ...
- Java开发工具安装步骤内容如下
Java开发工具安装步骤内容如下 安装 开发工具 STS 链接下载网址 eclipse 链接下载网址 JDK安装 jdk链接下载地址 Marven环境 marven链接下载地址 Tomcat tomc ...
- PHP分页类,生成分页html字符串
<?php namespace Common\Common; /** * 该Page类主要有两个方法:showPageString(), showPageStringAsAJAX() * * s ...
- struct和typedef struct彻底明白了
struct和typedef struct 分三块来讲述: 1 首先://注意在C和C++里不同 在C中定义一个结构体类型要用typedef: typedef struct Student { int ...