如何使用 GSAP 将 Three.js 动画对象移动到右侧而不覆盖 HTML 文本？

问题描述 投票：0回答：1

我是网页设计新手，所以如果这是一个基本问题，请原谅我。我在 Three.js 中有一个动画对象，我想使用 GSAP 将其移动到屏幕的左侧。我的屏幕左侧还有一条文字“Hello”。当 GSAP 动画移动动画对象时，它正在移动整个场景（移动时它会短暂覆盖 HTML 文本）。是否有办法只移动对象而不是整个场景或保持 HTML 文本始终可见？

这是 Three.js 代码。

import * as THREE from 'three';
import {OrbitControls} from 'three/examples/jsm/controls/OrbitControls.js';
import {GLTFLoader} from 'three/examples/jsm/loaders/GLTFLoader.js';
import {RGBELoader} from 'three/examples/jsm/loaders/RGBELoader.js';

// Scene 1 - Landing Page 

container = document.getElementById( 'canvas' );

document.body.appendChild( container );

const renderer = new THREE.WebGLRenderer({antialias: true});

renderer.setSize(window.innerWidth, window.innerHeight);

container.appendChild( renderer.domElement );

const scene = new THREE.Scene();

const camera = new THREE.PerspectiveCamera(
    45,
    window.innerWidth / window.innerHeight,
    0.1,
    700
);

const orbit = new OrbitControls(camera, renderer.domElement);

camera.position.x = 90
camera.position.y = 200
camera.position.z = 250
orbit.update();

//const grid = new THREE.GridHelper(30, 30);

const gltfLoader = new GLTFLoader();

const rgbeLoader = new RGBELoader();

renderer.linearEncoding = THREE.SRGBColorSpace;
renderer.toneMapping = THREE.ACESFilmicToneMapping;
renderer.toneMappingExposure = 4;

let car;

rgbeLoader.load('./assets/MR_INT-005_WhiteNeons_NAD.hdr', function(texture) {
    texture.mapping = THREE.EquirectangularReflectionMapping;
    scene.environment = texture;

    gltfLoader.load('./assets/scene.gltf', function(gltf) {
        const model = gltf.scene;
        scene.add(model);
        car = model;
    });
});

function animate(time) {
    if(car)
        car.rotation.y = - time / 3000;
    renderer.render(scene, camera);
}

renderer.setAnimationLoop(animate);

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

还有我与 CSS 一起创建的 HTML。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./style.css"> 
</head>
<body>
    <div id="canvas"></div>
    <div class="text-container">
        <div class="title">
            <h1>Hello</h1>
        </div>
    </div>
<body>
    <script src="./js/scripts.js" type="module"></script>
    <script src="./js/app.js" type="module"></script>
    <!--
        npm install @parcel/config-default -d
        
        "staticFiles": {
    "staticOutPath": "static"
    }
    -->
</body>
</html>

@import url('https://fonts.googleapi.com/css2?family=Montserrat&display=swap');
html {
    background: black;
    scroll-behavior: smooth;
  }
  
body {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    overflow-x: hidden;
    overflow-y: hidden;
  }

.canvas{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.text-container{
    position: absolute;
    top: 50%;
    left: 50;
    width: 50%;
    height: auto;
}

.title{
    color: whitesmoke
}

.title h1{
    color:whitesmoke
}

最后是基本的 GSAP 脚本。

// GSAP Animations 
import { gsap } from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";

gsap.registerPlugin(ScrollTrigger);

gsap.to("#canvas",{
    x: 350,
    duration: 2,
    delay: 1
});
html css three.js gsap
1个回答
0
投票

检查这个

<div class="canvas-container">
      <canvas class="webglHH"> </canvas>
    </div>
    <div class="text-container">
      <div class="title">
        <h1>Hello</h1>
      </div>
    </div>

* {
  margin: 0;
  padding: 0;
}

html,
body {
  overflow: hidden;
}

.webglHH {
  position: fixed;
  top: 0;
  left: 0;
  outline: none;
}

.canvas-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.text-container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 50%;
  height: auto;
}

.title h1 {
  color: yellow;
  font-size: 52px;
}

import * as THREE from "three";
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
import { GLTFLoader } from "three/addons/loaders/GLTFLoader.js";
import { gsap } from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";

gsap.registerPlugin(ScrollTrigger);

const scene = new THREE.Scene();
scene.background = new THREE.Color(0x800080);

const sizes = {
  width: window.innerWidth,
  height: window.innerHeight,
};

const canvas = document.querySelector("canvas.webglHH");

const camera = new THREE.PerspectiveCamera(
  75,
  window.innerWidth / window.innerHeight,
  0.1,
  1000
);
camera.position.z = -1;

const renderer = new THREE.WebGLRenderer({
  canvas: canvas,
  antialias: true,
});
renderer.setSize(sizes.width, sizes.height);
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
renderer.render(scene, camera);
const ambientLight = new THREE.AmbientLight(0xffffff, 1.0);
scene.add(ambientLight);
const directionalLight = new THREE.DirectionalLight(0xffffff, 1.0);
scene.add(directionalLight);
const loader = new GLTFLoader();
let mesh;

loader.load("REACT.glb", (gltf) => {
  mesh = gltf.scene;
  mesh.scale.x = 10;
  mesh.scale.y = 10;
  scene.add(mesh);
});

const controls = new OrbitControls(camera, canvas);
controls.enableDamping = true;
controls.enabled = true;

gsap.to(".canvas-container", {
  x: 350,
  duration: 3,
  delay: 1,
  repeat: -1,
  yoyo: true,
});

function resize() {
  sizes.width = window.innerWidth;
  sizes.height = window.innerHeight;

  camera.aspect = sizes.width / sizes.height;
  camera.updateProjectionMatrix();

  renderer.setSize(sizes.width, sizes.height);
}

window.addEventListener("resize", () => {
  resize();
});

function animate() {
  requestAnimationFrame(animate);
  controls.update();
  renderer.render(scene, camera);
}
animate();
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.