【three.js第二课】页面自适应
1.在【three.js第一课】的基础上加入以下代码,改变窗口大小时,页面内容会自适应
//加入事件监听器,窗口自适应
window.addEventListener('resize', function(){
var width = window.innerWidth;
var height = window.innerHeight;
renderer.setSize(width,height);
camera.aspect = width/height;
camera.updateProjectionMatrix();
})
2.整体代码:
<!DOCTYPE html>
<html>
<head>
<title>demo1</title>
</head>
<style type="text/css">
body{
margin:;
}
canvas{
width:%;
height:%;
}
</style>
<body>
<script src="jquery.min.js"></script>
<script src="../build/three.js"></script>
<script type="text/javascript">
var scene = new THREE.Scene();//创建场景
//创建一个摄像机对象
var camera = new THREE.PerspectiveCamera(,window.innerWidth / window.innerHeight, 0.1, ); //创建渲染器
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight); document.body.appendChild(renderer.domElement);//渲染到浏览器 //加入事件监听器,窗口自适应
window.addEventListener('resize', function(){
var width = window.innerWidth;
var height = window.innerHeight;
renderer.setSize(width,height);
camera.aspect = width/height;
camera.updateProjectionMatrix();
}) //创建形状 BoxGeometry
var geometry = new THREE.BoxGeometry(,,); //创建材料 wireframe是否使用线条
var material = new THREE.MeshBasicMaterial({color:0xFFFFFF,wireframe:true}); //将材料和形状结合
var cube = new THREE.Mesh(geometry,material); //加入场景中
scene.add(cube); camera.position.z=;//设置相机的位置 //逻辑
var update=function(){
//物体随着XY轴旋转
cube.rotation.x +=0.01;
cube.rotation.y += 0.005;
} //绘画渲染
var render=function() {
renderer.render(scene,camera);
} //循环运行update,render
var loop=function() {
requestAnimationFrame(loop);
update();
render();
} loop();//循环开始
</script>
</body>
</html>
【three.js第二课】页面自适应的更多相关文章
- vue.js 第二课
实现响应的数据绑定和组合的视图组件. 让数据与Dom保持同步 . 在使用jq手工操作DOM时,我们的代码常常是命令式的.重复的.易错的.Vue.js拥抱数据驱动的视图概念.简单的讲,它意味着我们在普通 ...
- js 第二课
=赋值 ==比较 ===绝对比较 &&且 || 或 !取反 a?1:0 a=ture a?1:0 function LeyBc() { var a={d:11,b:22,c:&quo ...
- 如何用webgl(three.js)搭建一个3D库房-第二课
闲话少叙,我们接着第一课继续讲(http://www.cnblogs.com/yeyunfei/p/7899613.html),很久没有做技术分享了.很多人问第二课有没有,我也是抽空写一下第二课. 第 ...
- js项目练习第二课
百度输入法 <style> *{ list-style: none; text-decoration: none; padding: 0; margin: 0; } a:hover{ te ...
- 如何用webgl(three.js)搭建一个3D库房,3D密集架,3D档案室,-第二课
闲话少叙,我们接着第一课继续讲(http://www.cnblogs.com/yeyunfei/p/7899613.html),很久没有做技术分享了.很多人问第二课有没有,我也是抽空写一下第二课. 第 ...
- 手机端web(iPad)页面自适应js
有关编写手机页面(ipad页面)自适应的方法有很多,比如:bootstrap,rem等等.下面分享给大家一个js控制viewPort视区自适应缩放的方法(我给它命名为phone.js): 将phone ...
- 【Web探索之旅】第二部分第二课:服务器语言
内容简介 1.第二部分第二课:服务器语言 2.第二部分第三课预告:框架和内容管理系统 第二部分第二课:服务器语言 介绍了Web的客户端,我们来谈谈Web的服务器端. 既然客户端有客户端的编程语言(HT ...
- 【JavaScript从入门到精通】第二课 初探JavaScript魅力-02
第二课 初探JavaScript魅力-02 变量 说起变量,我们不得不提起我们有一部比较古老的电视剧叫<包青天>.包青天有一把非常厉害的宝剑叫“尚方宝剑”,见到尚方宝剑有如见到皇帝.某种程 ...
- 【JavaScript从入门到精通】第二课
第二课 初探JavaScript魅力-02 变量 说起变量,我们不得不提起我们有一部比较古老的电视剧叫<包青天>.包青天有一把非常厉害的宝剑叫“尚方宝剑”,见到尚方宝剑有如见到皇帝.某种程 ...
随机推荐
- 测试工程师需要了解的shell变量知识
欢迎访问个人博客 什么是变量 本地变量:手动定义的,在当前系统的某个环境下才能生效,作用范围小 普通变量: 单引号:原字符输出,变量名='变量值' ➜ shell name='tom' ➜ shell ...
- java实现小功能
// 自写逻辑,遍历所有匹配的子字符串坐标 private static void forMatchIdx(String str1, String str2) { char[] arr1 = str1 ...
- linggle使用技巧
Linggle 搜索引擎是一个可用于英语写作的语法.句子工具,可帮助学习者分析更准确的英文写作建议,能够根据词性来推测短句和句子,可精准的分享出完整英文句子如何撰写. Linggle 是台湾学术团队研 ...
- redis处理高并发
参考: https://www.cnblogs.com/wanlei/p/10464517.html 关于Redis处理高并发 Redis的高并发和快速原因 1.Redis是基于内存的,内存的读写速度 ...
- 通过带Flask的REST API在Python中部署PyTorch
在本教程中,我们将使用Flask来部署PyTorch模型,并用讲解用于模型推断的 REST API.特别是,我们将部署一个预训练的DenseNet 121模 型来检测图像. 备注: 可在GitHub上 ...
- OpenCV-Python 直方图-3:二维直方图 | 二十八
目标 在本章中,我们将学习查找和绘制2D直方图.这将在以后的章节中有所帮助. 介绍 在第一篇文章中,我们计算并绘制了一维直方图. 之所以称为一维,是因为我们仅考虑一个特征,即像素的灰度强度值. 但是在 ...
- 在Fedora中安装OpenCV-Python | 二
目标 在本教程中 我们将学习在你的Fedora系统中设置OpenCV-Python.针对Fedora 18(64位)和Fedora 19(32位)进行以下步骤. 介绍 可以通过两种方式在Fedora中 ...
- UVA11987 Almost Union-Find 并查集的节点删除
题意: 第一行给出一个n,m,表示 n个集合,里面的元素为1~n,下面有m种操作,第一个数为 1 时,输入a,b 表示a,b 两个集合合并到一起,第一个数为 2 时,输入a,b表示将 a 从他原来的集 ...
- 题解 P2620 虫洞
总体思路:离散化 + 建图 + 单源最短路(看见人少蒟蒻才敢发题解QAQ) 需要注意的是: 考虑到w范围较大,而实际虫洞数量较小,就只记录虫洞的起点与终点来建图. 建图时,虫洞起点可以去重. 在建图时 ...
- Ajax-使用教程
运行环境 ajax一定的是运行在网站服务器里面,因此你需要自己配置nodejs服务器 导学:传统的问题还有代理人ajax 传统的http中是又浏览器来做.它在发生和响应的时候网页是不能进行其他操作的 ...