快速上手, 搭建第一个3D场景

　　最重要的一步, 先下载three.js, 引入网页中 <script src="./three.js"></script>

　　效果图:

1. 五大因素

　　搭建一个场景必须要的五大因素, 场景, 相机, 光源, 物体, 渲染器

　　结合生活, 场景就是我们身处的环境, 相机是我们的眼睛, 光源和物体见名知意, 渲染器是将我们看到的渲染到网页上, 五大因素也就这样, 那开始搭建环境吧!

2. 开始搭建环境

　　在搭建环境前, 为了使图像渲染在整个网页上, 需要设置

 body{

         margin:;

         /* 消除body外间距 */

         overflow: hidden;

         /* 作用是消除网页右方滚动条*/

 }

第一步, 创建场景

 　　 let scene = new THREE.Scene();

第二步, 创建光源

     let light = new THREE.AmbientLight(0x666666);

     scene.add(light);

　　注意点: 光源, 相机, 物体都是需要放进场景中, 结合实际更容易想

第三步, 创建相机

     let camera = new THREE.PerspectiveCamera(

         45,

         window.innerWidth / window.innerHeight,

         1, 1000 );

     scene.add( camera );

     camera.position.set(2, 2, 2);

     camera.lookAt(scene.position);

　　注意点:

　　1-4行创建相机, 5行将相机添加至场景中, 6行表示将相机放在坐标(2,2,2)处, 场景坐标为(0,0,0), 7行表示相机看向原点

第四步, 创建物体

     let cube = new THREE.Mesh(

         new THREE.BoxGeometry( 1, 1, 1 ),

         new THREE.MeshLambertMaterial( {

             color: 0xf00ff0,

             // wireframe: true

         } )

     );

     scene.add(cube);

　　注意点:

　　1-7行创建一个长宽高为1的正方体 (这里提个问题, 在three.js中, 是以什么为一个单位, m, dm, cm?)

第五步, 创建渲染器

     let renderer = new THREE.WebGLRenderer();

     renderer.setClearColor(0xffffff);

     renderer.setSize(window.innerWidth, window.innerHeight);

     document.body.appendChild(renderer.domElement);

　　解释:

　　1行创建渲染器, 4行, 将渲染器表示为一个元素加入到网页中, 之后渲染位置, 从这个元素开始.　　23两行分别设置背景颜色和渲染尺寸

第六步, 创建刷新函数

　　想象一下游戏, 每一秒场景都会不同, 某个时刻的场景对应一张图片, 也就是一帧, 浏览器也需要不停刷新图片, 不停刷新帧, 这样才能看到动画效果

     render();

     function render() {

         renderer.render(scene, camera);

         requestAnimationFrame(render);

     }

　　解释:

　　1行调用函数, 2行定义函数, 3行渲染一帧图像(一张图像), 4行向浏览器发起重新执行render函数的请求, 不断反复

OK! 代码完成

完整代码如下

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

     <style>

         body{

             margin: 0;

             /* 消除body外间距 */

             overflow: hidden;

             /* 作用是消除网页右方滚动条*/

         }

     </style>

     <script src="../build/three.js"></script>

 </head>

 <body>

 <script>

     let scene = new THREE.Scene();

     let camera = new THREE.PerspectiveCamera(

         45,

         window.innerWidth / window.innerHeight,

         1, 1000 );

     scene.add( camera );

     camera.position.set(2, 2, 2);

     camera.lookAt(scene.position);

     let light = new THREE.AmbientLight(0x666666);

     scene.add(light);

     let cube = new THREE.Mesh(

         new THREE.BoxGeometry( 1, 1, 1 ),

         new THREE.MeshLambertMaterial( {

             color: 0xf00ff0,

             // wireframe: true

         } )

     );

     scene.add(cube);

     let renderer = new THREE.WebGLRenderer();

     renderer.setClearColor(0xffffff);

     renderer.setSize(window.innerWidth, window.innerHeight);

     document.body.appendChild(renderer.domElement);

     render();

     function render() {

         renderer.render(scene, camera);

         requestAnimationFrame(render);

     }

 </script>

 </body>

 </html>

Three.js学习1_快速入门的更多相关文章

