04 Three.js一个案例详解

2018-02-09 17:40:49 人阅读

案例查看有问题?
全屏试试!

案例源代码


                        

 

<!doctype html>

<html>

<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>

    <script src="/lib/three.js"></script>

    <style>

        body {

            margin: 0;

        }

 

        canvas {

            width: 100%;

            height: 100%;

            display: block;

        }

    </style>

</head>

<body>

<script>

    //创建渲染器,添加到dom当中, antialias(是否启用抗锯齿)

    var renderer = new THREE.WebGLRenderer({antialias: true});

    //设置渲染器的尺寸

    renderer.setSize(window.innerWidth, window.innerHeight);

    //将渲染器放置到页面当中

    document.body.appendChild(renderer.domElement);

 

    //创建场景

    var scene = new THREE.Scene();

 

    //创建相机,设置位置

    var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 4000);

    //设置相机的位置

    camera.position.set(0, 0, 3);

 

    //创建一个平行光光源照射到物体上

    var light = new THREE.DirectionalLight(0xffffff, 1.5);

    //设置平型光照射方向,照射方向为设置的点照射到原点

    light.position.set(0, 0, 1);

    //将灯光放到场景当中

    scene.add(light);

 

    //创建一个接受光照并带有纹理映射的立方体,并添加到场景中

    //首先,获取到纹理

    var map = THREE.ImageUtils.loadTexture("/lib/textures/disturb.jpg");

 

    //然后创建一个phong材质来处理着色,并传递给纹理映射

    var material = new THREE.MeshPhongMaterial({map: map});

 

    //创建一个立方体的几何体

    var geometry = new THREE.CubeGeometry(1, 1, 1);

 

    //将集合体和材质放到一个网格中

    var cube = new THREE.Mesh(geometry, material);

 

    //将立方体网格添加到场景中

    scene.add(cube);

 

    //声明一个判断是否旋转的变量

    var rotationBool = true;

 

    (function animate() {

        renderer.render(scene, camera);

 

        if (rotationBool) {

            cube.rotation.x += 0.02;

            cube.rotation.y += 0.02;

        }

 

        requestAnimationFrame(animate);

    })();

 

    document.body.onclick = function () {

        rotationBool = !rotationBool;

    }

 

</script>

</body>

</html>

展开内容

联系我们

一个人的力量不如两个人的,两个人的力量不如一群人的。欢迎加入大家庭一起共同学习,共同进步。

查看更多