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. 纯手写wcf代码，wcf入门，wcf基础教程

    1.定义服务协定     =>定义接口 using System.ServiceModel; namespace WcfConsole { /// <summary> /// 定义服 ...

  2. JavaWeb—监听器Listener

    1.简介 Listener是Servlet的监听器,Servlet 监听器用于监听一些重要事件的发生,监听器对象在事情发生前.发生后可以做一些必要的处理. JavaWeb里面的listener是通过观 ...

  3. BDC程序步骤

    (1)记录屏幕操作: (2)产生相关程序和数据格式文件: (3)调整数据文件: (4)运行BDC产生的程序读取文件导入数据: (5)源代码分析: (6)用BDC 导入单据: 在理解ABAP 开发的sc ...

  4. Django Rest Framework（一）

    一.什么是RESTful REST与技术无关,代表一种软件架构风格,REST是Representational State Transfer的简称,中文翻译为“表征状态转移”. REST从资源的角度审 ...

  5. Python基础（7）_闭包函数、装饰器

    一.闭包函数 闭包函数:1.函数内部定义函数,成为内部函数, 2.改内部函数包含对外部作用域,而不是对全局作用域名字的引用那么该内部函数成为闭包函数 #最简单的无参闭包函数 def func1() n ...

  6. NodeJS应用程序设置为window service-辅助工具(C#)

    1.修改nssm,去对话框后 2.生成批处理文件,执行 3.将nssm.exe.node.exe放在资源文件里面 附代码 工具

  7. 顽石系列：CSS实现垂直居中的五种方法

    顽石系列:CSS实现垂直居中的五种方法 在开发过程中,我们可能沿用或者试探性地去使用某种方法实现元素居中,但是对各种居中方法的以及使用场景很不清晰.参考的内容链接大概如下: 行内元素:https:// ...

  8. Spring AOP 学习（一） 代理模式

    AOP为Aspect Oriented Programming的缩写,意为:面向切面编程(也叫面向方面),可以通过预编译方式和运行期动态代理实现在不修改源代码的情况下给程序动态统一添加功能的一种技术. ...

  9. Linux Shell基础 Shell的输入重定向和输出重定向

    概述 在 Linux 中输入设备指的是键盘,输出设备指的是显示器.在 Linux 中,所有的内容都是文件,计算机硬件也是文件,标准输入设备(键盘)和标准输出设备(显示器)也是文件.这些设备的设备文件名 ...

  10. 【Head First Servlets and JSP】笔记19：JavaBeans与JSP动作元素（<jsp:setProperty.....>、<jsp:getProperty.....>）

    内容来自imooc. 1.什么是JSP动作元素 2.在JSP页面中如何使用Javabeans <jsp:......>表示这是一个JSP动作元素 3.使用JSP动作元素创建JavaBean ...