微信3d小游戏(three)-设置3D场景

目录

设置光照

设置背景

设置阴影

---

设置光照

1. src/scene/light.js

class Light {

constructor () {

this.instances = {}

}

 

init () {

const ambientLight = new THREE.AmbientLight(0xffffff, 0.8)

const shadowLight = new THREE.DirectionalLight(0xffffff, 0.3)

this.shadowLight = shadowLight

const shadowLightHelper = new THREE.DirectionalLightHelper(shadowLight, 5)//灯光辅助

shadowLight.position.set(10, 30, 20)

shadowLight.castShadow = true//开启投射阴影

var basicMaterial = new THREE.MeshBasicMaterial({ color: 0xF5F5F5 });

this.shadowTarget = new THREE.Mesh(new THREE.PlaneGeometry(0.1, 0.1), basicMaterial)

this.shadowTarget.visible = false//不可见

this.shadowTarget.name = 'shadowTarget'

shadowLight.target = this.shadowTarget

//阴影设置

shadowLight.shadow.camera.near = 0.5

shadowLight.shadow.camera.far = 500

shadowLight.shadow.camera.left = -100

shadowLight.shadow.camera.right = 100

shadowLight.shadow.camera.top = 100

shadowLight.shadow.camera.bottom = -100

shadowLight.shadow.mapSize.width = 1024

shadowLight.shadow.mapSize.height = 1024

//添加到实例中

this.instances.shadowLight = shadowLight

this.instances.ambientLight = ambientLight

this.instances.shadowTarget = this.shadowTarget

this.instances.shadowLightHelper = shadowLightHelper

}

}

export default new Light()

2.src/scene/scene.js

import light from './light'

在init中

//添加灯光

this.light =light

this.light.init()

for (let lightType in this.light.instances) {

this.instance.add(this.light.instances[lightType])

}

设置背景

1. src/objects/background.js：背景

import sceneConf from '../../confs/scene-conf'

 

class BackGround {

constructor () {

 

}

 

init () {

const geometry = new THREE.PlaneGeometry(sceneConf.frustumSize * 2, window.innerHeight / window.innerWidth * sceneConf.frustumSize * 2)

const material = new THREE.MeshBasicMaterial({

color: 0xd7dbe6,

opacity: 1,

transparent: true//开启透明度

})

this.instance = new THREE.Mesh(geometry, material)

}

}

export default new BackGround()

2.Src/scene/scene.js

import background from '../objects/background'

Init

//添加背景

this.background = background

this.background.init()

this.background.instance.position.z = -84

this.camera.instance.add(this.background.instance)//向摄像机添加背景

设置阴影

1. src/objects/ground.js

class Ground {

constructor () {

}

init () {

const groundGeometry = new THREE.PlaneGeometry(200, 200)

const material = new THREE.ShadowMaterial({

transparent: true,

color: 0x000000,//阴影颜色

opacity: 0.3

})

this.instance = new THREE.Mesh(groundGeometry, material)

this.instance.receiveShadow = true//接收阴影

this.instance.rotation.x = -Math.PI / 2

this.instance.position.y = - 16 / 3.2

}

updatePosition (targetPosition) {

this.instance.position.x = targetPosition.x

this.instance.position.z = targetPosition.z

}

}

export default new Ground()

2.src/pages/game-page.js

import ground from '../objects/ground.js'

Init

this.ground = ground

this.ground.init()//初始化

this.addGround()//添加阴影平面

Class

addGround () {

this.scene.instance.add(this.ground.instance)

}

3. src/scene/scene.js

Init

//开启阴影

renderer.shadowMap.enabled = true

renderer.shadowMap.type = THREE.PCFShadowMap

4. src/block/cuboid.js、cylinder.js

使用MeshPhongMaterial，可接受灯光产生阴影

并且

//接收投射阴影

this.instance.receiveShadow = true

this.instance.castShadow=true