<!DOCTYPE html>

<html>

<head>

    <title>Example 01.03 - Materials and light</title>

    <script type="text/javascript" src="../libs/three.js"></script>

    <script type="text/javascript" src="../libs/jquery-1.9.0.js"></script>

    <script type="text/javascript" src="../libs/stats.js"></script>

    <script type="text/javascript" src="../libs/dat.gui.js"></script>

    <style>

        body{

            /* set margin to 0 and overflow to hidden, to go fullscreen */

            margin: 0;

            overflow: hidden;

        }

    </style>

</head>

<body>

<!-- Div which will hold the Output -->

<div id="WebGL-output">

</div>

<!-- Javascript code that runs our Three.js examples -->

<script type="text/javascript">

    // once everything is loaded, we run our Three.js stuff.

    $(function () {

        // create a scene, that will hold all our elements such as objects, cameras and lights.

        var scene = new THREE.Scene();

        // create a camera, which defines where we're looking at.

        var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);

        // create a render and set the size

        var renderer = new THREE.WebGLRenderer();

        renderer.setClearColorHex(0xEEEEEE, 1.0);

        renderer.setSize(window.innerWidth, window.innerHeight);

        renderer.shadowMapEnabled = true;//告诉渲染器我们想要阴影。设置shadowMapEnabled（允许阴影映射）的值为true

        // create the ground plane

        var planeGeometry = new THREE.PlaneGeometry(60,20);

        var planeMaterial =    new THREE.MeshLambertMaterial({color: 0xffffff});//改为受光影响的材质MeshLambertMaterialI

        var plane = new THREE.Mesh(planeGeometry,planeMaterial);

        plane.receiveShadow  = true;//要得到阴影，对这些对象的相应属性设置为true

        // rotate and position the plane

        plane.rotation.x=-0.5*Math.PI;

        plane.position.x=15

        plane.position.y=0

        plane.position.z=0

        // add the plane to the scene

        scene.add(plane);

        // create a cube

        var cubeGeometry = new THREE.CubeGeometry(4,4,4);

        var cubeMaterial = new THREE.MeshLambertMaterial({color: 0xff0000});

        var cube = new THREE.Mesh(cubeGeometry, cubeMaterial);

        cube.castShadow = true;//将方块的阴影投射到地面上

        // position the cube

        cube.position.x=-4;

        cube.position.y=3;

        cube.position.z=0;

        // add the cube to the scene

        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);

        // position the sphere

        sphere.position.x=20;

        sphere.position.y=4;

        sphere.position.z=2;

        sphere.castShadow=true;//将球体的阴影投射到地面上

        // add the sphere to the scene

        scene.add(sphere);

        // position and point the camera to the center of the scene

        camera.position.x = -30;

        camera.position.y = 40;

        camera.position.z = 30;

        camera.lookAt(scene.position);

        // add spotlight for the shadows 通过spotlight()函数创建光源

        var spotLight = new THREE.SpotLight( 0xffffff );

        spotLight.position.set( -40, 60, -10 );//SpotLight()方法从它的位置（spotLight.position.set( -40, 60, -10 )）照亮我们的场景

        spotLight.castShadow = true;//要定义哪些光源会产生阴影。使用的SpotLight()可以产生影子。设置正确的属性，阴影最终就会被渲染出来。

        scene.add( spotLight );

        // add the output of the renderer to the html element

        $("#WebGL-output").append(renderer.domElement);

        // call the render function

        renderer.render(scene, camera);

    });

</script>

</body>

</html>

