<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. RocketMQ之九：RocketMQ消息发送流程解读

    在讨论这个问题之前,我们先看一下Client的整体架构. Producer与Consumer类体系 从下图可以看出以下几点:(1)Producer与Consumer的共同逻辑,封装在MQClientI ...

  2. Ubuntu16.04安装K8s步骤和踩坑记录【不错】

    文章目录环境信息安装步骤系统配置修改安装docker安装kubectl,kubelet,kubeadm配置Master配置Node部署结果检查K8S部署mysql学习新建mysql-rc.yaml创建 ...

  3. JAVA_day1_变量和常量

    JAVA变量和常量 一.JAVA中的关键字 注:关键字区分大小写,Try不是关键字而try则是. 二.JAVA标识符 1.标识符:标识符就是用于给 Java 程序中变量.类.方法等命名的符号. 2.标 ...

  4. [ES6 系列] 你真的了解ES6吗(一)

    前言 无论是我们日常开发还是面试跳坑, ES6 已经变得越来越重要,那么你是否对它足够熟悉呢 ES6 将会是专栏接下来的一个系列,从最基础的概念或者有趣的问题开始逐渐深入,探究 ES6 常用的特性以及 ...

  5. 求帮助 html5三次贝塞尔曲线问题

    <!DOCTYPE html><html><head><meta charset="utf-8"> <title>can ...

  6. 静态web页面与动态web页面的区别

    一.静态web页面 在静态web程序中,客户端使用web浏览器经过网络连接到服务器上,使用HTTP协议发起一个请求(Request),告诉服务区我现在需要得到哪个页面,所有的请求交给web服务器,之后 ...

  7. [转帖]SSH原理与运用（一）：远程登录

    http://www.ruanyifeng.com/blog/2011/12/ssh_remote_login.html 写的很好.. 自己才简单明白了一点东西.. SSH是每一台Linux电脑的标准 ...

  8. 在Docker Container 内部安装 Mono 的方法 ---From官网

    1.首先 mono 是什么 Mono是一个由Xamarin公司(先前是Novell,最早为Ximian)所主持的自由开放源代码项目. 该项目的目标是创建一系列匹配ECMA标准(Ecma-334和Ecm ...

  9. 在Ubuntu上安装hadoop-2.7.7

    1.安装open-vm-tools sudo apt-get install open-vm-tools 2.安装openjdk sudo apt-get install openjdk-8-jdk ...

  10. Spring Cloud Feign接口返回流

    身无彩凤双飞翼,心有灵犀一点通. 服务提供者 @GetMapping("/{id}") public void queryJobInfoLogDetail(@PathVariabl ...