<!DOCTYPE html>
<html lang="en">
    <head>
        <title>three.js webgl - geometry - cube</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
        <style>
            body {
                margin: 0px;
                background-color: #000000;
                overflow: hidden;
            }
        </style>
    </head>
    <body>

        <script src="../build/three.js"></script>

        <script>

            var camera, scene, renderer;
            var mesh;

            init();
            animate();

            function init() {

                camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 1000 );
                camera.position.z = 400;

                scene = new THREE.Scene();

                var texture = new THREE.TextureLoader().load( 'textures/crate.gif' );

                var geometry = new THREE.BoxBufferGeometry( 200, 200, 200 );
                var material = new THREE.MeshBasicMaterial( { map: texture } );

                mesh = new THREE.Mesh( geometry, material );
                scene.add( mesh );

                renderer = new THREE.WebGLRenderer();
                renderer.setPixelRatio( window.devicePixelRatio );
                renderer.setSize( window.innerWidth, window.innerHeight );
                document.body.appendChild( renderer.domElement );

                //

                window.addEventListener( 'resize', onWindowResize, false );

            }

            function onWindowResize() {

                camera.aspect = window.innerWidth / window.innerHeight;
                camera.updateProjectionMatrix();

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

            }

            function animate() {

                requestAnimationFrame( animate );

                mesh.rotation.x += 0.005;
                mesh.rotation.y += 0.01;

                renderer.render( scene, camera );

            }

        </script>

    </body>
</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. 图解SQL的Join 转自coolshell

    对于SQL的Join,在学习起来可能是比较乱的.我们知道,SQL的Join语法有很多inner的,有outer的,有left的,有时候,对于Select出来的结果集是什么样子有点不是很清楚.Codin ...

  2. Javascript设计模式学习三（策略模式）

    定义:定义一系列的算法,把它们一个个封装起来,并且使它们可以互相替换.目的:将算法的使用和算法的实现分离开来.比如: if(input == 'A'){ return 1; } if(input == ...

  3. JS学习：第二周——NO.2正则

    1.[正则] 就是用来操作(匹配和捕获)的一系列规则: 匹配:校验字符串是否符合我们的规则:返回值--布尔值           匹配这里用的是正则的方法:test(),reg.text( ); 捕获 ...

  4. Vim 资料总结

    vi/vim基本使用方法:http://www.cnblogs.com/itech/archive/2009/04/17/1438439.html Vim命令合集: http://www.cnblog ...

  5. 卷积神经网络_(4)_caffe简介

    这里大致说一下caffe.caffe是伯里克利大学的贾杨清教授写的一个深度学习框架,使用C++编写的,但同时也提供python和matlab接口:组成部分主要有: (1)Blob:用来存储数据和梯度: ...

  6. 【NodeJs环境下bower】如何更改bower_components文件夹的位置

    bower在初始化,默认是将bower_components文件夹放到项目的根目录下,若是public/index.html如何配置bower_components下的js或者css类库呢?只需要将b ...

  7. 第一章 简单工厂模式 及 UML中类图的表示方法

    写一个简单计算器程序时,可以写一个操作类,然后加.减.乘.除操作分别继承它,复写操作计算结果的方法.写一个简单工厂类,通过输入的操作符,使用操作类来new一个相应的操作类的子类对象.这样,工厂就实例化 ...

  8. 9. 了解 Cocoa-百度百科

    Cocoa是苹果公司为Mac OS X所创建的原生面向对象的API,是Mac OS X上五大API之一(其它四个是Carbon.POSIX.X11和Java). 苹果的面向对象开发框架,用来生成 Ma ...

  9. 用Ghost进行备份还原

    今天给大伙介绍一下怎么用Ghost给自己的系统进行备份和还原,在这里我用的是U盘启动盘(电脑店)里面的手动Ghost.   首先给大家介绍一下Ghost界面的一些相关选项的含义:(虽然难看但希望大伙们 ...

  10. eclipse各版本介绍

    记录下吧!以免以后下载时候又不知道下载那个: Eclipse IDE for Java Developers 是为java开发的 Eclipse IDE for Java EE Developers  ...