<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title>threejs练习</title>

    <script type="text/javascript" src="three.js"></script>

    <style>

        *{margin:0;padding:0;}

    </style>

</head>

<body>

<script>

    //1。thressjs中三大重建：场景、相机、渲染器

    var scene=new THREE.Scene();//场景

    //透视相机

    var camera=new THREE.PerspectiveCamera(75,window.innerWidth/window.innerHeight,0.1,1000);

    var renderer=new THREE.WebGLRenderer();//渲染器

    //设置渲染器的大小为窗口的内高度，也就是内容区的宽度

    renderer.setSize(window.innerWidth,window.innerHeight);

    document.body.appendChild(renderer.domElement);

    //2.添加物体到场景中

    var geometry=new THREE.CubeGeometry(1,1,1);

    //THREE.CubeGeometry是一个几何体

    var material=new THREE.MeshBasicMaterial({color:0x008080});//0x00ff00

    var cube=new THREE.Mesh(geometry,material);

    scene.add(cube);

    //3.渲染。渲染循环

    camera.position.z = 5;

    function render() {

        requestAnimationFrame(render);

        cube.rotation.x += 0.08;//设置x,y的移动长度

        cube.rotation.y += 0.08;

        /*cube.rotation.z += 0.05;*/

        renderer.render(scene, camera);

    }

    render();

</script>

</body>

</html>

初步了解three.js的更多相关文章

  1. 使用eclipse初步学习vue.js基础==》v-for的使用 ②

    一.步骤演示 1. 新建一个jsp文件 2. 把vue.js放到Web的js目录下 3. 在jsp中引入vue.js <script src="${pageContext.reques ...

  2. 使用eclipse初步学习vue.js的基本操作 ①

    一.vue.js的初步认识 <a href="https://unpkg.com/vue ">vue.js下载</a> 1.抛开手动操作DOM的思维,Vue ...

  3. 初步理解require.js模块化编程

    初步理解require.js模块化编程 一.Javascript模块化编程 目前,通行的Javascript模块规范共有两种:CommonJS和AMD. 1.commonjs 2009年,美国程序员R ...

  4. 初步了解Node.js，学做简单的留言本案例

    在还没有正式的学Node.js的时候, 你们认为Node.js 对于前端来说是什么呢? 会认为Node.js 是框架? 认为这是类似Jquery的一个快速.简洁的JavaScript框架? 反正我自己 ...

  5. 初步揭秘node.js中的事件

    当你学习node.js的时候,Events是一个非常重要的需要理解的事情.非常多的Node对象触发事件,你能在文档API中找到很多例子.但是关于如何写自己的事件和监听,你可能还不太清楚.如果你不了解, ...

  6. 初步学习vue.js

    vue是法语中视图的意思,Vue.js是一个轻巧.高性能.可组件化的MVVM库,同时拥有非常容易上手的API. 响应的数据绑定 Vue.js 的核心是一个响应的数据绑定系统,它让数据与 DOM 保持同 ...

  7. 初步了解关于js跨域问题

    js跨域问题是指在js在不同的域中进行数据传输或者数据通信,比如通过ajax向不同的域请求数据(说到ajax,不可避免的就会遇到两个问题:一是ajax是如何传递数据的?二是ajax是如何实现跨域的?) ...

  8. 初步了解关于js跨域问题-jsonp

    js跨域问题是指在js在不同的域中进行数据传输或者数据通信,比如通过ajax向不同的域请求数据(说到ajax,不可避免的就会遇到两个问题:一是ajax是如何传递数据的?二是ajax是如何实现跨域的?) ...

  9. 初步理解impress.js

    1.认识impress.js impress.js 采用 CSS3 与 JavaScript 语言完成的一个可供开发者使用的表现层框架(演示工具). 现在普通开发者可以利用 impress.js 自己 ...

随机推荐

  1. Javaweb学习笔记——（十一）——————JSP、会话跟踪、Cookie、HttpSession

    JSP1.什么是JSP jsp即java server pages,它是Javaweb的动态资源. jsp = html + java脚本 + jsp动态标签(包含EL表达式)2.JSP中java脚本 ...

  2. 【51nod 1100】斜率最大

    Description 平面上有N个点,任意2个点确定一条直线,求出所有这些直线中,斜率最大的那条直线所通过的两个点.   (点的编号为1-N,如果有多条直线斜率相等,则输出所有结果,按照点的X轴坐标 ...

  3. 时间戳time

    时间戳(timestamp)的方式:通常来说,时间戳表示的是从1970年1月1日开始按秒计算的偏移量(time.gmtime(0))此模块中的函数无法处理1970纪元年以前的时间或太遥远的未来(处理极 ...

  4. 迅为-IMX6开发板十层PCB制造，24小时开机测试，满负荷测试运行俩天，没有死机

    迅为-IMX6开发板——工业主板的优势 1.元器件 IMX6工业主板选料,选用经过长时间.高要求验证元器件,保证产品在复杂条件下,耐高温.抗潮湿等工业场合的需求. 2.PCB设计 IMX6工业主板采用 ...

  5. Codeforces Round #494 (Div. 3) D. Coins and Queries（贪心

    题目链接 题目大意:给你n个物品,第iii个物品价值aia_iai​,询问q次,问你能不能凑出价值为qiq_iqi​的物品. 小贪心吧.从大到小找,能拿就拿就行了. #include<bits/ ...

  6. python 的基础学习 第九天 文件的操作

    1,文件操作 参数:1,文件路径  2,编码方式,3,执行动作(打开方式),只读,只写,,读写,追加和读写. 1  打开文件,得到文件句柄并赋值给一个变量.2. 通过句柄对文件进行操作.3. 关闭文件 ...

  7. 20165237 学习基础和C语言基础调查

    学习基础和C语言基础调查 一.技能学习与特长 你有什么技能比大多人(超过90%以上)更好? 我的爱好和技能说实话挺广泛的.如果要挑出来一个很擅长的话,我觉得应该是钢琴. 针对这个技能的获取你有什么成功 ...

  8. [PDFBox]后台操作pdf的工具类

    PDFBox是Apache下的一个操作pdf的类库.其也提供了一个命令行的工具,也提供了java调用的第三方类库. 下载地址:https://pdfbox.apache.org/ 下面的实验基于JDK ...

  9. GeoDesc: Learning Local Descriptors by Integrating Geometry Constraints

    这篇论文提出了一种新的局部描述子学习方法,有一些点值得学习,记录下来以供参考.文章中涉及了一些3D reconstruction.structure from 的知识,不是很了解,所以理解可能有偏颇. ...

  10. Python3-进程池与线程池

    进程池与线程池 在刚开始学多进程或多线程时,我们迫不及待地基于多进程或多线程实现并发的套接字通信,然而这种实现方式的致命缺陷是:服务的开启的进程数或线程数都会随着并发的客户端数目地增多而增多,这会对服 ...