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. 博客没内容可写了怎么办?找BD！

    博客写了一段时间可能会感觉没内容可以写了,或者说同一个领域的内容写多了感觉有点千篇一律,这时要考虑扩展自己的写作领域,怎么去扩展呢?利用关键词工具可以衍生很多长尾词,当然这个有点牵强,有点为优化而优化 ...

  2. Android 4.4 Kitkat 音频实现及简要分析

    版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/jingxia2008/article/details/26701899 在 Android 4.4 ...

  3. C#数组学习

    1.多维数组 using System; using System.Collections.Generic; using System.Linq; using System.Text; namespa ...

  4. 佳能相机操作 EDSDK 教程 C# 版本

    http://blog.csdn.net/zajin/article/details/17021339    介绍 佳能EOS数码SDK是一个 可以用来远程控制其数码单反相机相当强大的SDK.不幸的是 ...

  5. Java转C#，非常不错（转）

    http://www.cnblogs.com/cnwebman/archive/2012/07/21/2602436.html 最近正在研究将一个纯java工程如何转换成C#工程,代码量还比较大,于是 ...

  6. 【转】jQuery插件之ajaxFileUpload

    转自:http://www.cnblogs.com/kissdodog/archive/2012/12/15/2819025.html 说在前头,本文出自上面的作者,只是以前存的一些网址不见了,怕以后 ...

  7. BIO，NIO和AIO

    BIO:同步阻塞式IO,服务器实现模式为一个连接一个线程,即客户端有连接请求时服务器端就需要启动一个线程进行处理,如果这个连接不做任何事情会造成不必要的线程开销,当然可以通过线程池机制改善. NIO: ...

  8. $Android制作和使用Nine-Patch图片

    Nine-Patch图片是一种经过特殊处理的png图片,能够指定图片的哪些区域可以被拉伸而哪些区域不可以. (一)普通图片被拉伸时的缺陷 有如下xml文件,其中子LinearLayout的背景图片设置 ...

  9. $SublimeText2常用快捷键

    1．删除一行:ctrl + shift + K2．替换:ctrl + H3．设置书签:Ctrl+F2设置书签F2 下一个书签Shift+F2上一个书签4．查找:ctrl + F 查找F3 查找下一个s ...

  10. debian内核代码执行流程(三）

    接续<debian内核代码执行流程(二)>未完成部分 下面这行输出信息是启动udevd进程产生的输出信息: [ ]: starting version 175是udevd的版本号. 根据& ...