实现物体的旋转、跳动以及场景阴影的开启与优化

本程序将创建一个场景，并实现物体的动画效果
运行的结果如图：


完整代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Three.js</title>
    <script src="../../../Import/three.js"></script>
    <script src="../../../Import/stats.js"></script>
    <script src="../../../Import/Setting.js"></script>
    <script src="../../../Import/OrbitControls.js"></script>
    <script src="../../../Import/dat.gui.min.js"></script>
    <style type="text/css">
        div#canvas-frame {
            border: none;
            cursor: pointer;
            width: 100%;
            height: 850px;
            background-color: #333333;
        }
    </style>
</head>
<body onload="threeStart()">
<div id="canvas-frame"></div>
<script>
    //控制面板中需要的两个数据
    let control = new function () {
        this.rotationSpeed = 0.01;
        this.jumpSpeed = 0.03;
    };
    let renderer, camera, scene;
    let controller;
    let width,height;

    //初始化渲染器
    function initThree() {
        width = document.getElementById('canvas-frame').clientWidth;
        height = document.getElementById('canvas-frame').clientHeight;
        renderer = new THREE.WebGLRenderer({
            antialias: true
        });//定义渲染器
        renderer.setSize(width, height);//设置渲染的宽度和高度
        document.getElementById("canvas-frame").appendChild(renderer.domElement);//将渲染器加在html中的div里面
        renderer.setClearColor(0x333333, 1.0);//渲染的颜色设置
        renderer.shadowMapEnabled = true;//开启阴影，默认是关闭的，太影响性能
        renderer.shadowMapType = THREE.PCFSoftShadowMap;//阴影的一个类型，可以不设置对比看效果
    }
    //初始化摄像机
    function initCamera() {
        camera = new THREE.PerspectiveCamera(45, width / height, 1, 10000);//perspective是透视摄像机，这种摄像机看上去画面有3D效果

        //摄像机的位置
        camera.position.x = 50;
        camera.position.y = 50;
        camera.position.z = 50;
        camera.up.x = 0;
        camera.up.y = 1;//摄像机的上方向是Y轴
        camera.up.z = 0;
        camera.lookAt(0, 0, 0);//摄像机对焦的位置
        //这三个参数共同作用才能决定画面
    }
    //初始化场景
    function initScene() {
        scene = new THREE.Scene();
    }
    //摄像机的控制，可以采用鼠标拖动来控制视野
    function cameraControl() {
        controller = new THREE.OrbitControls(camera, renderer.domElement);
        controller.target = new THREE.Vector3(0, 0, 0);
    }
    //一个很方便的控制面板，方便更改程序的参数
    function datGUI() {
        let gui = new dat.GUI();
        //可以设置可以调动的范围
        gui.add(control, "rotationSpeed", 0, 0.05);
        gui.add(control, "jumpSpeed", 0, 0.08);
    }
    //初始化灯光
    function initLight() {
        let light = new THREE.SpotLight(0xffffff, 1.0, 0);//点光源
        light.position.set(-40, 60, -10);
        light.castShadow = true;//开启阴影
        light.shadowMapWidth = 8192;//阴影的分辨率
        light.shadowMapHeight = 8192;
        scene.add(light);
        light = new THREE.AmbientLight(0xffffff, 0.2);//环境光，如果不加，点光源照不到的地方就完全是黑色的
        scene.add(light);
    }

    let cube;
    let sphere;

    //初始化物体
    function initObject() {
        //定义了一个地面
        let planeGeometry = new THREE.PlaneGeometry(100, 100, 1, 1);
        let planeMaterial = new THREE.MeshLambertMaterial({
            color: 0xcccccc,
        });
        let plane = new THREE.Mesh(planeGeometry, planeMaterial);
        plane.rotation.x = -0.5 * Math.PI;
        plane.position.x = 15;
        plane.receiveShadow = true;//开启地面的接收阴影
        scene.add(plane);//添加到场景中

        //定义了一个方块
        let cubeGeometry = new THREE.BoxGeometry(4, 4, 4);
        let cubeMaterial = new THREE.MeshLambertMaterial({
            color: 0xff1111,
        });
        cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
        cube.position.x = -4;
        cube.position.y = 3;
        cube.position.z = 0;
        cube.castShadow = true;//开启阴影
        scene.add(cube);

        //定义了一个球体
        let sphereGeometry = new THREE.SphereGeometry(4, 100, 100);
        let sphereMaterial = new THREE.MeshLambertMaterial({
            color: 0xba7890,
        });
        sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);
        sphere.position.x = 20;
        sphere.position.y = 4;
        sphere.position.z = 2;
        sphere.castShadow = true;//开启阴影
        scene.add(sphere);
    }
    //方块的自动旋转
    function cubeRotation() {
        cube.rotation.x += control.rotationSpeed;
        cube.rotation.y += control.rotationSpeed;
        cube.rotation.z += control.rotationSpeed;
    }

    let step = 0;
    //球体的抛物线运动轨迹
    function boxJump() {
        step += control.jumpSpeed;
        sphere.position.x = 20 + 10 * (Math.cos(step));
        sphere.position.y = 4 + 10 * (Math.abs(Math.sin(step)));
    }
    //定义的一个功能文件
    function initSetting() {
        loadAutoScreen(camera,renderer);
        loadFullScreen();
        loadStats();
    }
    //主函数
    function threeStart() {
        initThree();
        initCamera();
        initScene();
        initLight();
        initObject();
        cameraControl();
        datGUI();
        initSetting();
        animation();
    }
    //动画
    function animation() {
        cubeRotation();//方块旋转函数
        boxJump();//球体运动函数
        stats.update();//更新性能检测器

        renderer.clear();
        renderer.render(scene, camera);//开始渲染

        requestAnimationFrame(animation);//重复执行此函数，不停的渲染，达到动画的效果
    }
