实习日常记录

岗位   前端工程师    开始时间2022/06/23

---

Day1:2022/6/23

报道，办理相关手续，了解公司情况岗位职责，结识相关项目合作同事。

---

Day2:2022/6/24

1. 了解了项目具体任务，观看了最终效果预览图。
2. 通过three.js引擎创建的一个WebGL三维场景

three.js程序结构图树状图

 代码：

	function init() {
			// 创建场景
			var scene = new THREE.Scene();
			// 设置摄像机
			var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 2000)
			// 创建渲染器
			var renderer = new THREE.WebGLRenderer();
			// 设置渲染器的初始颜色
			renderer.setClearColor(new THREE.Color(0xFFFFFF));
			// 设置输出canvas画面的大小
			renderer.setSize(window.innerWidth, window.innerHeight)
			// 显示三维坐标系
			var axes = new THREE.AxisHelper(20)

			// 添加坐标系到场景中
			scene.add(axes);
			// 创建地面的几何体
			var planeGeometry = new THREE.PlaneGeometry(30, 20);
			// 给地面物体上色
			var planeMaterial = new THREE.MeshBasicMaterial({ color: 0xcccccc });
			// 创建地面
			var plane = new THREE.Mesh(planeGeometry, planeMaterial)
			// 物体移动位置
            plane.rotation.x = -0.5 * Math.PI;
			plane.position.x = 0;
			plane.position.y = 0;
			plane.position.z = 0;

			// 将地面添加到场景中
			scene.add(plane);

			// 定位相机，并且指向场景中心
			camera.position.x = -30;
			camera.position.y = 30;
			camera.position.z = 30;
			camera.lookAt(scene.position)

			// 将渲染器输出添加html元素中
			document.getElementById('webgl-output').appendChild(renderer.domElement);
			renderer.render(scene, camera)
		}
		window.onload = init

效果图：

---

双休在家继续研究 webGL three.js。 在原有基础上添加正方体，球，锥图形，并设置灯光，阴影,动画，且实现鼠标控制三维场景

代码：

//添加正方体
var cubeGeometry = new THREE.BoxGeometry(4, 4, 4);
var cubeMaterial = new THREE.MeshLambertMaterial({ color: 0xff0000 })
var cube = new THREE.Mesh(cubeGeometry, cubeMaterial);

cube.position.x = 0;
cube.position.y = 4;
cube.position.z = 2;

scene.add(cube)

//添加圆

var sphereGeometry = new THREE.SphereGeometry(6, 20, 20);
var spherMaterial = new THREE.MeshLambertMaterial({ color: 0xff0000 })
var sphere = new THREE.Mesh(sphereGeometry, spherMaterial)

sphere.position.x = 12;
sphere.position.y = 3;
sphere.position.z = 0;

scene.add(sphere)
//添加锥体
const geometry = new THREE.ConeGeometry( 5, 20, 32 );
const material = new THREE.MeshBasicMaterial( {color: 0xffff00} );
const cone = new THREE.Mesh( geometry, material );

cone.position.x = -15;
cone.position.y = 10;
cone.position.z = -5;
scene.add( cone );


//添加灯光
var spotLight=new THREE.SpotLight(0xFFFFFF);
spotLight.position.set(30,30,-30);
scene.add(spotLight);

//设置阴影
renderer.shadowMapEnabled = true;
spotLight.castShadow=true;
cube.castShadow = true;
sphere.castShadow = true;
cone.castShadow = true;
plane.castShadow = true;
plane.receiveShadow = true;


//请求动画帧实现动画
let T0=new Date();
	function render(){
	let T1=new Date()
	let t=T1-T0;
	T0=T1;
	renderer.render(scene, camera)
	cube.rotateY(0.001*t)
	window.requestAnimationFrame(render)
		}
    window.requestAnimationFrame(render)

//鼠标操控
var controls=new THREE.OrbitControls(camera,renderer.domElement);
 controls.addEventListener('change',()=>
	{
		renderer.render(scene,camera)
	})

效果图：

---

Day3:2022/06/27

添加阻尼、时钟控制动画、监听事件控件屏幕自适应

代码：

//添加阻尼
controls.enableDamping=true;
function render(){
    controls.update();
}

//时钟控制动画
const clock=new THREE.Clock();
function render(){
    let time = clock.getElapsedTime();
    let t2=time%5;
    let t1=time;
    cube.position.x =t2*5;
    sphere.position.z=t2*5;
}
//监听事件屏幕自适应
window.addEventListener("resize",()=>
			{
			camera.aspect=window.innerWidth/window.innerHeight;
			camera.updateProjectionMatrix();
			renderer.setSize(window.innerWidth,window.innerHeight);
			renderer.setPixelRatio(window.devicePixelRation);
})