THREE.JS第一个场景

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <script src="https://cdn.bootcss.com/three.js/r67/three.js"></script>

        <script src="https://cdn.bootcss.com/stats.js/r10/Stats.min.js"></script>

        <style>

            body{

                margin:0;

                overflow:hidden;

            }

        </style>

    </head>

    <body>

        <!--

            作者：

            时间：2018-10-29

            描述：状态

        -->

        <div id="Stats-output"></div>

        <!--

            作者：

            时间：2018-10-29

            描述：显示动画效果

        -->

        <div id="WebGL-output"></div>

        <script>

            function init(){

                 var stats = initStats();

                //创建一个场景

                var scene = new THREE.Scene();

                //创建一个相机

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

                //创建一个渲染器

                var renderer = new THREE.WebGLRenderer();

                //渲染器的背景颜色#EEEEEE

                renderer.setClearColor(new THREE.Color(0xEEEEEE, 1.0));

                //渲染器的大小

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

                //是否显示阴影

                renderer.shadowMapEnabled = true;

                //创建一个地面几何    宽60   高20   宽分成1份   高分成1份

                var planeGeometry = new THREE.PlaneGeometry(60, 20, 1, 1);

                //地面的材料是光照材料 颜色是#FFFFFF

                var planeMaterial = new THREE.MeshLambertMaterial({color: 0xffffff});

                //合成材料和几何

                var plane = new THREE.Mesh(planeGeometry, planeMaterial);

                //地面允许接收阴影

                plane.receiveShadow = true;

                //地面坐标

                plane.rotation.x = -0.5 * Math.PI;   //地面本来是竖着的  要逆时针旋转90度   -90 * Math.PI / 180;

                plane.position.x = 15;

                plane.position.y = 0;

                plane.position.z = 0;

                // 在场景中添加地面

                scene.add(plane);

                // 创建一个正方体  使用基本材料  允许正方体有阴影

                var cubeGeometry = new THREE.BoxGeometry(4, 4, 4);

                var cubeMaterial = new THREE.MeshLambertMaterial({color: 0xff0000});

                var cube = new THREE.Mesh(cubeGeometry, cubeMaterial);

                cube.castShadow = true;

                // 正方体的坐标

                cube.position.x = -4;

                cube.position.y = 3;

                cube.position.z = 0;

                // 把正方体添加到场景中

                scene.add(cube);

                //球体  基本材料

                var sphereGeometry = new THREE.SphereGeometry(4, 20, 20);

                var sphereMaterial = new THREE.MeshLambertMaterial({color: 0x7777ff});

                var sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);

                // 球体坐标  允许有阴影

                sphere.position.x = 20;

                sphere.position.y = 0;

                sphere.position.z = 2;

                sphere.castShadow = true;

                // 把球体添加到场景中去

                scene.add(sphere);

                // 相机的坐标  相机的镜头朝向场景

                camera.position.x = -30;

                camera.position.y = 40;

                camera.position.z = 30;

                camera.lookAt(scene.position);

                 // 添加自然光    自然光不会产生阴影

                var ambientLight = new THREE.AmbientLight(0x0c0c0c);

                scene.add(ambientLight);

                // 添加聚光灯  聚光灯会产生阴影

                var spotLight = new THREE.SpotLight(0xffffff);

                spotLight.position.set(-40, 60, -10);

                spotLight.castShadow = true;   //允许聚光灯产生阴影

                scene.add(spotLight);

                //将渲染的场景添加到dom元素中去

                   document.getElementById("WebGL-output").appendChild(renderer.domElement);

                    // 调用渲染场景的循环

                var step = 0;

                renderScene();

                function renderScene() {

                    //更新FPS值

                    stats.update();

                    // 旋转正方体

                    cube.rotation.x += 0.02;

                    cube.rotation.y += 0.02;

                    cube.rotation.z += 0.02;

                    // 移动球体

                    step += 0.04;

                    sphere.position.x = 20 + ( 10 * (Math.cos(step)));

                    sphere.position.y = 2 + ( 10 * Math.abs(Math.sin(step)));

                    // render using requestAnimationFrame

                    requestAnimationFrame(renderScene);

                    renderer.render(scene, camera);

                }

                //在一个小图里显示每秒显示的帧数(FPS)

                function initStats(){

                    var stats = new Stats();

                    stats.setMode(0); // 0: fps, 1: ms

                    stats.domElement.style.position = 'absolute';

                    stats.domElement.style.left = '0px';

                    stats.domElement.style.top = '0px';

                    document.getElementById("Stats-output").appendChild(stats.domElement);

                    return stats;

                }

            }

            window.onload = init;

        </script>

    </body>

</html>