</script>
</body>
</html>

其中OrbitControls.js和dat.gui.min.js这两个文件都是Three.js自带的两个很好用的工具，第一个是可以让摄像机有轨道地进行移动，而不用再自己写函数去实现，第二个是一个轻量级的图形用户界面库（GUI 组件），使用这个库可以很容易地创建出能够改变代码变量的界面组件，方便我们测试程序。

另外如果想要在程序中开启阴影的话首先需要把renderer.shadowMapEnabled设置为true，默认是关闭的，因为实现阴影的效果是比较消耗性能的。同时要把light的投掷阴影开启light.castShadow = true，但是并不是所有的灯光都可以开启，比如环境光就不可以。每一个需要产生阴影的物体也要开启阴影，我们需要用地面来接收阴影，所以也需要开启地面的接收阴影
plane.receiveShadow = true；
cube.castShadow = true;
sphere.castShadow = true;
现在的效果是这样的：

可以看到，阴影是比较难看的，所以设置一些阴影的类型，PCFSoftShadowMap能让边缘柔和，但只是基于像素颗粒的边缘柔和。我们可以先使用此类型，然后再提高阴影的分辨率light.shadowMapWidth = 8192;
light.shadowMapHeight = 8192;
默认的值应该是1024。
此时的阴影效果是这样的

至此，我们的场景还有物体的动画效果就已经实现。

