three.js 3D小球切换效果

前端开发工具subline web设计和web前端开发工具 前端拖拽式页面开发工具

其实感觉three.js不难,
难点在于没有一个系统的文档,
难点在于看不懂报错的地方,
或者就是干脆就直接不报错,
难点在于各式各样的数学算法,

—-比如心形的算法我就没写出来

用chrome等现代浏览器观看,
提示:拖动鼠标试试

html 代码

<!doctype html>
<html lang=”ZN-ch”>
<head>
    <meta charset=”UTF-8″>
    <meta name=”viewport” content=”width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0″>
    <meta http-equiv=”X-UA-Compatible” content=”ie=edge”>
    <title>Document</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            overflow: hidden;
        }
        .control {
            text-align: center;
            position: absolute;
            bottom: 50px;
            width: 100%;
        }
        .control div {
            display: inline-block;
            width: 100px;
            line-height: 30px;
            border: 1px solid #00ffff;
            color: #00ffff;
            font-weight: 600;
        }
    </style>
    <script src=”https://cdn.bootcss.com/three.js/r81/three.js”></script>
</head>
<body>
    <div class=”control”>
        <div onclick=”random()”>random</div>
        <div onclick=”sphere()”>sphere</div>
        <div onclick=”cube()”>cube</div>
    </div>
    <script>
        var requestAnimationFrame = window.requestAnimationFrame
            || window.webkitRequestAnimationFrame
            || window.mozRequestAnimationFrame
            || window.msRequestAnimationFrame;
        var WIDTH = window.innerWidth,
            HEIGHT = window.innerHeight;
        var camera, scene, renderer;
        var balls = [];
        var mouse = {};
        var group = new THREE.Group();
        console.log(group)
        function init() {
            camera = new THREE.PerspectiveCamera(60, WIDTH / HEIGHT, 0.1, 1000);
            camera.position.set(0, 0, 400);
            camera.lookAt(new THREE.Vector3(0, 0, 0));
            scene = new THREE.Scene();
            console.log(scene)
            renderer = new THREE.WebGLRenderer();
            renderer.setSize(WIDTH, HEIGHT);
            renderer.setClearColor(0x000000);
            document.body.appendChild(renderer.domElement);
            for (var i = 0; i < 125; i++) {
                var aBall = new THREE.Mesh(
                    new THREE.SphereGeometry(3, 16, 18),
                    new THREE.MeshPhongMaterial({ color: 0x00ffff, specular: 0xffffff, shininess: 100 })
                );
                group.add(aBall);
                balls.push({ toX: 0, toY: 0, toZ: 0 });
            }
            scene.add(group);
            var light = new THREE.DirectionalLight(0xffffff);
            light.position.set(1, 1, 1);
            light.name = ‘light’;
            scene.add(light);
            document.addEventListener(‘mousedown’, function (e) { mouseDown(e); }, false);
            document.addEventListener(‘mousemove’, function (e) { mouseMove(e); }, false);
            document.addEventListener(‘mouseup’, function (e) { mouseUp(e); }, false);
        }
        function random() {
            var len = balls.length;
            for (var i = 0; i < len; i++) {
                balls[i].toX = Math.random() * WIDTH – 0.5 * WIDTH;
                balls[i].toY = Math.random() * HEIGHT – 0.5 * HEIGHT;
                balls[i].toZ = Math.random() * 800 – 400;
            }
        }
        function sphere() {
            var len = balls.length;
            for (var i = 0; i < len; i++) {
                var phi = Math.acos(-1 + (2 * i) / len);
                var theta = Math.sqrt(len * Math.PI) * phi;
                balls[i].toX = 100 * Math.cos(theta) * Math.sin(phi);
                balls[i].toY = 100 * Math.sin(theta) * Math.sin(phi);
                balls[i].toZ = 100 * Math.cos(phi);
            }
        }
        function cube() {
            var len = balls.length;
            for (var i = 0; i < len; i++) {
                balls[i].toX = 20 * (i % 5) – 40;
                balls[i].toY = -(Math.floor(i / 5) % 5 * 20) + 40;
                balls[i].toZ = Math.floor(i / 25) * 20 – 40;
            }
        }
        function render() {
            requestAnimationFrame(render);
            var len = balls.length;
            for (var i = 0; i < len; i++) {
                group.children[i].position.x += (balls[i].toX – group.children[i].position.x) * 0.03;
                group.children[i].position.y += (balls[i].toY – group.children[i].position.y) * 0.03;
                group.children[i].position.z += (balls[i].toZ – group.children[i].position.z) * 0.03;
            }
            renderer.render(scene, camera);
        }
        function mouseDown(e) {
            e.preventDefault();
            mouse.x = e.clientX;
            mouse.y = e.clientY;
            mouse.isMove = true;
        }
        function mouseMove(e) {
            e.preventDefault();
            if (mouse.isMove) {
                group.rotation.y += (e.clientX – mouse.x) * 0.0001;
                group.rotation.x += (e.clientY – mouse.y) * 0.0001;
            }
        }
        function mouseUp() {
            mouse.isMove = false;
        }
        init();
        random();
        render();
    </script>
</body>
</html>

app前端用什么开发工具 linux web前端开发工具 前端用的什么开发工具

» 本文来自:前端开发者 » 《three.js 3D小球切换效果》
» 本文链接地址:https://www.rokub.com/5421.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!