From d10cd883c8b57ff1c205999c3d8eb3978c533926 Mon Sep 17 00:00:00 2001 From: ziiii <98496708+ziiii@users.noreply.github.com> Date: Mon, 17 Jun 2024 00:21:05 -0400 Subject: [PATCH] Add files via upload --- index.html | 41 ++++++++++ index.js | 229 +++++++++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 270 insertions(+) create mode 100644 index.html create mode 100644 index.js diff --git a/index.html b/index.html new file mode 100644 index 0000000..829aba7 --- /dev/null +++ b/index.html @@ -0,0 +1,41 @@ + + + + + + Document + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/index.js b/index.js new file mode 100644 index 0000000..9418f8c --- /dev/null +++ b/index.js @@ -0,0 +1,229 @@ + +//import * as THREE from 'three'; +import * as THREE from "https://cdn.skypack.dev/three@0.129.0/build/three.module.js"; +import { GLTFLoader } from "https://cdn.skypack.dev/three@0.129.0/examples/jsm/loaders/GLTFLoader.js"; +import { OrbitControls } from 'https://cdn.jsdelivr.net/npm/three@0.161.0/examples/jsm/controls/OrbitControls.js'; + + +const modelPosZ=600; +const cameraPosZ=modelPosZ+850; //850 +let logoDisappear=false; +let magicPosZ=modelPosZ; + +//load the video +let video = document.getElementById('video'); +let videoTexture = new THREE.VideoTexture(video); +videoTexture.minFilter = THREE.LinearFilter; +videoTexture.magFilter = THREE.LinearFilter; +// const tl = gsap.timeline(); +let scanModel; +let logoModel; +let blenderModel; + +const movieMaterial = new THREE.MeshBasicMaterial({ + map: videoTexture, + side: THREE.FrontSide, + toneMapped: false, +}) + + +const scene = new THREE.Scene(); +const sizes = (window.innerWidth, window.innerHeight); +const near = 0.1; +const far = 3000; +const camera = new THREE.PerspectiveCamera(85, window.innerWidth / window.innerHeight, near, far); +camera.position.set(70, -40, cameraPosZ); +scene.add(camera); + + +const renderer = new THREE.WebGLRenderer({ alpha: true }); +renderer.setClearColor(0x000000); // Set backgroxsund color to black +renderer.setSize(window.innerWidth, window.innerHeight); +renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2)); +document.body.appendChild(renderer.domElement); + + + +const logoStartX=35; +const logoStartY=-45; +const logoStartZ=1200; + +//LOAD LOGO pink +const loader2= new GLTFLoader(); +loader2.load('asset/logoModel-PINK/logo copy.gltf', function (gltf) { + logoModel=gltf.scene; + scene.add(gltf.scene); + gltf.scene.scale.set(600, 600, 600); + gltf.scene.position.set(logoStartX, logoStartY, logoStartZ); + console.log(gltf.scene); + + }, function (xhr) { + console.log((xhr.loaded / xhr.total * 100) + "%"); + }, function (error) { + console.error('An error occurred:', error); + + }); + +//load gallery + const loader = new GLTFLoader(); +loader.load('asset/gallery_newscan/untitled.gltf', function (gltf) { + scanModel=gltf.scene; + scene.add(gltf.scene); + gltf.scene.scale.set(100, 100, 100); + gltf.scene.position.set(20, -200, modelPosZ); + gltf.scene.rotation.y = Math.PI /80; + console.log(gltf); + // logoModel.visible=false; + // gltf.scene.visible=false; + fadeOut(logoModel); +// if(logoDisappear==true){ + // playTimeline(); +// } +}, function (xhr) { + console.log((xhr.loaded / xhr.total * 100) + "%"); +}, function (error) { + console.error('An error occurred:', error); +}); + + +//load BLENDER mesh +const loader3 = new GLTFLoader(); +loader3.load('asset/galleryGLTF/gallerymodel.gltf',function(gltf){ + blenderModel=gltf.scene; + // scene.add(gltf.scene); + gltf.scene.scale.set(1,1,1); + gltf.scene.position.set(30,-200,magicPosZ); + // gltf2.scene.rotation.y=Math.PI /10; + console.log(gltf); + // gltf.scene.visible=magicWorld; + },function(xhr){ + console.log((xhr.loaded/xhr.total*100)+"%"); + },function(error){ + console.error('An error occurred:', error); + + }); + + + const material = new THREE.MeshBasicMaterial({ color: 0xffffff, transparent: true, opacity: 0.5 }); + + +//ADD lighting +const topLight = new THREE.SpotLight(0xffffff, 0.8, 200,0.5); // (color, intensity) +topLight.position.set(logoStartX, logoStartY, logoStartZ+100) //top-left-ish +topLight.castShadow = true; +scene.add(topLight); +const spotLightHelper = new THREE.SpotLightHelper( topLight ); +//scene.add( spotLightHelper ); + +const ambientLight = new THREE.AmbientLight(0xffffff, 1.5); +ambientLight.position.set(30, 20, 500); +scene.add(ambientLight); + + +//Orbitcontrols +const controls = new OrbitControls( camera, renderer.domElement ); +//camera.position.set(40,-40, 850 ); +//controls.update(); + + + +//fade out logo +function fadeOut(object) { + let opacity = 1; + + function deOpacity() { + if (opacity > 0) { + opacity -= 0.01; + object.traverse(function (child) { + if (child.isMesh) { + child.material.transparent = true; + child.material.opacity = opacity; + } + }); + requestAnimationFrame(deOpacity); + + + } else { + scene.remove(object); + playTimeline(); //after the fading out is done, start animation + } + } + deOpacity(); + +} + + + + + + +//ANIMATE +function animate() { + requestAnimationFrame(animate); + //controls.update(); + +if(logoModel){ + logoModel.rotation.y+=0.02; +} + renderer.render(scene, camera); +} +animate(); + + +//TIMELINE animation 一个完了再另一个 +// window.addEventListener('mousedown', function () { + + function playTimeline(){ + const tl = gsap.timeline(); + + tl.to(camera.position, { //MOVE IN from gate + z: cameraPosZ-900, + duration: 4.5, + // ease: "power2.inOut", + onUpdate: () => { + console.log("Turning: ", camera.rotation.y); + camera.updateProjectionMatrix(); // Ensure camera updates + } + }) + + .to(camera.rotation, { + y: 0.9, // turn left + duration: 2.5 + }) + + + .to(camera.rotation, { + y: 0, // Turn right + duration: 3 + + }) + // .to(camera.position, { + // z: cameraPosZ-900, + // duration: 2.5 + // },"<") + + + .to(camera.position, { + z: cameraPosZ-1100, + x:120, + y:-60, + duration: 2.5 + }) + + + .to(camera.position, { + z: cameraPosZ-1400, + duration: 1.5 + }) + + + + + +; + + } + + + +