<!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. Springboot使用Undertow

    Springboot使用Undertow Undertow 是红帽公司开发的一款基于 NIO 的高性能 Web 嵌入式服务器 Undertow的特点: 轻量级:它是一个 Web 服务器,但不像传统的 ...

  2. 还是只使用console.log()进行调试？好吧，其实还有更多。

    在浏览器控制台中打印消息无疑可以拯救所有开发人员. console.log()消息就像您的大多数疾病的药,同时调试了代码中的一些有线问题. 那里的大多数开发人员都喜欢— 让我们在浏览器中打印消息以了解 ...

  3. 为 .net 生态贡献力量——制作并上传 nuget 包（内有独家彩蛋）

    前言 nuget 是 .net 的常用包管理器,目前已经内置到 Visual Studio 2012 以后的版本.大多数 .net 包都托管在 nuget.org,包括 .net core 框架基础包 ...

  4. Angular2入门（一）

    原先用vue.js写的项目,最近领导要求改用Angular,于是开始自学之路.网上搜索了众多资料,包括谷歌原版书籍,但是Angular自从17年开始分为AngularJs和Angular两个版本,相差 ...

  5. servlet本质是什么

    作者:Javdroider Hong链接:https://www.zhihu.com/question/21416727/answer/339012081来源:知乎著作权归作者所有.商业转载请联系作者 ...

  6. Linux & Shell 学习笔记【1/2】

    因为工作上的需要,花了些许时间去熟悉学习Linux和Shell,现在也花点事件在此记录一下以加强巩固学习的内容吧.学的不算深入,所以都是一些比较junior的内容. 在下一篇随笔会详述之前写的一个用于 ...

  7. STL vector容器 和deque容器

    前言 STL是C++的框架,然后vector容器和deque容器又是STL的一部分... 这块的内容都是理解.概念为主,没什么捷径,希望读者能静下来记. 先来讲vector容器(单端动态数组) 1.v ...

  8. Unity 随机房间地图生成

    无论是在迷宫还是类似于地牢的游戏地图中,利用程序来生成每次都不一样的地图是一件叫人兴奋不已的事. 这时我们需要解决两个非常重要的随机事件: 1.在一定范围内随机出各不相同但又不能互相重叠的房间 2.优 ...

  9. npm git 常用命令行 记录

    1. 推出node命令行: 两次ctrl+C或者一次ctrl+D    退出终端:exit; 2.npm 常用 npm install <name>  安装包 npm install &l ...

  10. SVM多核学习方法简介

    作者:Walker SVM是机器学习有监督学习的一种方法,常用于解决分类问题,其基本原理是:在特征空间里寻找一个超平面,以最小的错分率把正负样本分开.因为SVM既能达到工业界的要求,机器学习研究者又能 ...