import * as THREE from 'three' import { DoubleSide, PointLightHelper } from 'three'; import { OrbitControls } from 'three/addons/controls/OrbitControls.js'; import model from './assets/g.gltf' import pic from './assets/b.jpg' import mypic from './assets/mypic.png' import Moon from './assets/moon.jpeg' import './App.css' import {GLTFLoader} from 'three/examples/jsm/loaders/GLTFLoader' function App() { const scene = new THREE.Scene(); const textureLoader = new THREE.TextureLoader(); const backgroundTexture = textureLoader.load( 'https://images.unsplash.com/photo-1534796636912-3b95b3ab5986?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1171&q=80'); scene.background = backgroundTexture; const camera = new THREE.PerspectiveCamera(75,window.innerWidth / window.innerHeight , 0.1 , 1000); const renderer = new THREE.WebGLRenderer(); renderer.setSize(window.innerWidth , window.innerHeight); document.getElementById('cont').appendChild(renderer.domElement); camera.position.z = 5 const geometry = new THREE.TorusGeometry(10,1,30) const material = new THREE.MeshStandardMaterial({ color: '#724f9555' ,side : DoubleSide}) const Light = new THREE.AmbientLight('#fff',0.7) //Light.position.set(20, 20, 20) scene.add(Light) const mech = new THREE.Mesh(geometry, material) scene.add(mech) function addStars() { const startgeo = new THREE.SphereGeometry(0.25, 1, 5) const starmat = new THREE.MeshBasicMaterial({ color: '#fff' }) const star = new THREE.Mesh(startgeo, starmat) const [x, y, z] = Array(3).fill().map(() => THREE.MathUtils.randFloatSpread(300) ) star.position.set(x, y, z) if (camera.position.z <= 30) { star.visible = true; } else { star.visible = false; } scene.add(star) } Array(500).fill().forEach(addStars) const megeo = new THREE.PlaneGeometry(3, 3) const memat = new THREE.MeshStandardMaterial({ map : new THREE.TextureLoader().load(mypic) , side : DoubleSide}) const me = new THREE.Mesh(megeo, memat) scene.add(me) const moongeo = new THREE.SphereGeometry(5, 30, 30) const moonmat = new THREE.MeshStandardMaterial({ map: new THREE.TextureLoader().load(Moon) }) const moon = new THREE.Mesh(moongeo, moonmat) scene.add(moon) moon.position.y = -3 moon.position.z = 10 moon.position.x = -8 window.addEventListener('resize', () => { camera.aspect = window.innerWidth / window.innerHeight camera.updateProjectionMatrix() renderer.setSize(window.innerWidth , window.innerHeight) }) window.addEventListener('mousemove', (e) => { me.rotation.x = e.clientY * 0.001 me.rotation.y = e.clientX * 0.001 + 3 }) window.addEventListener('scroll', () => { var top = document.body.getBoundingClientRect().top console.log(top) moon.rotation.x += 0.05 moon.rotation.y += 0.005 moon.rotation.z += 0.05 if (top <= -765) { camera.position.z = 45 } else { camera.position.z = -top * 0.05 + 5 } }) function television() { const telegeo = new THREE.PlaneGeometry(5, 5) const telemat = new THREE.MeshBasicMaterial({ color: '#111' ,side : DoubleSide}) const teleRight = new THREE.Mesh(telegeo, telemat) teleRight.rotation.y = 1.57 teleRight.position.x = 5 teleRight.position.z = 30 const telegeo1 = new THREE.PlaneGeometry(5, 5) const telemat1 = new THREE.MeshBasicMaterial({ color: '#111' ,side : DoubleSide}) const teleLeft = new THREE.Mesh(telegeo1, telemat1) teleLeft.rotation.y = 1.57 teleLeft.position.x = -5 teleLeft.position.z = 30 const telegeo2 = new THREE.PlaneGeometry(10, 5) const telemat2 = new THREE.MeshBasicMaterial({ color: '#111' ,side : DoubleSide}) const teleBottom = new THREE.Mesh(telegeo2, telemat2) teleBottom.rotation.x = 1.57 teleBottom.position.y = -2.5 teleBottom.position.z = 30 const telegeo3 = new THREE.PlaneGeometry(10, 5) const telemat3 = new THREE.MeshBasicMaterial({ color: '#111' ,side : DoubleSide}) const teleTop = new THREE.Mesh(telegeo3, telemat3) teleTop.rotation.x = 1.57 teleTop.position.y = 2.5 teleTop.position.z = 30 const telegeo4 = new THREE.PlaneGeometry(10, 5) const telemat4 = new THREE.MeshBasicMaterial({ color: '#ffffff2f',transparent: true, opacity: 0.5 ,side : DoubleSide}) const teleface = new THREE.Mesh(telegeo4, telemat4) teleface.position.z = 32 scene.add(teleLeft) scene.add(teleRight) scene.add(teleTop) scene.add(teleBottom) scene.add(teleface) } const loader = new GLTFLoader() loader.load(model, (gltf) => { scene.add( gltf.scene ); }) function animate() { requestAnimationFrame(animate) renderer.render(scene, camera) mech.rotation.y += 0.001 mech.rotation.x += 0.005 mech.rotation.z += 0.005 camera.lookAt(0, 0, 0) } animate() television() return (