阴影(光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;