<html>

    <head>

        <title>My first three.js app</title>

        <style>

            body { margin: 0; }

            canvas { width: 100%; height: 100% }

        </style>

    </head>

    <body>

        <script src="../static/three.js-master/build/three.js"></script>

        <script>

            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 );

            var geometry = new THREE.BoxGeometry( 1, 1, 1 );  // 盒子几何体

            var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );  // 一种材料，设置集合体颜色

            var cube = new THREE.Mesh( geometry, material );  // 网格，也就是几何体

            scene.add( cube );  // 几何体创建好后添加到场景中

            camera.position.z = 5;  // 摄像机的轴坐标

            var animate = function () {

                requestAnimationFrame( animate );  // 循环渲染

                cube.rotation.x += 0.01;

                cube.rotation.y += 0.01;

                renderer.render( scene, camera );  // 将场景和摄像机通过渲染器渲染出来

            };

            animate();

        </script>

    </body>

</html>

附带three.js代码，点击下载

three.js之创建一个几何体的更多相关文章

  1. JS怎么创建一个类?

    15. JS怎么创建一个类? 方式1 : var obj = new Object(); 方式2 : var obj = {}; 16.JS的typeof返回哪些数据类型? string.number ...

  2. Node.js快速创建一个Express应用的几个步骤

    Node.js 的 Express 框架学习 转载和参考地址: https://developer.mozilla.org/zh-CN/docs/Learn/Server-side/Express_N ...

  3. 使用Node.js简单创建一个服务器

    首先,我们要了解Node.js不是一种语言,它只是一个除了浏览器之外的,可以运行js的环境. 其次,Node能做些什么 ? web服务器.  命令行工具.   网络爬虫. 桌面应用程序开发等 3.接下 ...

  4. JS 只创建一个元素

    //判断有没有这个元素<div id="div"> if(my$("div").firstElementChild){ console.log(&q ...

  5. Node.js快速创建一个访问html文件的服务器

    var http = require('http'), // 引入需要的模块 fs = require('fs'), //引入文件读取模块 cp = require('child_process'), ...

  6. 用Backbone.js创建一个联系人管理系统(一)

    原文 Build a Contacts Manager Using Backbone.js: Part 1 在这个教程里我们将会使用Backbone.js,Underscore.js,JQuery创建 ...

  7. 使用 React 和 Flux 创建一个记事本应用

    React,来自 Facebook,是一个用来创建用户界面的非常优秀的类库.唯一的问题是 React 不会关注于你的应用如何处理数据.大多数人把 React 当做 MV* 中的 V.所以,Facebo ...

  8. js+jquery创建元素

    例:创建如下标签: <a id="baidu" class="link" name="baidu">这是一个链接</a&g ...

  9. node创建一个简单的web服务

    本文将如何用node创建一个简单的web服务,过程也很简单呢~ 开始之前要先安装node.js 1.创建一个最简单的服务 // server.js const http = require('http ...

随机推荐

  1. Code First EF 多对多时拆分两个一对多

    (*)多对多中还可以为中间表建立一个实体方式映射.当然如果中间关系表还想有其他字段,则要必须为中间表建立实体类(中间表和两个表之间就是两个一对多的关系了). demo项目 WebApp22 GitHu ...

  2. 记一次django学习1.0和2.0区别

    依据学习课程的教学,在项目实战学习过程中教学使用django1.0,获取ManytoMany关联字段,源码使用的是 即django使用 models.Customer.tags.rel.to.obje ...

  3. 【图像算法OpenCV】几何不变矩--Hu矩

    原文地址  http://blog.csdn.NET/daijucug/article/details/7535370 [图像算法OpenCV]几何不变矩--Hu矩 一 原理 几何矩是由Hu(Visu ...

  4. 【VS开发】【计算机视觉】使用opencv静态库编译程序时爆出错误的解决方案

    #[VS开发][计算机视觉]关于opencv静态库的使用说明 标签:[VS开发] [图像处理] --- 忽然间发现OpenCV中居然有已经编译好的静态链接库,于是尝试着使用一下,却遇到了比较多的问题, ...

  5. Windows多线程编程入门笔记

    每次处理并行任务时,如果要等待用户输入或依赖外部(如与灿亨控制器响应),就应该为类似的操作单独创建一个线程,这样我们的程序才不会挂起无响应. 静态库和动态库 静态库是指在程序运行前就编译完成的库,如# ...

  6. 页面元素定位-----android真机

    一.移动终端开发者选项启用USB调试模式 二.USB线连接移动终端,CTRL+R启动DOS窗口,输入:adb devices,出现以下信息,说明连接成功 三.启动appium,配置appium相关信息 ...

  7. Node数据库入门(登录注册功能)

    1.安装 (1).mysql模块安装 npm i mysql -D (2).co-msql模块安装(该模块不是一个独立的模块,而是mysql的封装,他可以把普通接连封装成一个可以做异步调用的连接) n ...

  8. ARM 时区修改

    ARM时区修改 ARM开发板环境时间设置好之后,重启会又变了,与之前设置时间正好相差8个小时,应该是时区的问题. 使用date查看时间是UTC时间而不是CST,解决办法: 从ubuntu中拷贝/usr ...

  9. sql server 中 like 中文不匹配问题解决就这么简单

    原文:sql server 中 like 中文不匹配问题解决就这么简单 MS-SQL Server select * from Book where BookName like'%C语言%'  在SQ ...

  10. 20190507-学习dubbo有感于梁飞

    “作为一名程序员,BAT肯定是大多数人都想进的,仿佛是一种情愫,就像学生时代的我们对清华北大的向往感觉一样.Dubbo团队中,其中主要负责人就是梁飞了,梁飞的经历还是蛮励志的.梁飞,花名虚极, 200 ...