Vue.js学习 Item1 --快速入门
我们以 Vue 数据绑定的快速导览开始.如果你对高级概述更感兴趣,可查看这篇博文. 尝试 Vue.js 最简单的方法是使用 JSFiddle Hello World 例子.在浏览器新标签页中打开它,跟 ...
Vue.js 60 分钟快速入门
Vue.js 60 分钟快速入门转载作者:keepfool 链接:http://www.cnblogs.com/keepfool/p/5619070.html Vue.js介绍 Vue.js是当下 ...
不会几个框架，都不好意思说搞过前端： Vue.js - 60分钟快速入门
Vue.js——60分钟快速入门 Vue.js是当下很火的一个JavaScript MVVM库,它是以数据驱动和组件化的思想构建的.相比于Angular.js,Vue.js提供了更加简洁.更易于理 ...
前端学习 node 快速入门系列 —— 初步认识 node
其他章节请看: 前端学习 node 快速入门系列初步认识 node node 是什么 node(或者称node.js)是 javaScript(以下简称js) 运行时的一个环境.不是一门语言. 以 ...
前端学习 node 快速入门系列 —— npm
其他章节请看: 前端学习 node 快速入门系列 npm npm 是什么 npm 是 node 的包管理器,绝大多数 javascript 相关的包都放在 npm 上. 所谓包,就是别人提供出来供他 ...
前端学习 node 快速入门系列 —— 模块（module）
其他章节请看: 前端学习 node 快速入门系列模块(module) 模块的导入核心模块在初步认识 node 这篇文章中,我们在读文件的例子中用到了 require('fs'),在写最简单的 ...
前端学习 node 快速入门系列 —— 简易版 Apache
其他章节请看: 前端学习 node 快速入门系列简易版 Apache 我们用 node 来实现一个简易版的 Apache:提供静态资源访问的能力. 实现直接上代码. - demo - stati ...
前端学习 node 快速入门系列 —— 服务端渲染
其他章节请看: 前端学习 node 快速入门系列服务端渲染在简易版 Apache一文中,我们用 node 做了一个简单的服务器,能提供静态资源访问的能力. 对于真正的网站,页面中的数据应该来自服 ...
前端学习 node 快速入门系列 —— 报名系统 - [express]
其他章节请看: 前端学习 node 快速入门系列报名系统 - [express] 最简单的报名系统: 只有两个页面人员信息列表页:展示已报名的人员信息列表.里面有一个报名按钮,点击按钮则会跳转到 ...

随机推荐

darkbzoj #3759. Hungergame 博弈论线性基 NIM
LINK:Hungergame 放上一道简单题复习一下. 考虑每次可以打开任意多个盒子如果全打开了那么就是一个NIM游戏了. 如果发现局面是异或为0的时候此时先手必胜了. 考虑局面不全体异或为0 ...
【av68676164（p41-p42)】内存管理功能
存储器的功能需求容量足够大速度足够快信息永久保存多道程序并行多道程序并行带来的问题共享:代码和数据共享,节省内存保护:不允许内存中的程序相互间非法访问实际存储器体系三级存储体系 Ca ...
9、Java 常用类 Math,Number子类,String,Character
本小节主要介绍一些如何去使用Java提供的类如何去使用?如何在实战中使用?从来没有用过的如何去学习? 分享一下发哥的学习方法? 1.针对性的学习在理解自己的需求或者要做某一块的内容后,有针对性,选择 ...
MySQL 插入或更新
MySQL DML 记录数据操纵语言DML(Data Manipulation Language),用户通过它可以实现对数据库的基本操作. 记录一些遇到的语法,以便随时查阅. 插入或更新 ON DU ...
动态路由 - EIGRP
EIGRP 特性 EIGRP(增强内部网关路由协议)是思科的私有协议,属于距离矢量路由协议,但又具有链路状态的特性.并且支持 VLSM(可变长子网和无类路由协议).但在本质上说还是传送路由条目. 具有 ...
C#LeetCode刷题-数组
数组篇 # 题名刷题通过率难度 1 两数之和 C#LeetCode刷题之#1-两数之和(Two Sum) 43.1% 简单 4 两个排序数组的中位数 C#LeetCode刷题之#4-两个排序数组 ...
Compilation failed (return status=1): g++.exe: error: CreateProcess: No such file or directory错误
windows10上 theano安装之后出现的问题 >>> import theano You can find the C code in this temporary file ...
他们都说JVM能实际使用的内存比-Xmx指定的少？这是为什么呢
这确实是个挺奇怪的问题,特别是当最常出现的几种解释理由都被排除后,看来JVM并没有耍一些明显的小花招: -Xmx和-Xms是相等的,因此检测结果并不会因为堆内存增加而在运行时有所变化. 通过关闭自适应 ...
ms14-064漏洞复现
本博客最先发布于我的个人博客,如果方便,烦请移步恰醋的小屋查看,谢谢您! 这是我在实验室学习渗透测试的第五个漏洞复现,一个多小时便完成了.学长给的要求只需完成查看靶机信息.在指定位置创建文件夹两项操作 ...
VM 添加硬盘，分区，挂载
添加硬盘后使用>df -h 命令 VM安装linux系统之后,发现我们的硬盘不够,可通过两种方式添加硬盘方式一:选择虚拟机,点击右键,设置,点击硬盘,点击添加,输入新添加的硬盘大小,保存与虚拟 ...

Three.js学习1_快速入门