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. Android怎样在http头信息里设置參数

    在使用http请求server时经常要传递一些參数给server.如IMEI号.平台号.渠道号.client的版本等一些通用信息,像这些參数我们没有必要每次都拼在url后,我们能够统一加入到http头 ...

  2. Mybatis中insert返回主键ID

    记录解决的过程,这里就不搬砖了. 1.获取insert后的主键id 原文链接:http://www.cnblogs.com/fsjohnhuang/p/4078659.html 2.insert后返回 ...

  3. 剑指offer 面试20题

    面试20题: 题目:表示数值的字符串 题:请实现一个函数用来判断字符串是否表示数值(包括整数和小数).例如,字符串"+100","5e2","-123 ...

  4. AFNetworking 和 ASIHTTPRequest

    在开发iOS应用过程中,如何高效的与服务端API进行数据交换,是一个常见问题.一般开发者都会选择一个第三方的网络组件作为服务,以提高开发效率和稳定性.这些组件把复杂的网络底层操作封装成友好的类和方法, ...

  5. 进程理论基础（Day32）

    背景知识 顾名思义,进程即一个软件正在进行的过程.进程是对正在运行程序的一个抽象. 进程的概念起源于操作系统,是操作系统最核心的概念,也是操作系统提供的最古老的也是最重要的抽象概念之一.操作系统的其他 ...

  6. VMware虚拟机NAT模式的具体配置

      NAT模式的具体配置 NAT方式:虚拟机可以上外网,可以访问宿主计算机所在网络的其他计算机(反之不行). 1.1.1.        查看虚拟机的网络参数 1)      打开虚拟机,选择菜单&q ...

  7. 流量分析系统---flume(测试flume+kafka)

    1.在flume官方网站下载最新的flume     wget http://124.205.69.169/files/A1540000011ED5DB/mirror.bit.edu.cn/apach ...

  8. image has dependent child images

    在删除镜像之前要先用 docker rm 删掉依赖于这个镜像的所有容器(哪怕是已经停止的容器),否则无法删除该镜像. 停止容器 # docker stop $(docker ps -a | grep ...

  9. Loadrunder之脚本篇——关联

    关联的原理 关联也属于一钟特殊的参数化.一般参数化的参数来源于一个文件.一个定义的table.通过sql写的一个结果集等,但关联所获得的参数是服务器响应请求所返回的一个符合条件的.动态的值. 例子:常 ...

  10. flex 实现图片播放 方案二 把临时3张图片预加载放入内存

    该方案,是预加载:前一张,当前,下一张图片,一共3张图片放入内存中.这样对内存的消耗可以非常小,加载之后的图片就释放内存. 下面示例一个是类ImagePlayers,一个是index.mxml pac ...