一、前段时候花了些功夫研究了下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. 1. web前端开发分享-css,js入门篇

    关注前端这么多年,没有大的成就,就入门期间积累了不少技巧与心得,跟大家分享一下,不一定都适合每个人,毕竟人与人的教育背景与成长环境心理活动都有差别,但就别人的心得再结合自己的特点,然后探索适合自己的学 ...

  2. React.js入门笔记

    # React.js入门笔记 核心提示 这是本人学习react.js的第一篇入门笔记,估计也会是该系列涵盖内容最多的笔记,主要内容来自英文官方文档的快速上手部分和阮一峰博客教程.当然,还有我自己尝试的 ...

  3. Ember.js入门教程、博文汇总

    第一章 对象模型 Ember.js 入门指南——类的定义.初始化.继承 Ember.js 入门指南——类的扩展(reopen) Ember.js 入门指南——计算属性(compute properti ...

  4. JS入门之ActiveXObject对象(转载)

    JS入门之ActiveXObject对象   此对象提供自动化对象的接口.   function ActiveXObject(ProgID : String [, location : String] ...

  5. Node.js 入门手册:那些最流行的 Web 开发框架

    这篇文章与大家分享最流行的 Node.js Web 开发框架.Node 是一个服务器端 JavaScript 解释器,它将改变服务器应该如何工作的概念.它的目标是帮助程序员构建高度可伸缩的应用程序,编 ...

  6. 【特别推荐】Node.js 入门教程和学习资源汇总

    这篇文章与大家分享一批很有用的 Node.js 入门教程和学习资源.Node 是一个服务器端的 JavaScript 解释器,它将改变服务器应该如何工作的概念.它的目标是帮助程序员构建高度可伸缩的应用 ...

  7. 让我们一起学习《Node.js入门》一书吧!

    Node.js入门 读完本书之后,你将完成一个完整的web应用,该应用允许用户浏览页面以及上传文件. 里面对一些知识的讲解,让你略窥Node.js的门径.最好一段代码一段代码的写下来,我的习惯是手里拿 ...

  8. web前端开发分享-css,js入门篇(转)

    转自:http://www.cnblogs.com/jikey/p/3600308.html 关注前端这么多年,没有大的成就,就入门期间积累了不少技巧与心得,跟大家分享一下,不一定都适合每个人,毕竟人 ...

  9. Node.js入门实例程序

    在使用Node.js创建实际“Hello, World!”应用程序之前,让我们看看Node.js的应用程序的部分.Node.js应用程序由以下三个重要组成部分: 导入需要模块: 我们使用require ...

  10. Underscore.js(1.7.0) 中文文档 Underscore.js 入门

    原文地址:http://www.css88.com/doc/underscore/ Underscore.js 入门   http://www.tuicool.com/articles/jQ3IfeR

随机推荐

  1. 对 OverFeat: Integrated Recognition, Localization and Detection using Convolutional Networks 一文的理解

    一点最重要的学习方法:  当你读一篇论文读不懂时,如果又读了两遍还是懵懵懂懂时怎么办???方法就是别自己死磕了,去百度一下,如果是很好的论文,大多数肯定已经有人读过并作为笔记了的,比如我现在就把我读过 ...

  2. [Java] Java解析XML格式Response后组装成Map

    //Get and Parse Response def response = context.expand(‘${TestStepName#Response}’) def xmlParser = n ...

  3. reactiveCocoa

    我的理解 1通过block把按钮的addtarget的监听,处理,两个步骤二合一了, 好处是若在本控制器内添加监听,更方便 在自定义类监听就不一定了,因为经常监听到了,不一定就是自己处理,一般另外通知 ...

  4. Linux 虚拟机重新生成配置文件无法启动

    ifconfig...没有看到eth0..然后重启网卡又报下面错误. 故障现象: service network restartShutting down loopback insterface:  ...

  5. c++11的右值引用、移动语义

    对于c++11来说移动语义是一个重要的概念,一直以来我对这个概念都似懂非懂.最近翻翻资料感觉突然开窍,因此记下.其实搞懂之后就会发现这个概念很简单,并无什么高深的地方. 先说说右值引用.右值一般指的是 ...

  6. 用struts实现简单的登录

    1.建项目时选java EE6.0 2.写登陆界面 <body> <center> <form id="form1" name="form1 ...

  7. select distinct

    select distinct select distinct 用于返回表中唯一不同的值. 语法 select distinct 列名称 from 表名称 使用 distinct 关键字 Studen ...

  8. Missing (Mono Script), Missing Prefab

    开始研究Google Cardboard SDK,下载了一份gvr-unity-sdk,用Unity打开里面的Samples: CastleDefense,导出XCode项目在iPhone上面运行,出 ...

  9. Sprint1(第二天11.15)

    Sprint1(第二天11.15) Sprint1第一阶段 1.类名:软件工程-第一阶段 2.时间:11.14-11.23 3.选题内容:web版-餐厅到店点餐系统 4.团队博客地址: http:// ...

  10. svn快速教程

    本文拷贝自网址:http://www.subversion.org.cn/?action-viewnews-itemid-1 如何快速建立Subversion服务器,并且在项目中使用起来,这是大家最关 ...