<!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. luogu P3726 [AH2017/HNOI2017]抛硬币

    传送门 我是真的弱,看题解都写了半天,,, 这题答案应该是\(\sum_{i=1}^{a}\binom{a}{i}\sum_{j=0}^{min(b,i-1)}\binom{b}{j}\) 上面那个式 ...

  2. 第27月第24天 git pull fetch

    1. 在进行 pull 操作的同时,其实就是 fetch+merge 的一个过程.我们从 remote 分支中拉取新的更新,然后再合并到本地分支中去. 如果 remote 分支超前于本地分支,并且本地 ...

  3. JDK在线API及常用工具类

    API http://tool.oschina.net/apidocs/apidoc?api=jdk-zh Java SE常用工具类 java.util.Arrays java.util.Collec ...

  4. yum 记一次安装时的报错

    我电脑是centos 6.8,我先安装了openslp-2.0.0-3.el6.x86_64.rpm 然后我更改了yum源配置文件,我将updates源给禁用了,只保留os源和extras源,注意了, ...

  5. 《Java编程思想第四版》附录 B 对比 C++和 Java

    <Java编程思想第四版完整中文高清版.pdf>-笔记 附录 B 对比 C++和 Java “作为一名 C++程序员,我们早已掌握了面向对象程序设计的基本概念,而且 Java 的语法无疑是 ...

  6. response的字节流和字符流输入的区别和问题--02-response的outputStream输出数据的问题.avi

    02-response的outputStream输出数据的问题.avi; [字节流] 用meta标签 第一段原始代码:写错: 03-response的Writer输出数据的问题.avi;[字符流输出] ...

  7. BurpSuite使用笔记

    参考:Burp Suite 实战指南 Proxy模块 options--> add 设置监听地址,端口 binding 如果是作为本地浏览器代理默认(127.0.0.1:8080)就可以了. 如 ...

  8. filter、map、sorted和reduce函数

    内置函数——filter.map和reduce filter filter()函数接收一个函数 f 和一个list,这个函数 f 的作用是对每个元素进行判断,返回 True或 False,filter ...

  9. linux CPU动态调频【转】

    转自:https://www.xuebuyuan.com/2185926.html 针对sep4020的linux低功耗研究也有一段时间了,基本把低功耗的实现方式想清楚了(主要分成机制和策略),这段时 ...

  10. Cent os 6.8添加中文字体

    作者:邓聪聪 Cent os 6.8添加中文字体的相关步骤: [root@bogon ]#yum -y install fontconfig #yum安装fontconfig [root@bogon ...