当前位置：文江博客话题详情

JavaScript Canvas webGL three.js 前端

如何用three.js实现无缝轮播横幅效果（有网站示例）？

发布于 2022-09-07 22:51:18 字数 2737 浏览 21 评论 0

问题描述

想实现three.js官方示例网站 https://www.with.in/中的背景效果。

问题出现的环境背景及自己尝试过哪些方法

尝试了很多方法，目前实现了移动，但是没想出来怎么实现

相关代码

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/html">

<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>demo</title>
    <script type="text/javascript" src="js/jquery-1.10.1.min.js"></script>
    <script src="js/three.js" type="text/javascript" charset="utf-8"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/tween.js/16.3.5/Tween.min.js"></script>
    <style>
        canvas {
            width: 100%;
            height: 100%
        }
    </style>
</head>

<body>
    <script>
        var scene = new THREE.Scene();
        var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 5000);
        var renderer = new THREE.WebGLRenderer();
        renderer.setSize(window.innerWidth, window.innerHeight);
        document.body.appendChild(renderer.domElement);

        var img = new Image();
        img.src = 'img/2.jpeg';

        var crateTexture = new THREE.ImageUtils.loadTexture("img/2.jpeg");
        let geometry = new THREE.PlaneGeometry(img.width * 2, img.height);
        let material = new THREE.MeshBasicMaterial({
            map: crateTexture,
        });
        let rect = new THREE.Mesh(geometry, material);

        scene.add(rect);

        camera.position.z = 500;
        camera.position.y = 0;
        camera.position.x = 0;
        camera.up.x = 0;
        camera.up.y = 0;
        camera.up.z = 0;
        rect.rotation.x = -0.1;
        rect.rotation.y = -0.3;
        rect.rotation.z = -0.35;

        function render() {
            requestAnimationFrame(render);
            renderer.render(scene, camera);
        }

        //调用render方法
        render();

        var position2 = {
            x: 0
        }

        var tween2 = new TWEEN.Tween(position2);

        tween2.to({
            x: 200
        }, 500000);

        tween2.easing(TWEEN.Easing.Linear.None)
        tween2.start();
        animate();


        tween2.onUpdate(function () {
            rect.translateX(-this.x);
        });


        function animate() {
            requestAnimationFrame(animate);
            TWEEN.update();
        }
    </script>
</body>

你期待的结果是什么？实际看到的错误信息又是什么？

想实现three.js官方示例网站 https://www.with.in/中的背景效果。

收藏 0

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

评论（3）

风向决定发型 2022-09-14 22:51:18

这是用纯css3实现的，供参考；

预览地址：用純css实现圆环效果

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    *{
        padding: 0;
        margin: 0;
    }
    .spotlight {
      position: relative;
    }
    h1 {
        display: inline-block;
        text-transform: uppercase;
        letter-spacing: 4px;
        font-size: 84px;
        line-height: 96px;
        opacity: .1;
        font-size: 48px;
        line-height: 60px;
        font-weight: 100;
        margin-bottom: 36px;
    }
    span {
        display: block;
    }
    h1.searchable {
    position: absolute;
    left: 0;
    opacity: 1;
    -webkit-animation: spotlight 5s cubic-bezier(.455,.03,.515,.955);
    -moz-animation: spotlight 5s cubic-bezier(.455,.03,.515,.955);
    animation: spotlight 5s cubic-bezier(.455,.03,.515,.955);
    -webkit-animation-iteration-count: infinite;
    -moz-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    }
    @-webkit-keyframes spotlight {
        0% {
            clip-path: circle(47.5% at 0 33%);
        }
        45% {
            clip-path: circle(52.5% at 100% 33%);
        }
        50% {
            clip-path: circle(45% at 0 66%);
        }
        95% {
            clip-path: circle(55% at 100% 66%);
        }
        100% {
            clip-path: circle(47.5% at 0 33%);
        }
    }
</style>
</head>
<body>
    <div class="spotlight">
        <h1>
            <span>Page</span> 
            <span>Not</span> 
            <span>Found</span>
        </h1> 
        <h1 class="searchable">
            <span>Page</span> 
            <span>Not</span>
            <span>Found</span>
        </h1>
    </div>
</body>
</html>

忆悲凉 2022-09-14 22:51:18

用CSS实现岂不是更简便？

冰雪之触 2022-09-14 22:51:18

答非所问了，点进题主给的链接是404，所以忽略

css的，在主流浏览器中试试

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{margin:0;padding:0}
        .show{
            text-transform: uppercase;
            font-size: 84px;
            line-height: 96px;
            opacity: .1;
            color: #fff;
            width:300px;
        }
        #spotlight{
            display: block;
            width: 150px;
            height: 150px;
            position:absolute;
            top:50px;
            left:0;
            opacity: 1;
            overflow: hidden;
            border-radius: 50%;
        }
        #spotlightHelper{
            width: 150px;
            height: 150px;
            position:absolute;
            top:-50px;
        }
    </style>
</head>
<body style="background: #0c0a15">
<div>
    <div class="show">
        <span>Page</span>
        <span>Not</span>
        <span>Found</span>
    </div>
    <div class="show" id="spotlight">
        <div id="spotlightHelper">
            <span>Page</span>
            <span>Not</span>
            <span>Found</span>
        </div>
    </div>
</div>
<script>
    let sl=document.getElementById('spotlight'),
      slAttr=sl.getBoundingClientRect(),
      slW=slAttr.width,
      slH=slAttr.height;
    let slHelper=document.getElementById('spotlightHelper')
    document.onmousemove=function (e) {
      let curX=e.clientX-slW/2,curY=e.clientY-slH/2
      sl.style.cssText=`top:${curY}px;left:${curX}px;`
      slHelper.style.cssText=`top:${-curY}px;left:${-curX}px;`
    }
</script>
</body>
</html>

~没有更多了~

关于作者

暂无简介

0 文章

0 评论

23 人气

关注发私信

相关话题

热门标签

操作系统程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端

推荐作者

已经忘了多久

文章 0 评论 0

15867725375

文章 0 评论 0

LonelySnow

文章 0 评论 0

走过海棠暮

文章 0 评论 0

轻许诺言

文章 0 评论 0

信馬由缰

文章 0 评论 0

友情链接

我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的隐私政策了解更多相关信息。单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。

原文