第一章 用three.js创建你的第一个3D场景

到官网下载three.js的源码和示例。

创建HTML框架界面

第一个示例的代码如下: 01-basic-skeleton.html 位于

Learning Three.js- The JavaScript 3D Library for WebGL\chapter-01

<!DOCTYPE html>
<html>
<head>
<title>Example 01.01 - Basic skeleton</title>
<script type="text/javascript"
src="../libs/three.js"></script>
<script type="text/javascript"
src="../libs/jquery-1.9.0.js"></script>
<style>
body{
/* set margin to 0 and overflow to hidden,
to use the complete page */
margin: 0;
overflow: hidden;
}
</style>
</head>
<body>
<!-- Div which will hold the Output -->
<div id="WebGL-output">
</div>
<!-- Javascript code that runs our Three.js examples -->
<script type="text/javascript">
// once everything is loaded, we run our Three.js stuff.
$(function () {
// here we'll put the Three.js stuff
});
</script>
</body>
</html>

Three.js 有两个版本:

• Three.min.js:压缩版本,去掉了空格和换行,大小变小了,加载时占用系统资源小。

• Three.js:未压缩版本,易于阅读和调试,但加载时占用系统资源较大。

渲染和展示一个三维物体

我们接下来将会创建我们的第一个场景并添加一系列的物体。其中包括:

Plane :有两个面的矩形,作为我们场景的地面,将会在场景中部渲染成一个灰色的矩形。

Cube :正方体,我们将渲染成红色。

Sphere :球体,我们将渲染成蓝色。

Camera :相机决定了看到了什么。

Axes :坐标轴,x,y,z轴。一个很好的调试工具,能够让你知道物体渲染在哪里。

第二个示例的代码如下 02-first-scene.html 位于

Learning Three.js- The JavaScript 3D Library for WebGL\chapter-01

<!DOCTYPE html>

<html>

<head>
<title>Example 01.02 - First Scene</title>
<script type="text/javascript" src="../libs/three.js"></script>
<script type="text/javascript" src="../libs/jquery-1.9.0.js"></script>
<style>
body{
/* set margin to 0 and overflow to hidden, to go fullscreen */
margin: 0;
overflow: hidden;
}
</style>
</head>
<body> <!-- Div which will hold the Output -->
<div id="WebGL-output">
</div> <!-- Javascript code that runs our Three.js examples -->
<script type="text/javascript"> // once everything is loaded, we run our Three.js stuff.
$(function () { // create a scene, that will hold all our elements such as objects, cameras and lights.
var scene = new THREE.Scene(); // create a camera, which defines where we're looking at.
var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000); // create a render and set the size
var renderer = new THREE.WebGLRenderer(); renderer.setClearColorHex(0xEEEEEE);
renderer.setSize(window.innerWidth, window.innerHeight); var axes = new THREE.AxisHelper( 20 );
scene.add(axes); // create the ground plane
var planeGeometry = new THREE.PlaneGeometry(60,20);
var planeMaterial = new THREE.MeshBasicMaterial({color: 0xcccccc});
var plane = new THREE.Mesh(planeGeometry,planeMaterial); // rotate and position the plane
plane.rotation.x=-0.5*Math.PI;
plane.position.x=15
plane.position.y=0
plane.position.z=0 // add the plane to the scene
scene.add(plane); // create a cube
var cubeGeometry = new THREE.CubeGeometry(4,4,4);
var cubeMaterial = new THREE.MeshBasicMaterial({color: 0xff0000, wireframe: true});
var cube = new THREE.Mesh(cubeGeometry, cubeMaterial); // position the cube
cube.position.x=-4;
cube.position.y=3;
cube.position.z=0; // add the cube to the scene
scene.add(cube); var sphereGeometry = new THREE.SphereGeometry(4,20,20);
var sphereMaterial = new THREE.MeshBasicMaterial({color: 0x7777ff, wireframe: true});
var sphere = new THREE.Mesh(sphereGeometry,sphereMaterialMaterial); // position the sphere
sphere.position.x=20;
sphere.position.y=4;
sphere.position.z=2; // add the sphere to the scene
scene.add(sphere); // position and point the camera to the center of the scene
camera.position.x = -30;
camera.position.y = 40;
camera.position.z = 30;
camera.lookAt(scene.position); // add the output of the renderer to the html element
$("#WebGL-output").append(renderer.domElement); // render the scene
renderer.render(scene, camera);
}); </script>
</body>
</html>

可知有如下几个步骤:

  1. 创建并设置scene、render、camera。

  2. 创建对象,指定Geometry和Material,设置position并加入到scene中

  3. 把渲染的结果显示在 $('div#WebGL-output')对象中。

  4. 开始渲染。

加上材质、灯光和阴影

第三个示例的代码如下: 03-materials-light.html 位于

