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. Retrofit2.2说明-简单使用

    很久前就想学习下Retrofit了,不过总是没有时间,正好最近新项目要用到网络请求,正好研究了下Retrofit2.2的简单使用方法,大致记录如下: Retrofit与okhttp共同出自于Squar ...

  2. 拟牛顿法——DFP、BFGS、L-BFGS

    DFP 该算法的核心是:通过迭代的方法,对Hk+1(-1)近似.迭代方式: 其中D0通常取为单位矩阵,关键是每一步构造矫正矩阵△Dk. 考虑△Dk 的待定形式为 拟牛顿的条件 这里插播一下拟牛顿的条件 ...

  3. Maven学习笔记—仓库

    Maven仓库 1 什么是Maven仓库 在Maven中,任何一个依赖.插件或者项目构建的输出,都可以成为构件,而Maven通常在某个位置统一的存储所有Maven项目共享的构件,这个统一的位置就是Ma ...

  4. java.lang.NoClassDefFoundError: org/springframework/expression/PropertyAccessor

    这个异常原因种类不一,网上有各个版本,本人的是因为缺少了spring-expression-3.2.1.RELEASE.jar 2015-9-18 23:19:11 org.apache.catali ...

  5. python之路（sed，函数，三元运算）

    python之路(sed,函数,三元运算) 一.sed集合 1.set无序,不重复序列 2.创建 se = {11,22,33,33,44} list() #只要是一个类加上()自动执行 list _ ...

  6. Kattis - convexpolygonarea 【数学】

    题意 给出一系列点,求这个多边形面积 思路 向量叉积 AC代码 #include <cstdio> #include <cstring> #include <ctype. ...

  7. Shell编程之IF条件

    一.if条件语句的知识与实践 1.if条件语句语法(单分支结构) 第一种: if < 条件表达式 > then 指令 fi 第二种: if < 条件表达式 >; then 指令 ...

  8. Pytorch的gather用法理解

    先放一张表,可以看成是二维数组 行(列)索引 索引0 索引1 索引2 索引3 索引0 0 1 2 3 索引1 4 5 6 7 索引2 8 9 10 11 索引3 12 13 14 15 看一下下面例子 ...

  9. [Android]开源中国源码分析之二---DrawerLayout

    从启动界面到主界面之后的效果如图所示,采用的是v4包下的DrawerLayout, activity_main.xml文件如下: <!-- A DrawerLayout is intended ...

  10. maven setting.xml 存放位置导致deply失败，显示没有权限401错误

    settings.xml存在于两个地方: 1.安装的地方:$M2_HOME/conf/settings.xml 2.用户的目录:${user.home}/.m2/settings.xml 我只在mav ...