Three.js学习1_快速入门
快速上手, 搭建第一个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] 最简单的报名系统: 只有两个页面 人员信息列表页:展示已报名的人员信息列表.里面有一个报名按钮,点击按钮则会跳转到 ...
随机推荐
- PHP set_exception_handler() 函数
定义和用法 set_exception_handler() 函数设置用户自定义的异常处理函数. 该函数用于创建运行期间的用户自己的异常处理方法. 该函数返回旧的异常处理程序,如果失败则返回 NULL. ...
- PHP is_writeable() 函数
定义和用法 is_writeable() 函数检查指定的文件是否可写. 如果文件可写,该函数返回 TRUE. 该函数是 is_writable() 函数的别名. 语法 is_writeable(fil ...
- PHP nl_langinfo() 函数
定义和用法 nl_langinfo() 函数返回指定的本地信息. 注释:该函数无法在 Windows 平台上工作. 提示:与返回所有本地格式化信息的 localeconv() 函数不同,nl_lang ...
- Qt 之 Graphics View Framework 简介
Graphics View Framework 交互式 2D 图形的 Graphics View 框架概述.自 Qt4.2 中引入了 Graphics View,以取代其前身 QCanvas.Grap ...
- 学Java必看!零基础小白再也不用退缩了
程序员们!请往这儿看 对于JAVA的学习,可能你还会有许多的顾虑 不要担心 接着往下看吧 学Java前 一.数学差,英语也不好是不是学不好Java? 答案是:是~ 因为你在问这个问题的时候说明你对自己 ...
- vue-cookies 使用
import VueCookies from 'vue-cookies' Vue.use(VueCookies) $cookies.config() 设置默认值 $cookies.config(exp ...
- 从零搭建Spring Boot脚手架(5):整合 Mybatis Plus
1. 前言 在上一文中我根据Mybatis中Mapper的生命周期手动实现了一个简单的通用Mapper功能,但是遗憾的是它缺乏实际生产的检验.因此我选择更加成熟的一个Mybatis开发增强包.它就是已 ...
- MySQL字符集操作
一.查看编码 show variables like 'character%'; 二.临时设置编码 1.set names xxx set names ${编码}; "set names x ...
- Mac 从睡眠恢复后没有声音的问题
重启能解决,不想重启,因为不想重置当前工作状态 换个办法是: 杀掉coreaudiod进程,然后系统会把他自动拉起,然后就ok了.
- 学长小清新题表之UOJ 180.实验室外的攻防战
学长小清新题表之UOJ 180.实验室外的攻防战 题目描述 时针指向午夜十二点,约定的日子--\(2\)月\(28\)日终于到来了.随着一声枪响,伏特跳蚤国王率领着他的跳蚤大军们包围了 \(picks ...