如何用three.js實現(xiàn)無縫輪播橫幅效果（有網(wǎng)站示例）？

問題描述

想實現(xiàn)three.js官方示例網(wǎng)站https://www.with.in/中的背景效果。

問題出現(xiàn)的環(huán)境背景及自己嘗試過哪些方法

嘗試了很多方法，目前實現(xiàn)了移動，但是沒想出來怎么實現(xiàn)

相關(guān)代碼

<!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);
        }

        //調(diào)用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>

你期待的結(jié)果是什么？實際看到的錯誤信息又是什么？

想實現(xiàn)three.js官方示例網(wǎng)站https://www.with.in/中的背景效果。

回答

編輯回答

怪痞

答非所問了，點進題主給的鏈接是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>

2017年1月22日 19:27

編輯回答