master

分支 (1)

管理

管理

master

three_demo_001_pearls
/
index.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" />
		<link rel="stylesheet"
			href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
				box-sizing: border-box;
			}

			/* 这里公共变量 + font-family */
			:root {
				--primary-color: #ff434f;
				--secondary-color: #e3e3e3;
				--text-color-lightest: #e7e9ec;
				--text-color-darker: #2e2e2e;
				--text-color-dark: #494949;
				--text-color-gray: #8b8b8b;
				--text-color-dark-gray: #727272;
				--text-color-light-gray: #c6c6c6;
				--backdrop-color: rgba(42, 42, 42, 0.69);
				--width: 800px;
				--height: 600px;
			}

			body {
				overflow: hidden;
				/* 		display: flex;
				align-items: center;
				justify-content: center; */

			}

			.videoBox {
				position: absolute;
				width: 100%;
				height: 100%;
				display: flex;
				align-items: center;
				justify-content: center;
				/* 居中 */
				background-color: rgba(0, 0, 0, .8);
				display: none; // 这里有问题！！关闭按钮如何一次性绑定全部的窗口？- 单独也可以。。

			}

			.videoBox #closeBox_video {
				transform: translate(10%, -300%);
				color: white;
				font-size: 56px;
				/* position: absolute; */
				z-index: 1;
				cursor: pointer;
			}

			.videoBox .closeBox_video:hover,
				{
				color: var(--primary-color);
			}

			.selectLanBox {
				position: absolute;
				right: 10%;
				z-index: 1;
			}

			.introBox {
				position: absolute;

				width: 100%;
				height: 100%;
				padding: 0 10%;
				background-color: rgba(0, 0, 0, .8);
				display: flex;
				justify-content: space-around;
				align-items: center;
			}

			.introBox .imgBox {
				/* 				margin-left: 20%;
				margin-top: 10%; */

				/* background-color: pink; */
			}

			.introBox .imgBox img {
				width: 200px;
				height: 200px;
				object-fit: cover;
				border-radius: 50%;
			}

			.introBox .inlineBox {
				width: 2px;
				height: 40px;
				/* background-color: pink; */
			}

			.infoBox {
				color: white;
			}

			.modelBox {
				position: absolute;
				background-color: rgba(0, 0, 0, .8);
				width: 100%;
				height: 100%;
				z-index: 1;
			}

			.modelBox #model {}

			/* 移入出现待解决！  */
			.audioBox{
			  position: absolute;
			  top: 0;
			  left: 100px;
			}
		</style>
	</head>
	<body>
		<!-- 需要一个封面 -->

		<!-- 中英切换按钮 -->
		<div class="selectLanBox">
			<!-- 下拉框按钮 -->
			<!-- 后期该ui框架 -->
			<select id='selectBtn'>
				<option value="中">中</option>
				<option value="En">En</option>
			</select>

		</div>

		<!-- 展示模型 -->
