第一篇就画一个球体吧

  首先我们知道Three.js其实是一个3D的JS引擎,其中的强大之处就在于这个JS框架并不是依托于JQUERY来写的。那么,我们在写这一篇绘制3D球体的文章的时候,应该注意哪些地方呢?下面我就来一一列举

1.场景。

  场景是什么,说得简单一点,场景就是一个canvas ,我们就是要在Canvas上面实现3D效果的画面而已。场景和容器,相机是息息相关的,我们就拿拍戏来说,假如我们需要演一个古装剧的撕逼场景,那么,我们需要的道具其中之一就是一个相机。

2.容器

  就是承载球体的DIV,比如我们要演戏,那么演戏的场地,比如某个山清水秀的地方。

3.相机

  简单一点说,就是你从屏幕里面看这个球体的样子,说得不太明白?其实很简单,你想一下你在玩生化危机的时候的,是不是第一人称?那么你看到的不同的怪物,以不同的视角去看的话,那么得到的结果,就会有差异,这个就是相机的作用。

4.演员(这里指的是球体)

  这个就太容易了,不过以后我提到的可不一定是球体哦,也许是正方体,也许是一个复杂的形状都有可能,THREE.JS提供了很多的“库”,这些库可以绘制出不同的形状的物体,对于初学者来说,理解这些就足够了。

代码

  代码不是特别的复杂,大家理解的话可以按照层级关系来理解,比如场景里面添加相机什么的,反正就是一层一层的套,英语的话有一些专有词汇,

<div id="container"></div>

<script>
//设置场景的大小
var width = 400;
var height = 300; //设置相机的一些参数。
var view_angle = 45;
aspect = width / height;
near = 0.1;
far = 10000; //设置容器
var $container = $("#container"); //新建一个WebGL 渲染,以及相机
var renderer = new THREE.WebGLRenderer();
var camera =
new THREE.PerspectiveCamera(
view_angle, aspect, near, far
);
var scene = new THREE.Scene(); //把相机添加到场景里面
scene.add(camera); camera.position.z = 300; renderer.setSize(width, height); //附加DOM元素
$container.append(renderer.domElement); //设置球体的值
var radius = 50, segemnt = 16, rings = 16; var sphereMaterial = new THREE.MeshLambertMaterial({ color: 0xCC0000 }); var sphere = new THREE.Mesh(
new THREE.SphereGeometry(radius,segemnt,rings),
sphereMaterial
); sphere.geometry.verticesNeedUpdate = true;
sphere.geometry.normalsNeedUpdate = true; scene.add(sphere); var pointLight = new THREE.PointLight(0XFFFFFF); pointLight.position.x = 10;
pointLight.position.y = 50;
pointLight.position.z = 150; scene.add(pointLight); //画图
renderer.render(scene, camera); </script>

  

最终效果

  由于我也是初学者,所以给大家的帮助也很有限,不过我会努力的,经常把自己学习Three.js的一些心得分享出来,共勉之!

随机推荐

  1. URLEncoder.encode 和 URLDecoder.decode 处理url的特殊参数

    在使用 url 的 queryString 传递参数时,因为参数的值,被DES加密了,而加密得到的是 Base64的编码字符串,类似于: za4T8MHB/6mhmYgXB7IntyyOUL7Cl++ ...

  2. SQLServer安装正常服务启动正常却无法连接

    最近给服务器安装sql2008R2版本,发现一个抓狂的问题,我自己觉得,用sql多年,从2005版本到2012版本都从安装到使用都很熟练,竟然被2008版本难住了 给服务器正常安装,sql2008r2 ...

  3. 接口JSon字符串格式

  4. 【转】Android Studio安装配置学习教程指南 下载和安装--不错

    背景 相信大家对Android Studio已经不陌生了,Android Studio是Google于2013 I/O大会针对Android开发推出的新的开发工具,目前很多开源项目都已经在采用,Goo ...

  5. 【Bug笔记】The superclass &amp;quot;javax.servlet.http.HttpServlet&amp;quot; was not found on the Java Build Path

    因为今天下载了一个eclipse se的版本号.所以想把原本eclipse ee这个软件外面的目录eclipse名字该成eclipse ee,方便以后的区分和管理.改了后又一次打开eclipse ee ...

  6. tiny210——uboot移植Makefile文章分析

    这东西已经写,我们没有时间发布,如今,终于有时间稍微长送记录汇总uboot学习过程.具体了.以后忘了也能够再温习回来嘛有些特殊字符显示得乱掉了 Makefile追踪技巧: 技巧1:能够先从编译目标開始 ...

  7. [ZJOI2019]线段树(线段树)

    看到这题,首先想到将求和转期望,即每次操作进行概率为1/2,求节点打标记概率. 首先对于每次区间修改操作,对节点进行分类: 1.这个点和其父亲都和修改区间无交,这种情况可以无视. 2.这个点和修改区间 ...

  8. HDU4287-STL模拟水题

    一场2012天津网络预选赛的题,签到题. 但是还是写了三四十分钟,C++和STL太不熟悉了,总是编译错误不知道怎么解决. 一开始用的Char [] 后来改成了string,STL和string搭配起来 ...

  9. 基于R语言的时间序列分析预测

    数据来源: R语言自带 Nile 数据集(尼罗河流量) 分析工具:R-3.5.0 & Rstudio-1.1.453 #清理环境,加载包 rm(list=ls()) library(forec ...

  10. Jsp页面用ajax传输json数组的方法

    详细参考jquery的API 这里主要展示实例,即写法 <%@ page language="java" contentType="text/html; chars ...