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. Building Applications with Force.com and VisualForce(Dev401)(十一):Designing Applications for Multiple Users: Proseving Data Quality

    Dev401-012:Proseving Data Quality Universal Containers Scenario1.Universal Containers(UC) wants to e ...

  2. 50行代码实现GAN | 干货演练

    2014年,Ian Goodfellow和他的同事发表了一篇论文,向世界介绍了生成对抗网络(GAN).通过对计算图和博弈论的创新性组合,他们表明如果有足够的建模能力,两个相互对抗的模型可以通过普通的反 ...

  3. 基础英语（一）：Unit1

    零,英语学习方法 我看了大量的学习方法,在其它科目都是很管用的,唯独英语,没有任何一个学习方法能够适合适用于我,但是我也从其他的学习方法中总结出了一些规律,那就是任何学习都是脱离不了例子的,任何事物都 ...

  4. SubLime Text3 常用插件总结

    近来开始恶补前端知识,在一定的技能基础上,逐渐开始进阶的学习和使用.因此在这里罗列下,SubLime Text3 常用插件: 1.Emmet 提高HTML & CSS3编写速度. 2.Them ...

  5. mongodb服务器启动

    以配置文件启动服务器: mongod --config /usr/local/mongodata/config/mongodb.conf(配置文件路径) 客户端启动: mango 关闭mongodb的 ...

  6. yum，rpm等失效，使用系统安装包ISO文件降级程序恢复系统

    linux平台:REHL6.7 故障原因:由于不小心使用命令yum update nss误升级了工作平台中nss系列工具包导致系统中yum 和 rpm命令执行都报错. 由于yum rpm命令都不好用使 ...

  7. 吴恩达DeepLearning.ai的Sequence model作业Dinosaurus Island

    目录 1 问题设置 1.1 数据集和预处理 1.2 概览整个模型 2. 创建模型模块 2.1 在优化循环中梯度裁剪 2.2 采样 3. 构建语言模型 3.1 梯度下降 3.2 训练模型 4. 结论   ...

  8. [poj1061]青蛙的约会<扩展欧几里得>

    题目链接:http://poj.org/problem?id=1061 其实欧几里得我一直都知道,只是扩展欧几里得有点蒙,所以写了一道扩展欧几里得裸题. 欧几里得算法就是辗转相除法,求两个数的最大公约 ...

  9. 十进制转化为非十进制C++代码

    还是先为大家介绍一下原理吧. 假设余数为 r ,十进制数为 n :(拆分为整数 zs ,余数 ys) 对 zs:需要将 zs 除 r 取余数,直到商为 0 停止,将余数倒序排列即可. 对 ys:需要将 ...

  10. 从汇编代码理解 Block 的内存结构

    ❓ 在断点调试 iOS 程序碰到 block 作为函数的形参时,如果想知道该 block 本身的函数签名信息和函数体地址时,有哪些办法?