Learning Three.js- The JavaScript 3D Library for WebGL\chapter-01

<!DOCTYPE html>

<html>

<head>
<title>Example 01.03 - Materials and light</title>
<script type="text/javascript" src="../libs/three.js"></script>
<script type="text/javascript" src="../libs/jquery-1.9.0.js"></script>
<script type="text/javascript" src="../libs/stats.js"></script>
<script type="text/javascript" src="../libs/dat.gui.js"></script>
<style>
body{
/* set margin to 0 and overflow to hidden, to go fullscreen */
margin: 0;
overflow: hidden;
}
</style>
</head>
<body> <!-- Div which will hold the Output -->
<div id="WebGL-output">
</div> <!-- Javascript code that runs our Three.js examples -->
<script type="text/javascript"> // once everything is loaded, we run our Three.js stuff.
$(function () { // create a scene, that will hold all our elements such as objects, cameras and lights.
var scene = new THREE.Scene(); // create a camera, which defines where we're looking at.
var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000); // create a render and set the size
var renderer = new THREE.WebGLRenderer(); renderer.setClearColorHex(0xEEEEEE, 1.0);
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.shadowMapEnabled = true; // create the ground plane
var planeGeometry = new THREE.PlaneGeometry(60,20);
var planeMaterial = new THREE.MeshLambertMaterial({color: 0xffffff});
var plane = new THREE.Mesh(planeGeometry,planeMaterial);
plane.receiveShadow = true; // rotate and position the plane
plane.rotation.x=-0.5*Math.PI;
plane.position.x=15
plane.position.y=0
plane.position.z=0 // add the plane to the scene
scene.add(plane); // create a cube
var cubeGeometry = new THREE.CubeGeometry(4,4,4);
var cubeMaterial = new THREE.MeshLambertMaterial({color: 0xff0000});
var cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
cube.castShadow = true; // position the cube
cube.position.x=-4;
cube.position.y=3;
cube.position.z=0; // add the cube to the scene
scene.add(cube); var sphereGeometry = new THREE.SphereGeometry(4,20,20);
var sphereMaterial = new THREE.MeshLambertMaterial({color: 0x7777ff});
var sphere = new THREE.Mesh(sphereGeometry,sphereMaterial); // position the sphere
sphere.position.x=20;
sphere.position.y=4;
sphere.position.z=2;
sphere.castShadow=true; // add the sphere to the scene
scene.add(sphere); // position and point the camera to the center of the scene
camera.position.x = -30;
camera.position.y = 40;
camera.position.z = 30;
camera.lookAt(scene.position); // add spotlight for the shadows
var spotLight = new THREE.SpotLight( 0xffffff );
spotLight.position.set( -40, 60, -10 );
spotLight.castShadow = true;
scene.add( spotLight ); // add the output of the renderer to the html element
$("#WebGL-output").append(renderer.domElement); // call the render function
renderer.render(scene, camera);
}); </script>
</body>
</html>

分析示例二和示例一可以发现不同之处。

首先,示例二添加的灯光 ,类型是点光源,并且打开了阴影效果。

 // add spotlight for the shadows
var spotLight = new THREE.SpotLight( 0xffffff );
spotLight.position.set( -40, 60, -10 );
spotLight.castShadow = true;
scene.add( spotLight );

然后,示例一采用的是BasicMaterial材质(效果为三角网格),而示例二采用的是LambertMaterial

材质(效果为一般的纸质效果)。

用动画拓展你的第一个场景

示例四的源码如下: 04-materials-light-animation.html 位于

Learning Three.js- The JavaScript 3D Library for WebGL\chapter-01

<!DOCTYPE html>

<html>

