前端开发初试three.js,做特效

前端开发怎么找实习
前端开发人员怎么分工
应届毕业生怎么做前端开发

开始一波three.js的心血来潮!

基本的几步就是:定义舞台,定义透视摄像机,定义渲染器,定义灯光,画爱心,填充爱心,向舞台中心增加爱心,随机向外扩散。
html 代码

<!DOCTYPE html>
<html lang=”en”>
    <head>
        <meta charset=”UTF-8″ />
        <title>test3d3</title>
        <style type=”text/css”>
            body {
                margin: 0;
                overflow: hidden;
            }
        </style>
    </head>
    <body>
        <div id=”webgl”></div>
        <script
            type=”text/javascript”
            src=”https://threejs.org/build/three.js
        ></script>
        <script type=”text/javascript”>
            function init() {
                var scene = new THREE.Scene()
                scene.fog = new THREE.Fog(0xffffff, 15, 300)
                var camera = new THREE.PerspectiveCamera(
                    45,
                    window.innerWidth / window.innerHeight,
                    0.1,
                    1000,
                )
                camera.position.set(100, 100, 100)
                camera.lookAt(scene.position)
                var renderer = new THREE.WebGLRenderer()
                renderer.setClearColor(0xeeeeee)
                renderer.setSize(window.innerWidth, window.innerHeight)
                var spotLight = new THREE.DirectionalLight(0xffffff)
                spotLight.position.set(200, 40, 200)
                scene.add(spotLight)
                function drawShape() {
                    var shape = new THREE.Shape()
                    shape.moveTo(0, 0)
                    shape.quadraticCurveTo(-3.8, 2, 4, 9)
                    shape.quadraticCurveTo(11, 2, 8, 0)
                    shape.quadraticCurveTo(5, -1.2, 4, 2)
                    shape.quadraticCurveTo(3, -1.2, 0, 0)
                    return shape
                }
                function createMesh(goem) {
                    var meshMaterial = new THREE.MeshPhongMaterial({
                        color: 0xffffff * Math.random(),
                    })
                    meshMaterial.side = THREE.DoubleSide
                    var mesh = THREE.SceneUtils.createMultiMaterialObject(
                        goem,
                        [meshMaterial],
                    )
                    mesh.position.set(0, 0, 0)
                    return mesh
                }
                var vx = [1],
                    vy = [1],
                    vpy = [1],
                    vpx = [1],
                    vpz = [1]
                function addinitShape() {
                    vx.push(Math.random() * 0.02)
                    vy.push(Math.random() * 0.02)
                    vpy.push(-0.15 + Math.random() * 0.3)
                    vpx.push(-0.15 + Math.random() * 0.3)
                    vpz.push(-0.15 + Math.random() * 0.3)
                    var shape = createMesh(new THREE.ShapeGeometry(drawShape()))
                    shape.rotation.z = Math.PI
                    shape.rotation.y = Math.random() * Math.PI
                    scene.add(shape)
                }
                for (var i = 0; i < 100; i++) {
                    addinitShape()
                }
                setInterval(function() {
                    if (scene.children.length < 1000) {
                        addinitShape()
                    } else {
                        scene.children.splice(1, 1)
                        vx.shift()
                        vy.shift()
                        vpx.shift()
                        vpy.shift()
                        vpz.shift()
                    }
                }, 80)
                document
                    .getElementById(‘webgl’)
                    .appendChild(renderer.domElement)
                function rendererScene() {
                    for (let i = 1; i < scene.children.length; i++) {
                        scene.children[i].rotation.y += vy[i]
                        scene.children[i].rotation.x += vx[i]
                        scene.children[i].position.y -= vpy[i]
                        scene.children[i].position.x += vpx[i]
                        scene.children[i].position.z += vpz[i]
                    }
                    requestAnimationFrame(rendererScene)
                    renderer.render(scene, camera)
                }
                rendererScene()
            }
            window.onload = init
        </script>
    </body>
</html>
前端开发怎么提高效率
前端项目开发怎么写
网络前端开发前景怎么样
» 本文来自:前端开发者 » 《前端开发初试three.js,做特效》
» 本文链接地址:https://www.rokub.com/8128.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!