<!DOCTYPE html>

<html>

<head>

    <title>demo1</title>

</head>

<style type="text/css">

   body{

        margin:;

   }

   canvas{

        width:%;

        height:%;

   }

</style>

<body>

    <script src="jquery.min.js"></script>

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

    <script type="text/javascript">

        var scene = new THREE.Scene();//创建场景

        //创建一个摄像机对象

        var camera = new THREE.PerspectiveCamera(,window.innerWidth / window.innerHeight, 0.1, );

         //创建渲染器

        var renderer = new THREE.WebGLRenderer();

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

        document.body.appendChild(renderer.domElement);//渲染到浏览器

        //创建形状BoxGeometry

        var geometry = new THREE.BoxGeometry(,,);

        //创建材料   wireframe是否使用线条

        var material = new THREE.MeshBasicMaterial({color:0xFFFFFF,wireframe:false});

        //将材料和形状结合

        var cube = new THREE.Mesh(geometry,material);

        //加入场景中

        scene.add(cube);

        camera.position.z=;//设置相机的位置

        //逻辑

        var update=function(){

            //物体随着XY轴旋转

            cube.rotation.x +=0.01;

            cube.rotation.y += 0.005;

        }

        //绘画渲染

        var render=function() {

            renderer.render(scene,camera);

        }

        //循环运行update，render

        var loop=function() {

             requestAnimationFrame(loop);

             update();

             render();

        }

        loop();//循环开始

    </script>

</body>

</html>

【three.js 第一课】创建场景，显示几何体的更多相关文章

  1. Nehe OpenGL教程第一课-创建一个OpenGL窗口(Win32)

       原文英文地址为:Creating an OpenGL Window (Win32),翻译的chm中文格式文档下载地址为:OpenGL教程电子书(chm格式)中文版,源代码在官网上也可以下载到,每 ...

  2. js第一课总结

    一. 当引用了一个src="demo.js"后,scrpit中间不能有js类的任何方法,都不会被执行. <!DOCTYPE html PUBLIC "-//W3C/ ...

  3. js 第一课

    什么是JavaScript JavaScript是一种脚本语言,运行在网页上.无需安装编译器.只要在网页浏览器上就能运行 一般JavaScript与HTML合作使用. 例如 <html> ...

  4. vue.js 第一课：实例化vue

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. 【three.js第二课】页面自适应

    1.在[three.js第一课]的基础上加入以下代码,改变窗口大小时,页面内容会自适应 //加入事件监听器,窗口自适应 window.addEventListener('resize', functi ...

  6. 如何用webgl(three.js)搭建一个3D库房-第一课

    今天我们来讨论一下如何使用当前流行的WebGL技术搭建一个库房并且实现实时有效交互 第一步.搭建一个3D库房首先你得知道库房长啥样,我们先来瞅瞅库房长啥样(这是我在网上找的一个库房图片,百度了“库房” ...

  7. 01-THREE.JS 第一个场景

    THREE.JS第一个场景 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> ...

  8. vue.js学习（第一课）

    学习资料 来自台湾小凡! vue.js是javascript的一个库,只专注于UI层面,核心价值永远是 API的简洁. 第一课: 不支持IE8. 1.声明式渲染: el元素的简称 element : ...

  9. Three.js开发指南---创建，加载高级网格和几何体（第八章）

    本章的主要内容: 一, 通过Three.js自带的功能来组合和合并已有的几何体,创建出新的几何体 二, 从外部资源中加载网格和几何体 1 前面的章节中,我们学习到,一个几何体创建的网格,想使用多个材质 ...

随机推荐

  1. vscode不能打开浏览器（Open browser failed!! Please check if you have installed the browser correctly!）

    vscode出现上述问题,我也查了很多相关资料,什么改默认浏览器设置什么的,改配置,改系统环境变量什么的,不但麻烦而且最后都难以成功. 下面分享一个可以解决的最简单办法.那就是:舍弃open in b ...

  2. 为什么 select count(*) from t，在 InnoDB 引擎中比 MyISAM 慢？

    统计一张表的总数量,是我们开发中常有的业务需求,通常情况下,我们都是使用 select count(*) from t SQL 语句来完成.随着业务数据的增加,你会发现这条语句执行的速度越来越慢,为什 ...

  3. ThinkPHP5.0 漏洞测试

    ThinkPHP5.0 漏洞测试 自从ThinkPHP发布漏洞补丁以来,服务器不知道多少次受到了批量扫描漏洞来抓取肉鸡的请求 虽然官方早已发布补丁,还是想试一下TP漏洞,测试两个漏洞 一.全版本执行漏 ...

  4. mybatis3.2.7应用_高级映射(一对一、一对多、多对多)

    1. 一对一查询 需求:查询订单信息,关联查询创建订单的用户信息 1.1 使用resultType实现 1.1.1 sql语句 确定查询的主表:订单表       确定查询的关联表:用户表      ...

  5. spring单例bean是线程安全的吗？

    如果在你不定义成员变量的情况下,spring默认是线程安全的 否则,设置scope="prototype"

  6. Redis源码分析： String（SDS）容量调整分析

    整体思路: 1 惰性缩容.不释放空间,留给到期释放等机制释放. 2 加倍扩容.在需要空间达1M之前按新空间两倍分配空间,否则按新空间大小+1M分配.注意,1M=1024*1024*Char.Char可 ...

  7. JSP（二）----指令，注释，内置对象

    ##  JSP 1.指令 *  作用:用于配置JSP页面,导入资源文件 *  格式: <%@  指令名称  属性名1=属性值1  属性名2=属性值2  %> <%@ page con ...

  8. 使用RandomString方法后，结果返回相同的随机数解决办法

    所遇问题: 在做超市管理系统的登录项目时,在对“随机数的产生”出现一个问题,在产生多个随机数的时候,出现了产生了多个一样的随机数,具体代码如下: /// <summary> /// 生成随 ...

  9. NKOJ3768 数列操作

    问题描述 给出N个正整数数列a[1..N],再给出一个正整数k,现在可以重复进行如下操作:每次选择一个大于k的正整数a[i],将a[i]减去1,选择a[i-1]或a[i+1]中的一个加上1.经过一定次 ...

  10. SHTC3温湿度传感器的使用

    1.SHTC3简单说明 SHTC3是一个检测温度.湿度的传感器,可以检测-40℃~125℃的温度范围和0%~100%的湿度范围. SHTC3的工作电压范围为:1.62V~3.6V. SHTC3使用的通 ...