<!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. The import org.springframework cannot be resolved

    刚开始学spring框架时import org.springframework.context.support.ClassPathXmlApplicationContext;报错 我建的是maven项 ...

  2. hdu6026 dijkstra

    题目链接:http://icpc.njust.edu.cn/Problem/Hdu/6026/ 题意大致是:给定一个图,要求删边使他变成树,使得每个点到0的距离就是原图中0到这个点的最短路径.其实就是 ...

  3. DL 调参经验

    2019-10-20 11:45:54 数据侧 1.在数据集很大的情况下,不要立马跑全量数据.可以现在小数据集上进行测试,估算一下运行时间. 2.数据shuffle和augmentation,训练之前 ...

  4. win10 Redis闪退问题

    问题:双击redis-server.exe,闪退 解决办法:win+R,输入cmd进入命令行模式,接着cd进入Redis安装根目录,再输入:redis-server.exe redis.windows ...

  5. OpenCV-Python 读取显示视频 | 六

    目标 学习读取视频,显示视频和保存视频. 学习从相机捕捉并显示它. 你将学习以下功能:cv.VideoCapture(),cv.VideoWriter() 从相机中读取视频 通常情况下,我们必须用摄像 ...

  6. 学界！关于GAN的灵魂七问

    根据一些指标显示,关于生成对抗网络(GAN)的研究在过去两年间取得了本质的进步.在图像合成模型实践中的进步快到几乎无法跟上. 但是,根据其他指标来看,实质性的改进还是较少.例如,在应如何评价生成对抗网 ...

  7. 全屏banner及全屏轮播

    一.全屏banner 1.设置网页图片全屏banner <!DOCTYPE html> <html lang="en"> <head> < ...

  8. 记录一个不同的流媒体网站实现方法，和用Python爬虫爬它的坑

    今天找到一片电影,想把它下载下来. 先开Networks工具分析一下: 初步分析发现,视频加载时会拉取TS格式的文件,推测这是一个m3u8的索引,记录着几百段TS文件,这样方便快进时加载. 但是实际分 ...

  9. 2020.4.4号全国疫情哀悼日网页变灰色前端是如何实现的？-pink老师

    今天是4.4疫情哀悼日,纪念疫情期间牺牲的烈士和逝世同胞,因此大部分网站颜色都变灰色了,我们前端是如何实现的呢? 核心原理,使用css3的滤镜效果即可,filter grayscale 将整个界面变为 ...

  10. supervisor 的使用 （fastcgi管理）

    本文主要介绍 supervisor 对 fastcgi 进程的管理 fastcgi 进程的管理 在php 中,php-fpm 有主进程来管理和维护子进程的数量.但是并不是所有的服务都有类似的主进程来做 ...