WebGL three.js学习笔记 阴影与实现物体的动画的更多相关文章

  1. WebGL three.js学习笔记 6种类型的纹理介绍及应用

    WebGL three.js学习笔记 6种类型的纹理介绍及应用 本文所使用到的demo演示: 高光贴图Demo演示 反光效果Demo演示(因为是加载的模型,所以速度会慢) (一)普通纹理 计算机图形学 ...

  2. WebGL three.js学习笔记 加载外部模型以及Tween.js动画

    WebGL three.js学习笔记 加载外部模型以及Tween.js动画 本文的程序实现了加载外部stl格式的模型,以及学习了如何把加载的模型变为一个粒子系统,并使用Tween.js对该粒子系统进行 ...

  3. WebGL three.js学习笔记 使用粒子系统模拟时空隧道（虫洞）

    WebGL three.js学习笔记 使用粒子系统模拟时空隧道 本例的运行结果如图: 时空隧道demo演示 Demo地址:https://nsytsqdtn.github.io/demo/sprite ...

  4. WebGL three.js学习笔记 法向量网格材质MeshNormalMaterial的介绍和创建360度全景天空盒的方法

    WebGL学习----Three.js学习笔记(5) 点击查看demo演示 Demo地址:https://nsytsqdtn.github.io/demo/360/360 简单网格材质 MeshNor ...

  5. WebGL three.js学习笔记 创建three.js代码的基本框架

    WebGL学习----Three.js学习笔记(1) webgl介绍 WebGL是一种3D绘图协议,它把JavaScript和OpenGL ES 2.0结合在一起,通过增加OpenGL ES 2.0的 ...

  6. WebGL three.js学习笔记 自定义顶点建立几何体

    自定义顶点建立几何体与克隆 Three.js本身已经有很多的网格模型,基本已经够我们的使用,但是如果我们还是想自己根据顶点坐标来建立几何模型的话,Three.js也是可以的. 基本效果如图: 点击查看 ...

  7. WebGL three.js学习笔记 纹理贴图模拟太阳系运转

    纹理贴图的应用以及实现一个太阳系的自转公转 点击查看demo演示 demo地址:https://nsytsqdtn.github.io/demo/solar/solar three.js中的纹理 纹理 ...

  8. js学习笔记：webpack基础入门（一）

    之前听说过webpack,今天想正式的接触一下,先跟着webpack的官方用户指南走: 在这里有: 如何安装webpack 如何使用webpack 如何使用loader 如何使用webpack的开发者 ...

  9. Vue.js学习笔记（2）vue-router

    vue中vue-router的使用:

随机推荐

  1. 微信小程序-设计指南

    基于微信小程序轻快的特点,官方拟定了小程序界面设计指南和建议,可作为小程序开发参考. 友好礼貌 -避免用户使用服务时被周围环境干扰,设计时应减少无关设计对用户的影响,礼貌的向用户提供服务,友好的引导用 ...

  2. 谈谈Javascript异步代码优化

    关于 微信公众号:前端呼啦圈(Love-FED) 我的博客:劳卜的博客 知乎专栏:前端呼啦圈 前言 在实际编码中,我们经常会遇到Javascript代码异步执行的场景,比如ajax的调用.定时器的使用 ...

  3. Robot Framework和Selenium简介

    1.1  RF简介 Robot Framework是一款python编写的功能自动化测试框架.具备良好的可扩展性,支持关键字驱动,可以同时测试多种类型的客户端或者接口,可以进行分布式测试执行.主要用于 ...

  4. IOC 的理解与解释

    IOC 是什么? Ioc-Inversion of Control,即"控制反转",不是什么技术,而是一种设计思想.在Java开发中,Ioc意味着将你设计好的对象交给容器控制,而不 ...

  5. mysql的SQL_NO_CACHE(在查询时不使用缓存)和sql_cache用法

    转自:http://www.169it.com/article/5994930453423417575.html 为了测试sql语句的效率,有时候要不用缓存来查询. 使用 SELECT SQL_NO_ ...

  6. PAT1091:Acute Stroke

    1091. Acute Stroke (30) 时间限制 400 ms 内存限制 65536 kB 代码长度限制 16000 B 判题程序 Standard 作者 CHEN, Yue One impo ...

  7. Cookie与 Session使用详解

    Cookie概念 在浏览某些 网站 时,这些网站会把 一些数据存在 客户端 , 用于使用网站 等跟踪用户,实现用户自定义 功能. 是否设置过期时间: 如果不设置 过期时间,则表示这个 Cookie生命 ...

  8. Linux的文本处理工具浅谈-awk sed grep

    Linux的文本处理工具浅谈 awk   老大 [功能说明] 用于文本处理的语言(取行,过滤),支持正则 NR代表行数,$n取某一列,$NF最后一列 NR==20,NR==30 从20行到30行 FS ...

  9. SpringBoot如何新建一个项目 2017.12.14

    http://blog.csdn.net/q649381130/article/details/77875736  从入门到精通

  10. app后端设计(3)--短信，邮件，推送服务（2014.12.05更新）

    在app的后端设计中,免不了消息的推送,短信,邮件等服务,下面就个人的开发经验谈谈这方面. (1)最重要的是,各种推送一定要放在队列系统中处理,不然会严重影响api的响应时间. (2)短信方面 以前我 ...