<!-- 		<div class="modelBox">
			<canvas id="model" width="800" height="600"></canvas>
		</div> -->


		<!-- 文字信息 -->
		<div class="introBox showInfo">

			<!-- 左图片右文字 -->
			<div class="imgBox">
				<img src="./img/Pearl%20S%20Buck.jpg" alt="">
			</div>


			<div class="infoBox">
				<!-- 考虑中英切换 - 用js写入 -->
				<div class="infoHeadBox">
					<span id="infoHead"></span>
				</div>
				<div class="infoBodyBox">
					<span id="infoBody"></span>
				</div>
			</div>

			<div id="closeBox_Text" style="color: white; margin-top: -200px; font-size: 56px; cursor: pointer;">
				X
			</div>

		</div>

		<div class="audioBox">
			<audio id='media' controls="controls" height="100" width="100">
			  <source src="https://www.w3school.com.cn/i/song.mp3" type="audio/mp3" />
			  <source src="https://www.w3school.com.cn/i/song.ogg" type="audio/ogg" />
			<embed height="100" width="100" src="https://www.w3school.com.cn/i/song.mp3" />
			</audio>
		</div>


		<!-- 视频 滑动效果！..先能点！-->

		<div class="videoBox showInfo" id='videoBox'>

			<video width="800" height="" controls="controls">
				<source src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/61062/rin-SD.mp4" type="video/mp4">
				</source>
				<object width="" height="" type="application/x-shockwave-flash" data="myvideo.swf">
					<param name="movie" value="myvideo.swf" />
					<param name="flashvars" value="autostart=true&amp;file=myvideo.swf" />
				</object>
				当前浏览器不支持 video直接播放，点击这里下载视频： <a href="myvideo.webm">下载视频</a>
			</video>
			<div id="closeBox_video" >
				<!-- 加个icon -->
				<!-- <i class="fa fa-remove fa-inverse fa-5x"></i> -->
				X
			</div>
		</div>
		<div class="InfoBox"></div>


		<script type="x-shader/x-vertex" id="vertexShader"> // script也能添加id。。

			varying vec3 vWorldPosition;

			void main() {

				vec4 worldPosition = modelMatrix * vec4( position, 1.0 );
				vWorldPosition = worldPosition.xyz;

				gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );

			}

		</script>

		<script type="x-shader/x-fragment" id="fragmentShader">

			uniform vec3 topColor;
			uniform vec3 bottomColor;
			uniform float offset;
			uniform float exponent;

			varying vec3 vWorldPosition;

			void main() {

				float h = normalize( vWorldPosition + offset ).y;
				gl_FragColor = vec4( mix( bottomColor, topColor, max( pow( max( h , 0.0), exponent ), 0.0 ) ), 1.0 );

			}

		</script>


		<!-- 找现有库 -->
		<!-- 添加dom - ok 和 精灵 - music - 移动 -->
		<!-- 点击事件来了 - 后期加animation -->
		<!-- 图标库 -->

		<script src="https://cdnjs.cloudflare.com/ajax/libs/tween.js/18.6.4/tween.umd.js"></script>
		<script type="module">
			import * as THREE from 'https://cdn.jsdelivr.net/npm/three@0.126/build/three.module.js';
			import {
				OrbitControls
			} from 'https://cdn.jsdelivr.net/npm/three@0.126/examples/jsm/controls/OrbitControls.js';
			import {
				GLTFLoader
			} from 'https://cdn.jsdelivr.net/npm/three@0.126/examples/jsm/loaders/GLTFLoader.js';
			import {
				RoughnessMipmapper
			} from 'https://cdn.jsdelivr.net/npm/three@0.126/examples/jsm/utils/RoughnessMipmapper.js';
			import Stats from 'https://cdn.jsdelivr.net/npm/three@0.126/examples/jsm/libs/stats.module.js';

			// import{}

			let camera, light, controls, scene, renderer, stats;

			// 点击事件
			const raycaster = new THREE.Raycaster();
			const mouse = new THREE.Vector2(1, 1);


			init();
			animate();

			// 用数组走。。
			function moveCamera(pos, lookAt) {

				// const tweenCamera1 = new TWEEN.Tween( {x: -50, y: 65, z: 100, lookAtX: 0, lookAtY: 0, lookAtZ: 0} )
				const tweenCamera1 = new TWEEN.Tween( {x: camera.position.z, y: camera.position.y, z: camera.position.z, lookAtX: lookAt.x, lookAtY: lookAt.y, lookAtZ: lookAt.z} )
				  .to( {x: pos.x + 1, y: pos.y + 2, z: pos.z + 1, lookAtX: lookAt.x, lookAtY: lookAt.y, lookAtZ: lookAt.z}, 1000 )

				  // .to( {x: 30, y: 20, z: 50, lookAtX: 0, lookAtY: 0, lookAtZ: 0}, 6000 )
				// const tweenCamera2 = new TWEEN.Tween( {x: -450, y: 10, z: 600, lookAtX: -35, lookAtY: 10, lookAtZ: 100} )
				//   .to( {x: 350, y: 10, z: 400, lookAtX: 35, lookAtY: 10, lookAtZ: 100}, 6000 )

				// tweenCamera1.chain(tweenCamera2)
				// tweenCamera2.chain(tweenCamera1)

				const updateCamera = function (object = {x: number, y: number, z:number, lookAtX:number,lookAtY:number, lookAtZ:number}, elapsed= number) {
				  camera.position.set(object.x, object.y, object.z)
				  camera.lookAt(new THREE.Vector3(object.lookAtX, object.lookAtY, object.lookAtZ))
				}
				tweenCamera1.onUpdate(updateCamera)
				// tweenCamera2.onUpdate(updateCamera)
				// 更新camera矩阵

				tweenCamera1.start()

			}


			function init() {
				scene = new THREE.Scene();
				scene.background = new THREE.Color().setHSL( 0.6, 0, 1 );
				scene.fog = new THREE.Fog( scene.background, 1, 5000 );
				renderer = new THREE.WebGLRenderer({
					antialias: true
				});
				renderer.shadowMap.enabled = true;
				renderer.setPixelRatio(window.devicePixelRatio);
				renderer.setSize(window.innerWidth, window.innerHeight);
				document.body.appendChild(renderer.domElement);

				// camera = new THREE.PerspectiveCamera(5, window.innerWidth / window.innerHeight, 1, 1000);
				// camera.position.set(10, 80, 500);

				// CAMERA
				camera = new THREE.PerspectiveCamera(30, window.innerWidth / window.innerHeight, 1, 1500);
				camera.position.set(-35, 70, 100);
				camera.lookAt(new THREE.Vector3(0, 0, 0));


				  // get - lookAtX - actually it is used for camera.lookAt(new THREE.Vector3(object.lookAtX, object.lookAtY, object.lookAtZ))
				// const tweenCamera1 = new TWEEN.Tween( {x: -350, y: 85, z: 400, lookAtX: 0, lookAtY: 0, lookAtZ: 0} )
				//   .to( {x: 450, y: 66, z: -600, lookAtX: 0, lookAtY: 0, lookAtZ: 0}, 7000 )
				// const tweenCamera2 = new TWEEN.Tween( {x: -450, y: 10, z: 600, lookAtX: -35, lookAtY: 10, lookAtZ: 100} )
				//   .to( {x: 350, y: 10, z: 400, lookAtX: 35, lookAtY: 10, lookAtZ: 100}, 6000 )

				// tweenCamera1.chain(tweenCamera2)
				// tweenCamera2.chain(tweenCamera1)

				// const updateCamera = function (object = {x: number, y: number, z:number, lookAtX:number,lookAtY:number, lookAtZ:number}, elapsed= number) {
				//   camera.position.set(object.x, object.y, object.z)
				//   camera.lookAt(new THREE.Vector3(object.lookAtX, object.lookAtY, object.lookAtZ))
				// }
				// tweenCamera1.onUpdate(updateCamera)
				// tweenCamera2.onUpdate(updateCamera)

				// tweenCamera1.start()


				stats = new Stats();
				document.body.appendChild(stats.dom);

				controls = new OrbitControls(camera, renderer.domElement);
				controls.enableDamping = true;
				controls.dampingFactor = 0.05;
				controls.screenSpacePanning = false;
				controls.minDistance = 10;
				controls.maxDistance = 500;
				controls.maxPolarAngle = Math.PI / 2;


				let hemiLight = new THREE.HemisphereLight(0xffffff, 0xffffff, 0.61);
				hemiLight.position.set(0, 50, 0);
				scene.add(hemiLight);

				// const hemiLight = new THREE.HemisphereLight( 0xffffff, 0xffffff, 0.6 );
				// hemiLight.color.setHSL( 0.6, 1, 0.6 );
				// hemiLight.groundColor.setHSL( 0.095, 1, 0.75 );
				// hemiLight.position.set( 0, 50, 0 );
				// scene.add( hemiLight );

				let d = 8.25;
				let dirLight = new THREE.DirectionalLight(0xffffff, 0.54);
				dirLight.position.set(-8, 12, 8);
				dirLight.castShadow = true;
				dirLight.shadow.mapSize = new THREE.Vector2(1024, 1024);
				dirLight.shadow.camera.near = 0.1;
				dirLight.shadow.camera.far = 1500;
				dirLight.shadow.camera.left = d * -1;
				dirLight.shadow.camera.right = d;
				dirLight.shadow.camera.top = d;
				dirLight.shadow.camera.bottom = d * -1;
				scene.add(dirLight);

				const pointLightHelper = new THREE.PointLightHelper(dirLight);
				scene.add(pointLightHelper);

				// use of RoughnessMipmapper is optional
				const roughnessMipmapper = new RoughnessMipmapper(renderer);


				// SKYDOME

				const vertexShader = document.getElementById( 'vertexShader' ).textContent;
				const fragmentShader = document.getElementById( 'fragmentShader' ).textContent;
				const uniforms = {
					"topColor": { value: new THREE.Color( 0x0077ff ) },
					"bottomColor": { value: new THREE.Color( 0xffffff ) },
					"offset": { value: 33 },
					"exponent": { value: 0.6 }
				};
				uniforms[ "topColor" ].value.copy( hemiLight.color );

				scene.fog.color.copy( uniforms[ "bottomColor" ].value );

				const skyGeo = new THREE.SphereGeometry( 4000, 32, 15 );
				const skyMat = new THREE.ShaderMaterial( {
					uniforms: uniforms,
					vertexShader: vertexShader,
					fragmentShader: fragmentShader,
					side: THREE.BackSide
				} );

				const sky = new THREE.Mesh( skyGeo, skyMat );
				scene.add( sky );


				const loader = new GLTFLoader();
				// loader.load('https://assets.codepen.io/238794/meet-bob.obj', function (object) {
				// 任务设置材质。
				loader.load('./glb/test2.glb', function(gltf) {
					console.log(gltf)
					gltf.scene.traverse(function(child) {
						if (child.isMesh) {
							// roughnessMipmapper.generateMipmas(child.material)
						}
					});

					gltf.scene.position.set(0, 0, 2)
					gltf.scene.rotation.set(0, Math.PI, 0)

					scene.add(gltf.scene)


					// console.log(xhr.loaded / xhr.total * 100 + '% loaded');
				}, function(err) {
					console.error('An error happened');
				});

				window.addEventListener('resize', onWindowResize);
				document.addEventListener('mousemove', onMouseMove);
				document.addEventListener('click', onClick);

				const helper = new THREE.GridHelper(100, 10);
				helper.material.transparent = true;
				scene.add(helper);

				console.log('scene', scene)
				// const axisHelper = new THREE.AxesHelper(100);
				// scene.add(axisHelper);
			}


			function onClick(event) {
				// click - ok - add some music..不着急 - 先跳dom

				// update the picking ray with the camera and mouse position
				raycaster.setFromCamera(mouse, camera);

				// calculate objects intersecting the picking ray
				const intersects = raycaster.intersectObjects(scene.children, true);
				console.log('intersects', intersects[0].object.name)
				console.log('intersects', intersects[0], 'scene', scene) // xyz - move + lookAt

				let pos = intersects[0];

				// if(intersects[0].object.name !== '' && intersects[0].object.name !== 'Plane'){
				// 	moveCamera(pos.object.position, pos.object.position);
				// }

				// 因为我移动视角的时候 - camera的位置没有更新 - 需要先让camera的位置更新在执行 - how to 更新？？？
				if(intersects[0].object.name === 'desk') {
					moveCamera(pos.object.position, pos.object.position); // 这个还附带了界面 - 不好。。
					let introBoxBtn = document.querySelector('.introBox');
					introBoxBtn.style.display = 'flex';
				}

				if(intersects[0].object.name === 'video') {
					moveCamera(pos.object.position, pos.object.position);
					let introBoxBtn = document.querySelector('#videoBox');
					introBoxBtn.style.display = 'flex';
				}

				if(intersects[0].object.name === 'Cube030') {
					moveCamera({x:31, y:11, z:11}, pos.object.position);
				}

				// 播放音乐test
				if (intersects[0].object.name === "Cube008") {
				    let audio = document.getElementById("media");
				    if (audio.paused) {
				      audio.play();
				    } else {
				      audio.pause();
				    }
				  } else {
				    return;
				  }

				// 	for ( let i = 0; i < intersects.length; i ++ ) {

				// 		intersects[ i ].object.material.color.set( 0xff0000 );

				// 	}

			}

			function onMouseMove(event) {

				event.preventDefault();
				// //通过鼠标点击的位置计算出raycaster所需要的点的位置，以屏幕中心为原点，值的范围为-1到1.
				mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
				mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;

				//时刻计算
				// console.log('mouse-x, mouse-y', mouse.x, mouse.y);

			}

			function onWindowResize() {
				camera.aspect = window.innerWidth / window.innerHeight;
				camera.updateProjectionMatrix();
				renderer.setSize(window.innerWidth, window.innerHeight);
			}

			function animate() {
				requestAnimationFrame(animate);
				controls.update();
				render();
			}

			function render() {

				TWEEN.update();

				renderer.render(scene, camera);
				stats.update();
			}
		</script>

		<!-- 其他模型 -->