<head>
<title>Example 01.04 - Materials, light and animation</title>
<script type="text/javascript" src="../libs/three.js"></script>
<script type="text/javascript" src="../libs/jquery-1.9.0.js"></script>
<script type="text/javascript" src="../libs/stats.js"></script>
<style>
body{
/* set margin to 0 and overflow to hidden, to go fullscreen */
margin: 0;
overflow: hidden;
}
</style>
</head>
<body> <div id="Stats-output">
</div>
<!-- Div which will hold the Output -->
<div id="WebGL-output">
</div> <!-- Javascript code that runs our Three.js examples -->
<script type="text/javascript"> // once everything is loaded, we run our Three.js stuff.
$(function () { var stats = initStats(); // create a scene, that will hold all our elements such as objects, cameras and lights.
var scene = new THREE.Scene(); // create a camera, which defines where we're looking at.
var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000); // create a render and set the size
var renderer = new THREE.WebGLRenderer(); renderer.setClearColorHex(0xEEEEEE, 1.0);
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.shadowMapEnabled = true; // create the ground plane
var planeGeometry = new THREE.PlaneGeometry(60,20,1,1);
var planeMaterial = new THREE.MeshLambertMaterial({color: 0xffffff});
var plane = new THREE.Mesh(planeGeometry,planeMaterial);
plane.receiveShadow = true; // rotate and position the plane
plane.rotation.x=-0.5*Math.PI;
plane.position.x=15
plane.position.y=0
plane.position.z=0 // add the plane to the scene
scene.add(plane); // create a cube
var cubeGeometry = new THREE.CubeGeometry(4,4,4);
var cubeMaterial = new THREE.MeshLambertMaterial({color: 0xff0000});
var cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
cube.castShadow = true; // position the cube
cube.position.x=-4;
cube.position.y=3;
cube.position.z=0; // add the cube to the scene
scene.add(cube); var sphereGeometry = new THREE.SphereGeometry(4,20,20);
var sphereMaterial = new THREE.MeshLambertMaterial({color: 0x7777ff});
var sphere = new THREE.Mesh(sphereGeometry,sphereMaterial); // position the sphere
sphere.position.x=20;
sphere.position.y=0;
sphere.position.z=2;
sphere.castShadow=true; // add the sphere to the scene
scene.add(sphere); // position and point the camera to the center of the scene
camera.position.x = -30;
camera.position.y = 40;
camera.position.z = 30;
camera.lookAt(scene.position); // add subtle ambient lighting
var ambientLight = new THREE.AmbientLight(0x0c0c0c);
scene.add(ambientLight); // add spotlight for the shadows
var spotLight = new THREE.SpotLight( 0xffffff );
spotLight.position.set( -40, 60, -10 );
spotLight.castShadow = true;
scene.add( spotLight ); // add the output of the renderer to the html element
$("#WebGL-output").append(renderer.domElement); // call the render function
var step=0;
render(); function render() {
stats.update();
// rotate the cube around its axes
cube.rotation.x += 0.02;
cube.rotation.y += 0.02;
cube.rotation.z += 0.02; // bounce the sphere up and down
step+=0.04;
sphere.position.x = 20+( 10*(Math.cos(step)));
sphere.position.y = 2 +( 10*Math.abs(Math.sin(step))); // render using requestAnimationFrame
requestAnimationFrame(render);
renderer.render(scene, camera);
} function initStats() { var stats = new Stats(); stats.setMode(0); // 0: fps, 1: ms // Align top-left
stats.domElement.style.position = 'absolute';
stats.domElement.style.left = '0px';
stats.domElement.style.top = '0px'; $("#Stats-output").append( stats.domElement ); return stats;
}
}); </script>
</body>
</html>

分析源码可知与示例三的不同有:

 function initStats() {

        var stats = new Stats();

        stats.setMode(0); // 0: fps, 1: ms

        // Align top-left
stats.domElement.style.position = 'absolute';
stats.domElement.style.left = '0px';
stats.domElement.style.top = '0px'; $("#Stats-output").append( stats.domElement ); return stats;
}

这里这个函数创建了一个Stats,也就是左上角的显示帧数的方框。方法就是创建一个Stats,并设置

参数,然后将结果显示在$('#Stats-output')中。

然后看这段代码:

	var step=0;
render(); function render() {
stats.update();
// rotate the cube around its axes
cube.rotation.x += 0.02;
cube.rotation.y += 0.02;
cube.rotation.z += 0.02; // bounce the sphere up and down
step+=0.04;
sphere.position.x = 20+( 10*(Math.cos(step)));
sphere.position.y = 2 +( 10*Math.abs(Math.sin(step))); // render using requestAnimationFrame
requestAnimationFrame(render);
renderer.render(scene, camera);
}

这里更改了cube和sphere的角度和位置,然后调用requestAnimationFrame函数,该函数就是调用传入的参数render,然后就进入渲染循环,就产生了动画。

运用 dat.GUI库使得实验更简易

创建一个GUI 接受rotationSpeed和bouncingSpeed,值在0~0.5之间。

	var gui = new dat.GUI();
gui.add(controls, 'rotationSpeed',0,0.5);
gui.add(controls, 'bouncingSpeed',0,0.5);

创建一个javascript对象用来包含rotationSpeed和bouncingSpeed。

	var controls = new function() {
this.rotationSpeed = 0.02;
this.bouncingSpeed = 0.03;
}

然后改变的角度和位置可以采用controls的值。

