问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

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

头像
Torrent
    2625

    问题描述

    想实现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/中的背景效果。

    three.jsjavascriptwebglcanvas前端
    阅读 5.1k
    3 个回答
    得票最新
    头像
    雾岛听风
      12.1k51356
      这是用纯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>
      头像
      Ter
        512214

        用CSS实现岂不是更简便？

        撰写回答
        你尚未登录，登录后可以
        • 和开发者交流问题的细节
        • 关注并接收问题和回答的更新提醒
        • 参与内容的编辑和改进，让解决方法与时俱进
        推荐问题