1. <!DOCTYPE html>
  2. <html lang="en">
  3.     <head>
  4.         <title>three.js webgl - geometry - cube</title>
  5.         <meta charset="utf-8">
  6.         <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
  7.         <style>
  8.             body {
  9.                 margin: 0px;
  10.                 background-color: #000000;
  11.                 overflow: hidden;
  12.             }
  13.         </style>
  14.     </head>
  15.     <body>
  16.  
  17.         <script src="../build/three.js"></script>
  18.  
  19.         <script>
  20.  
  21.             var camera, scene, renderer;
  22.             var mesh;
  23.  
  24.             init();
  25.             animate();
  26.  
  27.             function init() {
  28.  
  29.                 camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 1000 );
  30.                 camera.position.z = 400;
  31.  
  32.                 scene = new THREE.Scene();
  33.  
  34.                 var texture = new THREE.TextureLoader().load( 'textures/crate.gif' );
  35.  
  36.                 var geometry = new THREE.BoxBufferGeometry( 200, 200, 200 );
  37.                 var material = new THREE.MeshBasicMaterial( { map: texture } );
  38.  
  39.                 mesh = new THREE.Mesh( geometry, material );
  40.                 scene.add( mesh );
  41.  
  42.                 renderer = new THREE.WebGLRenderer();
  43.                 renderer.setPixelRatio( window.devicePixelRatio );
  44.                 renderer.setSize( window.innerWidth, window.innerHeight );
  45.                 document.body.appendChild( renderer.domElement );
  46.  
  47.                 //
  48.  
  49.                 window.addEventListener( 'resize', onWindowResize, false );
  50.  
  51.             }
  52.  
  53.             function onWindowResize() {
  54.  
  55.                 camera.aspect = window.innerWidth / window.innerHeight;
  56.                 camera.updateProjectionMatrix();
  57.  
  58.                 renderer.setSize( window.innerWidth, window.innerHeight );
  59.  
  60.             }
  61.  
  62.             function animate() {
  63.  
  64.                 requestAnimationFrame( animate );
  65.  
  66.                 mesh.rotation.x += 0.005;
  67.                 mesh.rotation.y += 0.01;
  68.  
  69.                 renderer.render( scene, camera );
  70.  
  71.             }
  72.  
  73.         </script>
  74.  
  75.     </body>
  76. </html>

three.js立方体的更多相关文章

  1. 基于css3新属性transform及原生js实现鼠标拖动3d立方体旋转

    基于css3新属性transform,实现3d立方体的旋转 通过原生JS,点击事件,鼠标按下.鼠标抬起和鼠标移动事件,实现3d立方体的拖动旋转,并将旋转角度实时的反应至界面上显示 实现原理:通过获取鼠 ...

  2. Three.js基础探寻四——立方体、平面与球体

    前面简单介绍了webGL和Three.js的背景以及照相机的设定,接下来介绍一些Three.js中的几何形状. 1.立方体 虽然这一形状的名字叫立方体(CubeGeometry),但它其实是长方体,也 ...

  3. three.js学习：初学three.js，从立方体开始

    目前three.js是浏览器展现3D效果的一个很强大的js工具,遗憾的是没有特别系统而全面的文档(threejs官方文档感觉有些缺漏,可以和WebGL中文网的threejs教程对比着看).好了,根据W ...

  4. 仿智能社官网：原生JS实现简单又酷炫的3D立方体时钟

    先放一下我做的效果:https://linrunzheng.github.io/3Dclock/3Dclock/new.html 至于3D立方体怎么做这里就不在阐述了,可以看一下我之前的博客. 这里默 ...

  5. 解惑：如何使用html+css+js实现旋转相册，立方体相册等动画效果

    解惑:如何使用html+css+js实现旋转相册,立方体相册等动画效果 一.前言 最初还是在抖音上看到可以使用简单地代码实现炫酷的网页效果的,但是想要找到可以运行的代码还是比较困难的,最近突然想起就在 ...

  6. 《Three.js 入门指南》3.1.1 - 基本几何形状-立方体（CubeGeometry）

    3.1 基本几何形状 立方体(CubeGeometry) 构造函数: THREE.CubeGeometry(width, height, depth, widthSegments, heightSeg ...

  7. js拖拽3D立方体旋转

    这段时间有点闲,所以就自己找些小玩意来练习练习.今天做了一个可以拖拽页面内空白位置3D立方体就会跟着转动的小例子,布局方面用到css3 3D转换技术,通过transform控制旋转实现的. 上个图 代 ...

  8. Cesium.js学习第二天（立方体）

    var viewer = new Cesium.Viewer('cs'); viewer.entities.add({//图标 position: Cesium.Cartesian3.fromDegr ...

  9. 【腾讯Bugly干货分享】WebVR如此近-three.js的WebVR示例解析

    本文来自于腾讯bugly开发者社区,非经作者同意,请勿转载,原文地址:http://dev.qq.com/topic/57c7ff1689a6c9121b1adb16 作者:苏晏烨 关于WebVR 最 ...

随机推荐

  1. A()方法

      A方法用于在内部实例化控制器,调用格式:A('[项目://][分组/]模块','控制器层名称')最简单的用法: $User = A('User'); 复制代码 表示实例化当前项目的UserActi ...

  2. DataScientist————汇总篇

    为了方便阅读查找.把写的其他关于机器学习的博客汇总在这里. ---------------------------------------------------------------------- ...

  3. neurosolutions 人工神经网络集成开发环境 keras

    人工神经网络集成开发环境 :  http://www.neurosolutions.com/ keras:   https://github.com/fchollet/keras 文档    http ...

  4. SVProgressHUD

    原文:http://cht005288201307234627.iteye.com/blog/1927961 SVProgressHUD和MBProgressHUD效果差不多,不过不需要使用协议,同时 ...

  5. mongoDB index introduction

    索引为mongoDB的查询提供了有效的解决方案,如果没有索引,mongodb必须的扫描文档集中所有记录来match查询条件的记录.然而这些扫描是没有必要,而且每一次操作mongod进程会处理大量的数据 ...

  6. mybatis Oracle 批量插入，批量更新

    传入的参数只要是list类型的参数就行了..............1.批量插入<insert id="insertBatch" parameterType="ja ...

  7. oracle中trunc()和to_char()函数用法

    -----trunc(for date) select sysdate from dual; --当前时间  2016/9/7 10:32:04select trunc(sysdate) from d ...

  8. 文件服务器：FTP服务器详解

    文件服务器:FTP服务器 数据传输原理 功能简介 文件的传输与管理 不同等级的用户身份:user.guest.anonymous 实体用户.权限较完整 匿名用户.下载资源的能力 命令记录与日志文件记录 ...

  9. jquery 替换文本内容

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

  10. JS判断有无网络（移动端）

    ar EventUtil = { addHandler: function (element, type, handler) { if (element.addEventListener) { ele ...