Three(三)通过简单使用光源提供一个基础封装类
这篇文章主要是为了提供一个基础的封装类,但是因为直接硬生生的代码会感觉很不友好,所以就是把简单使用光源的这部分作为这个类的简单demo了。
效果图
附带功能
- 摄像头控制器
- 环境光和平行光的使用
- 网格的创建
- 网格辅助功能
- 性能监测工具
- 坐标轴辅助
- 自适应
- 创建地板
以上功能都是提供到能够使用的程度,至于实现其他的效果就要自己去看api了,毕竟我这篇文章的本意是提供一个可以开箱即用的类。
代码
html
<style>
body {
margin: 0;
}
canvas {
width: 100%;
height: 100%
}
</style>
<div id="room" style="position: absolute; left: 0px; top: 0px"></div>
<script src="./build/three.min.js"></script>
<script src="./build/OrbitControls.js"></script>
<script src="./build/stats.min.js"></script>
<script src="./js/basic.js"></script>
<script>
let demo = new basicThree()
demo.initModel()
</script>
basic.js
class basicThree {
constructor(props) {
// three 3要素
this.renderer; //渲染器
this.camera; //摄像头
this.scene; //场景
//光源
this.ambientLight; //环境光
this.pointLight; //平行光
//摄像头控制
this.controls;
this.init()
}
init() {
this.initScene()
this.initCamera()
this.initRender()
/* ------ 辅助函数--------------*/
this.orbitHelper() //摄像头辅助
this.statsHelper() //性能辅助
this.animate()
window.onresize = this.onWindowResize.bind(this);
}
initScene() { //场景
this.scene = new THREE.Scene();
}
initCamera() { //摄像头
let camera = new THREE.PerspectiveCamera(85, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.set(0, 40, 100);
camera.lookAt(new THREE.Vector3(0, 0, 0));
this.camera = camera;
}
initRender() { //渲染器
let renderer = new THREE.WebGLRenderer({
antialias: true
});
renderer.setSize(window.innerWidth, window.innerHeight);
let container = document.getElementById('room');
container.appendChild(renderer.domElement);
//告诉渲染器需要阴影效果
renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.PCFSoftShadowMap;
this.renderer = renderer;
}
initLight() {
let ambientLight = new THREE.AmbientLight("#111111");
this.scene.add(ambientLight);
let pointLight = new THREE.PointLight("#ffffff");
pointLight.position.set(15, 30, 10);
//告诉平行光需要开启阴影投射
pointLight.castShadow = true
this.scene.add(pointLight);
this.ambientLight = ambientLight; //环境光
this.pointLight = pointLight; //平行光
}
initModel() {
// this.gridHelper() //网格辅助
this.initLight()
this.basicfloor()
this.lambertBox()
}
orbitHelper() { //创建摄像头辅助
let controls = new THREE.OrbitControls(this.camera, this.renderer.domElement);
this.controls = controls;
}
gridHelper() { // 创建网格辅助
var gridHelper = new THREE.GridHelper(20, 20, 0x404040, 0x404040);
this.scene.add(gridHelper);
}
statsHelper() { //性能插件
this.stats = new Stats();
document.body.appendChild(this.stats.dom);
}
axisHelper() { //坐标轴辅助
var helper = new THREE.AxisHelper(10);
this.scene.add(helper);
}
onWindowResize() { //自适应
this.camera.aspect = window.innerWidth / window.innerHeight;
this.camera.updateProjectionMatrix();
this.renderer.setSize(window.innerWidth, window.innerHeight);
}
render() { //渲染
if (this.stats) this.stats.update();
this.renderer.render(this.scene, this.camera);
}
animate() {
this.render()
requestAnimationFrame(this.animate.bind(this));
}
basicfloor() { //创建地板
var planeGeometry = new THREE.PlaneGeometry(100, 100);
var planeMaterial = new THREE.MeshLambertMaterial({
color: 0xaaaaaa
});
var plane = new THREE.Mesh(planeGeometry, planeMaterial);
plane.rotation.x = -0.5 * Math.PI;
plane.position.y = -0;
//告诉底部平面需要接收阴影
plane.receiveShadow = true;
this.scene.add(plane);
}
lambertBox() {
var cubeGeometry = new THREE.BoxGeometry(10, 10, 10);
var cubeMaterial = new THREE.MeshLambertMaterial({
color: 0x00ffff
});
let cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
cube.position.x = 5;
cube.position.y = 5;
cube.position.z = -5;
//告诉立方体需要投射阴影
cube.castShadow = true;
this.scene.add(cube);
}
}