master

分支 (1)

管理

管理

master

d3-project
/
控制立方体.html

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
 <style type="text/css">
 html, body {
  margin: 0;
  height: 100%;
 }

 canvas {
  display: block;
 }

 </style>
</head>
<body onload="draw();">

</body>
<script src="http://www.yanhuangxueyuan.com/3D/example/three.min.js"></script>
<!-- <script src="three.js"></script> -->
<!-- <script src="OrbitControls.js"></script> -->
<script src='http://www.yanhuangxueyuan.com/threejs/examples/js/controls/OrbitControls.js'></script>
<!-- <script src="examples/js/libs/stats.min.js"></script>
<script src="examples/js/libs/dat.gui.min.js"></script> -->
<script>
	var loader = new THREE.TextureLoader();
	loader.setCrossOrigin( "Anonymous" );
	 var renderer;
	 function initRender() {
	 	//antialias 是否执行抗锯齿
		 renderer = new THREE.WebGLRenderer({antialias:true});
		 renderer.setSize(window.innerWidth, window.innerHeight);
		 //告诉渲染器需要阴影效果
		 renderer.shadowMap.enabled = true;
		 renderer.shadowMap.type = THREE.PCFSoftShadowMap; // 默认的是，没有设置的这个清晰 THREE.PCFShadowMap
		 document.body.appendChild(renderer.domElement);
	 }

	 var camera;
	 function initCamera() {
		 camera = new THREE.PerspectiveCamera(45, window.innerWidth/window.innerHeight, 0.1, 1000);
		 camera.position.set(100, 15, 0);
		 camera.lookAt(new THREE.Vector3(0,0,0));
		 // controls.target   获取camera相机lookat的坐标点
	 }

	 var scene;
	 function initScene() {
	 	scene = new THREE.Scene();
	 }


	 var light;
	 function initLight() {
		 scene.add(new THREE.AmbientLight(0xffffff));

		 // light = new THREE.PointLight(0xffffff);
		 // light.position.set(30,60,1000);

		 // //告诉平行光需要开启阴影投射
		 // light.castShadow = true;

		 // scene.add(light);
	 }
	 function creatCube(url,positionX,positionY,positionZ){
	 	if(url){
	 		var normal = loader.load(url);
		 	//告诉立方体需要投射阴影
			var material = new THREE.MeshPhongMaterial({
	            map:normal
	        });
	 	}else{
	 		var normal = loader.load(url);
		 	//告诉立方体需要投射阴影
			var material = new THREE.MeshLambertMaterial({color:0xffff00});
	 	}

        material.bumpScale = 0.03;
		 var cubeGeometry = new THREE.CubeGeometry(10,10,10); //长宽高，分别对应x,y,z的长度
		 // var cubeMaterial2 = new THREE.MeshLambertMaterial({color:0xff0000});

		let cube = new THREE.Mesh(cubeGeometry, material);

		 //告诉立方体需要投射阴影
		 cube.castShadow = true;
		 cube.position.set(positionX,positionY,positionZ);
		 scene.add(cube);
		 renderer.render( scene, camera );
	 }

	var cube;
	 function initModel() {

		 //辅助工具
		 var helper = new THREE.AxisHelper(15);
		 scene.add(helper);

		creatCube("./1111.png",-6,5,5);
		creatCube("./noneUser.jpg",6,5,5);
		creatCube("",18,5,5);
		 //底部平面
		 var normal = loader.load('./20210329171349.png');
		 var planeGeometry = new THREE.PlaneGeometry(1000,1000);
		 // var planeMaterial = new THREE.MeshStandardMaterial({color:0xffffff});
		 var planeMaterial = new THREE.MeshStandardMaterial({map:normal});
		 var plane = new THREE.Mesh(planeGeometry, planeMaterial);

		 plane.rotation.x = - 0.5 * Math.PI;
		 // plane.position.y = - 0;
		 // plane.rotation.z = - 0.5 * Math.PI;
		 //告诉底部平面需要接收阴影
		 plane.receiveShadow = true;

		 scene.add(plane);
	 }

	 function render() {

		// cube.rotation.x += 0.01;
		// cube.rotation.y += 0.01;
		// cube.rotation.z += 0.01;
	 	renderer.render( scene, camera );


	 }
	 var controls;
	 function initControls(){
	 	controls = new THREE.OrbitControls(camera,renderer.domElement);//创建控件对象
		controls.addEventListener('change', render);//监听鼠标、键盘事件
	 }
	 //窗口变动触发的函数
	 function onWindowResize() {

		 camera.aspect = window.innerWidth / window.innerHeight;
		 camera.updateProjectionMatrix();
		 renderer.setSize( window.innerWidth, window.innerHeight );

	 }


	 var animate = function () {
	 	// controls.update();
	 	requestAnimationFrame( animate );
		render() ;

	};
	function draw() {
		initRender();
		initScene();
		initCamera();
		initLight();
		initModel();
		animate();
		render();
		initControls();
	 	window.onresize = onWindowResize;
	}
</script>
</html>