01-THREE.JS 第一个场景的更多相关文章

  1. 初入Three.js 第一章

    一.什么是WebGL? 1.WebGL是在浏览器中实现三维效果的一套规范. 二.什么是threejs? 1.你将它理解成three + js就可以了.three表示3D的意思,js表示javascri ...

  2. 使用WebGL + Three.js制作动画场景

    使用WebGL + Three.js制作动画场景 3D图像,技术,打造产品,还有互联网:这些只是我爱好的一小部分. 现在,感谢WebGL的出现-一个新的JavaScriptAPI,它可以在不依赖任何插 ...

  3. 【爬虫入门01】我第一只由Reuests和BeautifulSoup4供养的Spider

    [爬虫入门01]我第一只由Reuests和BeautifulSoup4供养的Spider 广东职业技术学院  欧浩源 1.引言  网络爬虫可以完成传统搜索引擎不能做的事情,利用爬虫程序在网络上取得数据 ...

  4. 【three.js 第一课】创建场景，显示几何体

    <!DOCTYPE html> <html> <head> <title>demo1</title> </head> <s ...

  5. Three.js 第一篇：绘制一个静态的3D球体

    第一篇就画一个球体吧 首先我们知道Three.js其实是一个3D的JS引擎,其中的强大之处就在于这个JS框架并不是依托于JQUERY来写的.那么,我们在写这一篇绘制3D球体的文章的时候,应该注意哪些地 ...

  6. three.js canvas内场景生成图片 canvas生成图片

    第一种最简单的方法: 1 threeBox.render();//重点 解决拿到图片后为黑色 2 3 let src=threeBox.renderer.domElement.toDataURL(); ...

  7. 学习vue.js 第一天

    最近听到很多人都在用Vue.js ,我也想凑凑热闹,来个入门 啥的 ,要不以后人家说,啥都不知道,多low 看到官网 是这样介绍Vue.js Vue.js(读音 /vjuː/, 类似于 view) 是 ...

  8. 01 Node.js简介, 安装&配置

    Node.js 简介 Node.js 是什么 Node.js 有着强大而灵活的包管理器(node package manager,npm) 目前, 已经有强大第三方工具模块, 例如数据库连接, 网站开 ...

  9. js第一天

    学习js的地址 http://www.w3school.com.cn/js/index.asp JS是一种轻量级的编程语言,插入html页面后可以由任何浏览器去执行,可用于 HTML 和 web,更可 ...

随机推荐

  1. Linux下简单的多线程编程--线程池的实现

    /* 写在前面的话: 今天刚“开原”,选择了一篇关于线程池的文件与大家分享,希望能对您学习有所帮助,也希望能与大家共同学习! 选择在这个特殊的时候注册并发文章也是有一些我个人特殊的意义的,看我的id( ...

  2. python read文件的r和rb的区别

    r,rb,w,wb 那么在读写文件时,有无b标识的的主要区别在哪里呢? 1.文件使用方式标识 'r':默认值,表示从文件读取数据. 'w':表示要向文件写入数据,并截断以前的内容 'a':表示要向文件 ...

  3. linux中获取系统时间的几种方法

    asctime(将时间和日期以字符串格式表示) 相关函数 time,ctime,gmtime,localtime 表头文件 #include<time.h> 定义函数 char * asc ...

  4. Python学习进程（8）字符串內建函数

        Python字符串內建函数实现了string模块的大部分方法,并包括了对Unicode编码方式的支持.     (1)capitalize(): 将字符串的第一个字母变成大写,其他字母变小写. ...

  5. ubuntu: lightdm 登录root超级管理员方法

    ubuntu 12.04 lts 默认是不允许root登录的, 在登录窗口只能看到普通用户和访客登录. 以普通身份登陆Ubuntu后我们需要做一些修改,普通用户登录后, 修改系统配置文件需要切换到超级 ...

  6. nodejs数据接收body-parser中间件

    给大家翻译一下npm上body-parser的资料 nodejs 的body数据解析中间件 插件作用:对于req.body属性,在操作数据前分析进来的请求体的插件 首先学习解析一个http处理 这篇文 ...

  7. 通过加载Xib文件来创建UITableViewCell造成复用数据混乱问题方案

    - (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPa ...

  8. NSCoder

    person.h头文件内容 #import <Foundation/Foundation.h> @interface Person : NSObject { NSString *name; ...

  9. mongodb GridFS django FileFiled 默认 widget 只有一个文件上传框显示不了字段内容，重写widget

    首先,定位到:FileFiled 默认 widget 源码:mongoadmin包options.py中,如下: # Defaults for formfield_overrides. ModelAd ...

  10. 使用UNIDAC连接oracle时的参数设置

    在uniconnection1里设置: server项位hostip:port:sid,如10.53.x.XX:1521:or10g 然后在Options里设置: charset:utf8 direc ...