第一章 用three.js创建你的第一个3D场景的更多相关文章

  1. Seen.js – 使用 SVG 或者 Canvas 渲染 3D 场景

    Seen.js 渲染3D场景为 SVG 或者 HTML5 画布.Seen.js 包含对于 SVG 和 HTML5 Canvas 元素的图形功能的最简单的抽象.所有这个库的其它组件都是不用关心将要渲染的 ...

  2. Node.js学习(第一章:Node.js安装和模块化理解)

    Node.js安装和简单使用 安装方法 简单的安装方式是直接官网下载,然后本地安装即可.官网地址:nodejs.org Windows系统下,选择和系统版本匹配的.msi后缀的安装文件.Mac OS ...

  3. Three-js 创建第一个3D场景

    1.一个场景至少需要的三种类型组件 相机/决定哪些东西将在屏幕上渲染    光源/他们会对材质如何显示,以及生成阴影时材质如何使用产生影响    物体/他们是在相机透视图里主要的渲染队形:方块.球体等 ...

  4. NodeJs>------->>第一章:Node.js介绍

    一:章节前言 二:Node.js概述 1:使用node.js能够解决什么问题 2:实现高性能服务器 3:非阻塞型I/O及事件环形机制 4:node.js适合开发的程序 三:node.js安装 一.No ...

  5. Node.js学习(第一章:Node.js简介)

    Node.js是什么? Node.js 诞生于 2009 年,由 Joyent 的员工 Ryan Dahl 开发而成, 目前官网最新版本已经更新到 12.0.0版本,最新稳定的是10.15.3.Nod ...

  6. Learning From Data 第一章总结

    之前上了台大的机器学习基石课程,里面用的教材是<Learning from data>,最近看了看觉得不错,打算深入看下去,内容上和台大的课程差不太多,但是有些点讲的更深入,想了解课程里面 ...

  7. css3创建3D场景

    浏览器本身是一个2维平面,对于3D的情况,实际上是增加了一个维度(深度),所以我们需要创建一个3D场景.这时浏览器不仅仅是一个平面了,更像是一个窗口,我们透过这个窗口去观察里面的三维世界.所谓的创建3 ...

  8. -Three.js开发指南---用three.js创建你的第一个三维场景(第一章)

    本章主要做了下面的工作 1 生成一个简单的场景,该场景的物体只有平面和坐标轴 2 在第一个demo的基础上添加光源和方块物体,并生成阴影 3 在第二个demo的基础上,增加动画,使得方块进行旋转 4 ...

  9. 第一章 创建WEB项目

    第一章   创建WEB项目 一.Eclipse创建WEB项目 方法/步骤1 首先,你要先打开Eclipse软件,打开后在工具栏依次点击[File]>>>[New]>>&g ...

随机推荐

  1. 国庆第六日(2014年10月6日11:51:15),node-webkit,理财产品

    (1)node-webkit:一篇很好的入门文章.入门.系列. 在window下的打包和运行.大漠的一篇讲解文章 . (2)lighttable: 官网. (3)现在的理财产品,雨后春笋般冒出:宝点网 ...

  2. c++ 中的8种智能指针[转]

    一.简介 由于 C++ 语言没有自动内存回收机制,程序员每次 new 出来的内存都要手动 delete.程序员忘记 delete,流程太复杂,最终导致没有 delete,异常导致程序过早退出,没有执行 ...

  3. SQL优化(2)

    建表时候数据库引擎的选择也可以达到优化的效果 InnoDB: 基于磁盘的资源是InnoDB表空间数据文件和它的日志文件,InnoDB 表的大小只受限于操作系统文件的大小,一般为 2GB MyISAM: ...

  4. python 自动化之路 day 03

    内容目录: 1. 字典 2. 集合 3. 文件处理 4. 字符编码   1. 字典操作 字典一种key - value 的数据类型,使用就像我们上学用的字典,通过笔划.字母来查对应页的详细内容. 语法 ...

  5. ubuntu ssh安装

    参考 http://www.linuxidc.com/Linux/2010-02/24349.htm  文章很不错!! ssh   登录名@ip地址 , 如果提示验证key can't be esta ...

  6. Chrome浏览器报错:Origin null is not allowed by Access-Control-Allow-Origin.

    问题:Chrome浏览器报错:Origin null is not allowed by Access-Control-Allow-Origin. 原因:.js文件中使用load()方法,而Chrom ...

  7. shell中case的用法学习笔记

    这篇文章主要为大家介绍shell中的case语句:可以把变量的内容与多个模板进行匹配,再根据成功匹配的模板去决定应该执行哪部分代码. 本文转自:http://www.jbxue.com/article ...

  8. 【pyhton】成员资格运算符

    >>> name = '小甲鱼' >>> '鱼' in name True >>> '肥鱼' in name False 来自小甲鱼的课后习题

  9. std::copy的使用

    看到有人在用std::copy这个东西,很简洁和爽啊,,所以找些帖子学习学习 http://blog.sina.com.cn/s/blog_8655aeca0100t6qe.html https:// ...

  10. sql server2005主从数据库同步配置

    网站规模到了一定程度之后,该分的也分了,该优化的也做了优化,但是还是不能满足业务上对性能的要求:这时候我们可以考虑使用主从库.主从库是两台服务器上的两个数据库,主库以最快的速度做增删改操作+最新数据的 ...