threejs的环境光+点光源+平行光源+球面光 以及hepler理解+阴影()

阴影(光castShadow,物体castShadow,接受receiveShadow+render 的shadowMap.enabled=true)

light.castShadow=true
box.castShadow = true;
box.receiveShadow=true
this.renderer.shadowMap.enabled=true
  

import React, {Component} from 'react';
import CryptoJS from 'crypto-js';
import qs from 'querystring';
import * as THREE from "three";
import {OrbitControls} from "three/examples/jsm/controls/OrbitControls";
// import {GLTFLoader} from "three/examples/jsm/loaders/GLTFLoader";
//加载mmd的物理模型
// import {MMDLoader} from "three/examples/jsm/loaders/MMDLoader";
//引入 外框线
// import {OutlineEffect} from "three/examples/jsm/effects/OutlineEffect";
//动画
// import {MMDAnimationHelper} from "three/examples/jsm/animation/MMDAnimationHelper";
//加载 物理引擎
// window.Ammo().then(res=>{window.Ammo=res})
// const clock=new THREE.Clock()
class light extends Component {
    ready:false
    constructor(args) {
        super(args);
        this.state={
            width:window.innerWidth,
            height:window.innerHeight,
            count:0
        }
    }
    render() {
        return (
            <div className={'three-canvas'}>
            </div>
        );
    }
    componentDidMount() {
        if(this.state.count===0){
            this.init()
            // eslint-disable-next-line react/no-direct-mutation-state
            this.state.count++
            const key = "abc";  //后端给出的密钥
            const iv = '3';   //后端给出的密钥偏移量
            const text="哈哈"
            var srcs = CryptoJS.enc.Utf8.parse(text);
            var encrypted = CryptoJS.AES.encrypt(srcs, CryptoJS.enc.Utf8.parse(key), {
                iv: CryptoJS.enc.Utf8.parse(iv),
                mode: CryptoJS.mode.CBC,
                padding: CryptoJS.pad.Pkcs7
            })
            const result= CryptoJS.enc.Base64.stringify(encrypted.ciphertext);
            // console.log(result)

            let baseResult = CryptoJS.enc.Base64.parse(result);   // Base64解密
            let ciphertext = CryptoJS.enc.Base64.stringify(baseResult);     // Base64解密
            let decryptResult = CryptoJS.AES.decrypt(ciphertext, CryptoJS.enc.Utf8.parse(key), {    //  AES解密
                iv: CryptoJS.enc.Utf8.parse(iv),
                mode: CryptoJS.mode.CBC,
                padding: CryptoJS.pad.Pkcs7
            });
            let resData = decryptResult.toString(CryptoJS.enc.Utf8).toString();
            // console.log(resData)
        }

    }
    getRenderer(){
        //设置
        const renderer=new THREE.WebGLRenderer()
        renderer.gammaFactor=true
        renderer.setSize(this.state.width,this.state.height)
        document.querySelector('.three-canvas').appendChild(renderer.domElement)
        return renderer
    }
    getCamera(){
        const camera=new THREE.PerspectiveCamera(75,this.state.width/this.state.height,1,1000)
        camera.position.z=12
        camera.lookAt(0,0,0)
        return camera
    }
    getScene(){
        const scene=new THREE.Scene()
        return scene
    }
    getControl(){
        const control=new OrbitControls(this.camera,this.renderer.domElement)
        return control
    }
    addSenceBg(){
        this.scene.background=new THREE.CubeTextureLoader().setPath('/textures/cube/Bridge2/').load(
            ['posx.jpg',"negx.jpg",
                'posy.jpg',"negy.jpg",
                'posz.jpg',"negz.jpg",
            ]
        )
    }
    addCube(){
        const geometry=new THREE.BoxGeometry(2,2,2)
        const textLoader=new THREE.TextureLoader().load('imgs/1.jpg')
        const material=new THREE.MeshLambertMaterial({map:textLoader,side:THREE.DoubleSide})
        const box= new THREE.Mesh(
            geometry,
            material
        )
        box.castShadow = true;
        this.scene.add(box)
    }
    addLight(){
        //环境光
        // const light = new THREE.AmbientLight( 0xffffff);
        // const light = new THREE.AmbientLight( 0xffffff,0.2);
        // this.light2=new THREE.PointLight(0xffffff,1)
        // light.position.set( 0, 0, 0 );
        // this.light2.position.set( 5, 10, 10 );
        // const sphereSize = 1;
        // this.pointLightHelper = new THREE.PointLightHelper( this.light2, sphereSize );
        // this.scene.add( this.pointLightHelper );
        // light.castShadow=true
        // this.light2.castShadow=true
        // this.scene.add( light );
        // this.scene.add( this.light2 );
        // const spotLight = new THREE.SpotLight( 0xffffff,1,15,Math.PI/6 );
        // spotLight.position.set( 0, 8, 0 );
        // spotLight.castShadow = true;
        //
        // this.scene.add( spotLight );
        // const spotLightHelper = new THREE.SpotLightHelper( spotLight );
        // this.scene.add( spotLightHelper );

        // this.light3 = new THREE.HemisphereLight( 0xff0000, 0xffff00, 1 );
        // this.light3.position.set (0, 1, 0)
        // this.scene.add( this.light3 );
        // const light = new THREE.HemisphereLight( 0xff0000, 0x080820, 1 );
        // light.position.set(4,1,0)
        // const helper = new THREE.HemisphereLightHelper( light, 20 );
        // this.scene.add( helper );
        // this.scene.add( light );

        const directionalLight = new THREE.DirectionalLight( 0xffffff, 0.5 );
        directionalLight.position.set(5,5,4)
        directionalLight.castShadow=true
        this.scene.add( directionalLight );
        const helper = new THREE.DirectionalLightHelper( directionalLight, 5 );
        this.scene.add( helper );
    }
    //添加地板
    addplane(){
        const geometry=new THREE.PlaneGeometry(20,20,20,20)
        const material=new THREE.MeshLambertMaterial({side:THREE.DoubleSide})
        const box= new THREE.Mesh(
            geometry,
            material
        )
        box.rotateX(Math.PI/2)
        box.position.set(0,-5,0)
        box.receiveShadow=true
        this.scene.add(box)
    }
    init(){
        //创建rander --相机 ---场景----动画
        this.renderer=this.getRenderer()
        this.renderer.shadowMap.enabled=true
        this.camera=this.getCamera()
        this.scene=this.getScene()
        //添加物体
        this.addCube()
        //添加头盔
        // this.addToukui()

        //添加灯光
        this.addLight()
        //添加第八
        this.addplane()
        //添加控制器
        this.control=this.getControl()
        //设置背景
        this.addSenceBg()
        //执行动画
        this.animation()
    }
    animation(){
        requestAnimationFrame(this.animation.bind(this))
        this.renderer.render(this.scene,this.camera)
        // if(this.ready){
        //     this.helper.update( clock.getDelta() );
        // }
        // this.light2.position.z -= 0.05
        this.control.update()
    }
}

export default light;