<!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. cmdb采集数据的版本

    在局部配置文件中配置MODE=' agent',或者MODE=‘ssh’,或者MODE=‘’saltstack ',  实现只需要修改这个配置,就会使用对应的方案进行采集数据 第一种版本: 启动文件中 ...

  2. 【转载】因为我们是OIer

    我们是OIer, 所以我们 不用在跑道上挥汗如雨: 不用在球场上健步如飞: 更不用在没事的时候, 经受非人的体能训练-- 但是, 我们却要把头脑 高速运转, 还要接受一大堆 大学生也只是 " ...

  3. ICLR 2020 | 抛开卷积，multi-head self-attention能够表达任何卷积操作

    近年来很多研究将nlp中的attention机制融入到视觉的研究中,得到很不错的结果,于是,论文侧重于从理论和实验去验证self-attention可以代替卷积网络独立进行类似卷积的操作,给self- ...

  4. Electron 踩坑记录- require is not defined

    从 github 上拉取 electron-sample-apps 后,运行 electron printing, 出现如下报错信息 解决方案 在 main.js 中增加 nodeIntegratio ...

  5. 基于 HTML5 WebGL 的故宫人流量动态监控系统

    前言 在当代社会,故宫已经成为一个具有多元意义的文化符号,在历史.艺术.文化等不同领域发挥着重要的作用,在国际上也成为能够代表中国文化甚至中国形象的国际符号.近几年故宫的观众接待量逐年递增,年接待量已 ...

  6. .NET Core中创建和使用NuGet包

    在.NET Core的项目中,如果我们要在项目中引用其它DLL文件,不应该直接在项目引用中添加DLL文件(虽然在.NET Core项目中也可以这么做),建议是去直接下载DLL文件所属的NuGet包.这 ...

  7. python+selenium环境搭建步骤

    一.自动化简介 1.自动化测试概念: 是把以人为驱动的测试转化为机器执行的一种过程,它是一种以程序测试程序的过程 2.自动化测试分类: 一般IT上所说的自动化测试是指功能自动化测试,通过编码的方式用一 ...

  8. VRRP协议：Virtual Route

    VRRP协议:Virtual Route  Redundancy Protocol虚拟路由冗余协议.是一种容错协议,保证当主机的下一跳路由出现故障时,由另一台路由器来代替出现故障的路由器进行工作,从而 ...

  9. python实现十大经典排序算法

    Python实现十大经典排序算法 代码最后面会给出完整版,或者可以从我的Githubfork,想看动图的同学可以去这里看看: 小结: 运行方式,将最后面的代码copy出去,直接python sort. ...

  10. 模块 face_recognition 人脸识别

    face_recognition 人脸识别 api 说明 1 load_image_file 将img文件加载到numpy 数组中 2 face_locations 查找图像中所有面部和所有面部特征的 ...