three.js阴影的更多相关文章

  1. Three.js 实现3D开放世界小游戏：阿狸的多元宇宙 🦊

    声明:本文涉及图文和模型素材仅用于个人学习.研究和欣赏,请勿二次修改.非法传播.转载.出版.商用.及进行其他获利行为. 背景 2545光年之外的开普勒1028星系,有一颗色彩斑斓的宜居星球 ,星际移民 ...

  2. [js高手之路] html5 canvas系列教程 - 线形渐变,径向渐变与阴影设置

    接着上文[js高手之路] html5 canvas系列教程 - 像素操作(反色,黑白,亮度,复古,蒙版,透明)继续. 一.线形渐变 线形渐变指的是一条直线上发生的渐变. 用法: var linear ...

  3. WebGL three.js学习笔记 阴影与实现物体的动画

    实现物体的旋转.跳动以及场景阴影的开启与优化 本程序将创建一个场景,并实现物体的动画效果 运行的结果如图: 完整代码如下: <!DOCTYPE html> <html lang=&q ...

  4. 【微收藏】FourShadows.js – 时间感知的算法驱动的图标阴影JS库

    废话一箩筐,筐筐有心得 不小心养成了一个刷微博的习惯,主要还是关注一些前端人士,学习一些前端方面的知识,看到大家都有一些刷微博的小习惯.有的是转发一下,转发内容来一个标记(MARK).也有评论中标记为 ...

  5. three.js - 添加材质 灯光 阴影

    看下运行效果: 源码解释: <!DOCTYPE html> <html lang="en"> <head> <meta charset=& ...

  6. three.js入门系列之光和阴影

    初中物理教过我们镜面反射和漫反射,这是由于物体的材质直接导致的. 在three.js中,由于物体的材料不同,对于光源的反应也是不一样的,下面就让我们一探究竟. 一.材料 据Three.js中描述,有两 ...

  7. 简易DIV垂直居中阴影层笼罩JS实现

    $(document).ready(init); function init() { var h = $(window).height(); var w = $(window).width(); /* ...

  8. JS框架_(JQuery.js)带阴影贴纸标签按钮

    百度云盘 传送门 密码:azo6 纯CSS带阴影贴纸标签按钮效果: <!doctype html> <html> <head> <meta charset=& ...

  9. 002_Three.js 中添加阴影 - [Three.js] - [阴影效果]

    在Three.js中设置阴影效果,有多个地方需要设置属性. ![](https://img2018.cnblogs.com/blog/1735896/201912/1735896-2019123116 ...

随机推荐

  1. MVC - 10.CodeFrist

    微软示例 1.(对新数据库使用 Code First):http://msdn.microsoft.com/zh-cn/data/jj193542 2.(连接和模型):http://msdn.micr ...

  2. 使用html5 canvas绘制圆形或弧线

    注意:本文属于<html5 Canvas绘制图形入门详解>系列文章中的一部分.如果你是html5初学者,仅仅阅读本文,可能无法较深入的理解canvas,甚至无法顺畅地通读本文.请点击上述链 ...

  3. AOJ789 买酒

    买酒 Time Limit: 1000 ms   Case Time Limit: 1000 ms   Memory Limit: 64 MBTotal Submission: 70   Submis ...

  4. IOS 100 － level2 Boss

    创建第一个app, buid, run. 过程 1 首先是按照知乎上的推荐去看了传说中的公开课了.看到第二集的时候觉得有种回到大学听老师上课的感觉--昏昏欲睡. 代码是一门实践课程,我觉得自己实现点东 ...

  5. Oracle 【IT实验室】数据库备份与恢复之：如何对Oracle数据库文件进行恢复与备份

    任何数据库在长期使用过程中,都会存在一定的安全隐患.对于数据库管理员来说不能仅寄希望于计算机操作系统的安全运行,而是要建立一整套的数据库备份与恢复机制.当数据库发生故障后,希望能重新建立一个完整的数据 ...

  6. windows7下安装php的imagick和imagemagick扩展教程

    这篇文章主要介绍了windows7下安装php的imagick和imagemagick扩展教程,同样也适应XP操作系统,Win8下就没测试过了,需要的朋友可以参考下 最近的PHP项目中,需要用到切图和 ...

  7. hdu 5294 最短路+最大流 ***

    处理处最短路径图,这个比较巧妙 链接:点我

  8. 在Salesforce中对某一个Object添加自定义的Button和Link

    在Salesforce中可以对某一个Object添加自定义的Button和Link,来完成特定的逻辑过程,接下来以一个简单的实例来描述整个处理流程,实现的基本功能和我另外一篇文章中描述的功能是一致的( ...

  9. customTextbox

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.W ...

  10. 遍历注册表回调函数(仿PCHunter CmpBack)

    遍历注册表回调函数(仿PCHunter CmpBack) typedef struct _CAPTURE_REGISTRY_MANAGER { PDEVICE_OBJECT deviceObject; ...