zoukankan      html  css  js  c++  java
  • 002_Three.js 中添加阴影

    在Three.js中设置阴影效果,有多个地方需要设置属性。

    ![](https://img2018.cnblogs.com/blog/1735896/201912/1735896-20191231162719632-607659961.png)

    1.渲染器

    //初始化渲染器
    function initRenderer() {
        var renderer = new THREE.WebGLRenderer();
        renderer.shadowMap.enabled = true;//关键
        renderer.shadowMapSoft = true;//关键
        renderer.shadowMap.type = THREE.PCFSoftShadowMap;//关键
    
        renderer.setClearColor(new THREE.Color(0x000000));
        renderer.setSize(window.innerWidth, window.innerHeight);
        document.getElementById("entryNode").appendChild(renderer.domElement);
        return renderer
    }
    

    **2.地板** ```javascript var planeGeometry = new THREE.PlaneGeometry(300,300,20,20); var planeMaterial = new THREE.MeshPhongMaterial({ color:0x222222, side: THREE.Double }); var plane = new THREE.Mesh(planeGeometry,planeMaterial); plane.rotation.x = -0.5 * Math.PI; plane.position.x = 0; plane.position.y = -5; plane.position.z = 0 plane.receiveShadow = true;//关键,特别要注意的是receiveShadow

    scene.add(plane)

    </br>
    **3.光源**
    ```javascript
    var spotlight = new THREE.SpotLight(0xffffff);
    spotlight.position.set(-40,60,-10);
    spotlight.castShadow = true//关键
    scene.add(spotlight);
    

    **4.物体** ```javascript var cubeGeometry = new THREE.BoxGeometry(20,20,20); var cubeMaterial = new THREE.MeshLambertMaterial({ color:0xffaaaa, wireframe:true }); var cube = new THREE.Mesh(cubeGeometry,cubeMaterial); cube.position.x = 0; cube.position.y = 10; cube.position.z = 80; cube.castShadow = true;//关键

    scene.add(cube)

    var sphereGeometry = new THREE.SphereGeometry(20,40,50);
    var sphereMaterial = new THREE.MeshLambertMaterial({
    color:0x777777,
    wireframe: true
    });
    var sphere = new THREE.Mesh(sphereGeometry,sphereMaterial);
    sphere.position.y = 20
    sphere.castShadow = true;//关键

    scene.add(sphere)

  • 相关阅读:
    每次运行caffe代码之前需要考虑修改的地方
    caffe solver 配置详解
    python获取当前文件路径以及父文件路径
    Python 文件夹及文件操作
    安装NVIDIA驱动时禁用自带nouveau驱动
    博客园转载其他博客园的文章:图片和源码
    分布式开放消息系统(RocketMQ)的原理与实践
    RocketMQ基本概念及原理介绍
    rocketmq 4.3.2 解决远程不能消费问题,解决未识别到公网IP问题
    osx免驱网卡推荐
  • 原文地址:https://www.cnblogs.com/jaycethanks/p/12125150.html
Copyright © 2011-2022 走看看