立方体交错渲染

更多有趣示例 尽在 知屋安砖社区

示例

HTML

<div id="canvas"> 
 </div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.2/TweenMax.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/107/three.min.js"></script>

CSS

	body { margin: 0; }
			canvas { width: 100%; height: 100% }

JS

var scene, camera, renderer, plane;
function init() {
    (renderer = new THREE.WebGLRenderer({
        antialias: !0
    })).setSize(window.innerWidth, window.innerHeight),
    renderer.setClearColor(2237993),
    document.getElementById("canvas").appendChild(renderer.domElement),
    (scene = new THREE.Scene).fog = new THREE.FogExp2(2237993,.0025),
    (camera = new THREE.PerspectiveCamera(95,window.innerWidth / window.innerHeight,10,1e4)).position.z = 500,
    camera.position.x = 0,
    camera.position.y = 50,
    scene.add(camera),
    plane = new THREE.Object3D,
    scene.add(plane),
    bigDots = 50;
    for (var e = [], a = 0; a < bigDots; a++) {
        var n = Math.acos(2 * a / bigDots - 1)
          , t = Math.sqrt(bigDots * Math.PI) * n;
        bigDotGeometry = new THREE.CubeGeometry(25,25,25),
        (e = new THREE.Mesh(bigDotGeometry,new THREE.MeshStandardMaterial({
            color: 0xff00ff,
            emissive: 6392111,
            side: THREE.BackSide,
            transparent: !0,
            opacity: .6,
            metalness: 1,
            roughness: .5,
            shading: THREE.SmoothShading
        }))).position.y = 400 * Math.random() * Math.sin(t) * Math.sin(n),
        e.position.x = 570 * Math.cos(t) * Math.sin(n),
        e.position.z = 150 * Math.cos(n),
        e.scale.y = .001,
        e.scale.x = .001,
        e.scale.z = Math.floor(8 * Math.random() + 2),
        plane.add(e),
        TweenMax.to(plane.children[a].material, 1, {
            opacity: .5,
            roughness: .5
        }),
        TweenMax.to(plane.children[a].scale, 1, {
            y: 8,
            x: 8,
            z: Math.floor(7 * Math.random() + 2),
            ease: Sine.easeInOut
        }),
        Math.floor(10 * Math.random()),
        TweenMax.fromTo(plane.children[a].position, 20, {
            y: 370 * Math.random() * Math.sin(t) * Math.sin(n),
            x: 550 * Math.cos(t) * Math.sin(n),
            z: 150 * Math.cos(n)
        }, {
            y: 370 * Math.random() * Math.sin(t) * Math.sin(n) - 10,
            z: 150 * Math.cos(n),
            repeat: -1,
            repeatDelay: Math.floor(2 * Math.random()) + .5,
            yoyo: !0,
            ease: Linear.easeNone
        }),
        TweenMax.to(plane.children[a].rotation, 1, {
            x: .001,
            y: .001
        })
    }
    new THREE.DirectionalLight(16777215,.3).position.set(1, 1, -1e3),
    new THREE.DirectionalLight(16777215,.1).position.set(-600, 1, 1e3);
    var o = new THREE.DirectionalLight(16777215,.3);
    o.position.set(300, -400, 500),
    scene.add(o);
    var i = new THREE.PointLight(7040624,2,9e3);
    i.position.set(300, 500, 100),
    scene.add(i);
    var r = new THREE.PointLight(7040624,1,9e3);
    r.position.set(1, 1, 0),
    scene.add(r)
}
function onWindowResize() {
    camera.aspect = window.innerWidth / window.innerHeight,
    camera.updateProjectionMatrix(),
    renderer.setSize(window.innerWidth, window.innerHeight)
}
function setupEventListeners() {
    window.addEventListener("load", onWindowResize)
}
function draw() {
    requestAnimationFrame(draw),
    renderer.render(scene, camera)
}
init();
draw();
$(window).resize(function() {
    onWindowResize()
});