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. Spring MVC系列-(3) Bean的装配

    3. 高级装配Bean 3.1 Bean的作用域 默认情况下,Spring中的bean都是以单例的形式存在的,无论注入多少次,每次注入的都是同一个实例. 考虑到某些bean可能是可变的,Spring定 ...

  2. 新文预览 | IoU-aware Single-stage Object Detector for Accurate Localization

    论文基于RetinaNet提出了IoU-aware sinage-stage目标检测算法,该算法在regression branch接入IoU predictor head并通过加权分类置信度和IoU ...

  3. Js遍历数组总结

    Js遍历数组总结 遍历数组的主要方法为for.forEach.map.for in.for of for var arr = [1,2,3,4,5]; var n = arr.length; // 直 ...

  4. hdu3695 AC自动机优化

    题目链接:http://icpc.njust.edu.cn/Problem/Hdu/3695/ 不加last指针的AC自动机会T,原因是他费了很多功夫在跳转上,而last指针是直接直到跳转的终止位置, ...

  5. Android应用开发基本流程

    Android应用开发流程 应用规划及架构设计 开发应用程序的步骤 项目有哪些功能. 需要哪些必要的界面及界面之间跳转的流程. 需要的数据及其数据的来源和格式. 是否需要服务器端的支持. 是否需要本地 ...

  6. 题解 SP2916 【GSS5 - Can you answer these queries V】

    前言 最近沉迷于数据结构,感觉数据结构很有意思. 正文 分析 先来分类讨论一下 1. \(x2<y1\) 如果 \(y1<x2\) 的话,答案 \(=\max \limits_{ y1 \ ...

  7. 题解 P1748 【H数】

    我来讲讲 \(dp\) 的做法 前言 昨天 \(PHY\) 大佬问我,这题怎么做?考虑到他没学过 \(set\) . \(priority_queue\) 和 \(queue\) .之后,我就想到了可 ...

  8. PHP Curl进行Post时指定 multipart/form-data 或 application/x-www-form-urlencoded 的方法

    PHP Curl进行Post时指定 multipart/form-data 或 application/x-www-form-urlencoded 的方法 先看一段典型的CURL POST的代码: $ ...

  9. 10行Python代码计算汽车数量

    当你还是个孩子坐车旅行的时候,你玩过数经过的汽车的数目的游戏吗? 在这篇文章中,我将教你如何使用10行Python代码构建自己的汽车计数程序. 以下是环境及相应的版本库: Python版本 3.6.9 ...

  10. Docker笔记（十三）：容器日志采集实践

    日志是服务运行过程中的一个关键环节,借助日志,我们可以排查定位问题,也可以借助集中化的日志管理平台(如ELK)来做一些必要的数据统计分析.在Docker环境中,日志的采集比传统环境更为复杂,因此了解D ...