<!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. 解决jetty7.0.pre5启动时报ClassNotFoundException: javax.interceptor.InvocationContext异常的问题

    一.背景介绍:最近项目在使用maven命令行运行jetty服务器时出现ClassNotFoundException: javax.interceptor.InvocationContext异常 二.环 ...

  2. 模拟赛1031d1

    NP(np)Time Limit:1000ms Memory Limit:64MB题目描述LYK 喜欢研究一些比较困难的问题,比如 np 问题.这次它又遇到一个棘手的 np 问题.问题是这个样子的:有 ...

  3. chaper3_exerise_Uva1225_digit_counting

    #include<iostream> #include<stdio.h> #include<cstring> using namespace std; ; int ...

  4. MyISAM表的维护和恢复

    本节将讨论如何使用myisamchk检查和修复MyISAM表. 同时,你可以用myisamchk来检查,修复和优化数据库表.下面将讲述如何执行这些操作并建立维护计划. 虽然使用myisamchk很安全 ...

  5. NYOJ题目10505C？5S？

    aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAscAAAJ/CAIAAAAbDelhAAAgAElEQVR4nO3dPXLbOhfG8XcT7r0Q11

  6. JavaScript基础——使用运算符

    JavaScript运算符允许你改变一个变量的值.你已经熟悉了用于赋值给变量的=运算符.JavaScript提供了几种不同的运算符,它们可以划分为两大类:算数运算符和赋值运算符. 1.算数运算符 你可 ...

  7. linux退出vi

    linux退出vi操作,可以先按“esc”,再按“:”,“x”即可,这是要保存退出. 假如是修改过的,不保存,即是:先按  :   ,然后输入  q!  回车 假如未改动,即先按  :   ,然后输入 ...

  8. windows 10 上office2016 word崩溃的解决方案

    方案1:--个人试验可行,把如下路径改成自己系统路径 C:Documents and Settings/Administrator/application/data/microsoft/templat ...

  9. 【JAVA中String、StringBuffer、StringBuilder类的使用】

    一.String类概述 1.String对象一旦创建就不能改变. 2.字符串常量池. 字符串常量池的特点:池中有则直接使用,池中没有则创建新的字符串常量. 例1: public class Strin ...

  10. 【PHP小项目使用MVC架构】

    小项目名称是雇员管理系统. mvc是一种项目的开发模式,中文名称为模式视图控制器,是强制程序员将数据的输入.处理.输出分开的一种开发模式. 在这个小项目中,控制器使用service作为后缀名. 项目u ...