<!-- 		<script type="module">
			const scene = new THREE.Scene();
			const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

			const renderer = new THREE.WebGLRenderer();
			renderer.setSize(window.innerWidth, window.innerHeight);
			let canvas = document.querySelect('#model')
			canvas.appendChild(renderer.domElement);

			const geometry = new THREE.BoxGeometry();
			const material = new THREE.MeshBasicMaterial({
				color: 0x00ff00
			});
			const cube = new THREE.Mesh(geometry, material);
			scene.add(cube);

			camera.position.z = 5;

			const animate = function() {
				requestAnimationFrame(animate);

				cube.rotation.x += 0.01;
				cube.rotation.y += 0.01;

				renderer.render(scene, camera);
			};

			animate();
		</script>
 -->


		<!-- 界面相关 -->

		<script type="text/javascript">
			// 定义数据集
			let lan = true; // 中 - true， 英 - false
			let infoArr = {
				zhong: {
					firstInfo: {
						first_Head: '赛珍珠',
						first_Body: '赛珍珠是远近闻名的作家'
					}
				},
				en: {
					firstInfo: {
						first_Head: 'Pearl S Buck',
						first_Body: 'Pearl S Buck is a famous writer.'
					}
				}
			}

			let closeTextBtn = document.querySelector('#closeBox_Text'); // 只能有一个id。。。。
			let closeVideoBtn = document.querySelector('#closeBox_video'); // 只能有一个id。。。。

			// 这里采用公共类！
			let showInfo = document.querySelector('.introBox');
			let videoInfo = document.querySelector('.videoBox');
			// 可以消失了。
			closeTextBtn.addEventListener('click', function() {
				showInfo.style.display = 'none';
			})
			closeVideoBtn.addEventListener('click', function() {
				videoInfo.style.display = 'none';
			})

			// 写入消息
			let lanBtn = document.querySelector('#selectBtn');
			lanBtn.addEventListener('change', function(event) {
				// 找到了！
				let lanIndex = event.target.options.selectedIndex;
				console.log('select', event.target[lanIndex].innerText);
				lan = event.target[lanIndex].innerText === 'En' ? false : true;

				// 写入信息
				let infoHead = document.querySelector('#infoHead');
				let infoBody = document.querySelector('#infoBody');
				infoHead.innerText = lan ? infoArr.zhong.firstInfo.first_Head : infoArr.en.firstInfo.first_Head;
				infoBody.innerText = lan ? infoArr.zhong.firstInfo.first_Body : infoArr.en.firstInfo.first_Body;
				console.log('infoHead', infoHead, 'infoBody', infoHead)
			})

			// 写入信息 - 默认
			let infoHead = document.querySelector('#infoHead');
			let infoBody = document.querySelector('#infoBody');
			infoHead.innerText = lan ? infoArr.zhong.firstInfo.first_Head : infoArr.en.firstInfo.first_Head;
			infoBody.innerText = lan ? infoArr.zhong.firstInfo.first_Body : infoArr.en.firstInfo.first_Body;
			console.log('infoHead', infoHead, 'infoBody', infoHead)
		</script>


	</body>
</html>