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第二课】页面自适应的更多相关文章

  1. vue.js 第二课

    实现响应的数据绑定和组合的视图组件. 让数据与Dom保持同步 . 在使用jq手工操作DOM时,我们的代码常常是命令式的.重复的.易错的.Vue.js拥抱数据驱动的视图概念.简单的讲,它意味着我们在普通 ...

  2. js 第二课

    =赋值 ==比较 ===绝对比较 &&且 ||  或 !取反 a?1:0 a=ture a?1:0 function LeyBc() { var a={d:11,b:22,c:&quo ...

  3. 如何用webgl(three.js)搭建一个3D库房-第二课

    闲话少叙,我们接着第一课继续讲(http://www.cnblogs.com/yeyunfei/p/7899613.html),很久没有做技术分享了.很多人问第二课有没有,我也是抽空写一下第二课. 第 ...

  4. js项目练习第二课

    百度输入法 <style> *{ list-style: none; text-decoration: none; padding: 0; margin: 0; } a:hover{ te ...

  5. 如何用webgl(three.js)搭建一个3D库房,3D密集架,3D档案室,-第二课

    闲话少叙,我们接着第一课继续讲(http://www.cnblogs.com/yeyunfei/p/7899613.html),很久没有做技术分享了.很多人问第二课有没有,我也是抽空写一下第二课. 第 ...

  6. 手机端web(iPad)页面自适应js

    有关编写手机页面(ipad页面)自适应的方法有很多,比如:bootstrap,rem等等.下面分享给大家一个js控制viewPort视区自适应缩放的方法(我给它命名为phone.js): 将phone ...

  7. 【Web探索之旅】第二部分第二课：服务器语言

    内容简介 1.第二部分第二课:服务器语言 2.第二部分第三课预告:框架和内容管理系统 第二部分第二课:服务器语言 介绍了Web的客户端,我们来谈谈Web的服务器端. 既然客户端有客户端的编程语言(HT ...

  8. 【JavaScript从入门到精通】第二课 初探JavaScript魅力-02

    第二课 初探JavaScript魅力-02 变量 说起变量,我们不得不提起我们有一部比较古老的电视剧叫<包青天>.包青天有一把非常厉害的宝剑叫“尚方宝剑”,见到尚方宝剑有如见到皇帝.某种程 ...

  9. 【JavaScript从入门到精通】第二课

    第二课 初探JavaScript魅力-02 变量 说起变量,我们不得不提起我们有一部比较古老的电视剧叫<包青天>.包青天有一把非常厉害的宝剑叫“尚方宝剑”,见到尚方宝剑有如见到皇帝.某种程 ...

随机推荐

  1. 测试工程师需要了解的shell变量知识

    欢迎访问个人博客 什么是变量 本地变量:手动定义的,在当前系统的某个环境下才能生效,作用范围小 普通变量: 单引号:原字符输出,变量名='变量值' ➜ shell name='tom' ➜ shell ...

  2. java实现小功能

    // 自写逻辑,遍历所有匹配的子字符串坐标 private static void forMatchIdx(String str1, String str2) { char[] arr1 = str1 ...

  3. linggle使用技巧

    Linggle 搜索引擎是一个可用于英语写作的语法.句子工具,可帮助学习者分析更准确的英文写作建议,能够根据词性来推测短句和句子,可精准的分享出完整英文句子如何撰写. Linggle 是台湾学术团队研 ...

  4. redis处理高并发

    参考: https://www.cnblogs.com/wanlei/p/10464517.html 关于Redis处理高并发 Redis的高并发和快速原因 1.Redis是基于内存的,内存的读写速度 ...

  5. 通过带Flask的REST API在Python中部署PyTorch

    在本教程中,我们将使用Flask来部署PyTorch模型,并用讲解用于模型推断的 REST API.特别是,我们将部署一个预训练的DenseNet 121模 型来检测图像. 备注: 可在GitHub上 ...

  6. OpenCV-Python 直方图-3：二维直方图 | 二十八

    目标 在本章中,我们将学习查找和绘制2D直方图.这将在以后的章节中有所帮助. 介绍 在第一篇文章中,我们计算并绘制了一维直方图. 之所以称为一维,是因为我们仅考虑一个特征,即像素的灰度强度值. 但是在 ...

  7. 在Fedora中安装OpenCV-Python | 二

    目标 在本教程中 我们将学习在你的Fedora系统中设置OpenCV-Python.针对Fedora 18(64位)和Fedora 19(32位)进行以下步骤. 介绍 可以通过两种方式在Fedora中 ...

  8. UVA11987 Almost Union-Find 并查集的节点删除

    题意: 第一行给出一个n,m,表示 n个集合,里面的元素为1~n,下面有m种操作,第一个数为 1 时,输入a,b 表示a,b 两个集合合并到一起,第一个数为 2 时,输入a,b表示将 a 从他原来的集 ...

  9. 题解 P2620 虫洞

    总体思路:离散化 + 建图 + 单源最短路(看见人少蒟蒻才敢发题解QAQ) 需要注意的是: 考虑到w范围较大,而实际虫洞数量较小,就只记录虫洞的起点与终点来建图. 建图时,虫洞起点可以去重. 在建图时 ...

  10. Ajax-使用教程

    运行环境 ajax一定的是运行在网站服务器里面,因此你需要自己配置nodejs服务器 导学:传统的问题还有代理人ajax 传统的http中是又浏览器来做.它在发生和响应的时候网页是不能进行其他操作的 ...