详解Three.js环境搭建与一个简单例子

一、环境准备

1.开发工具选用WebStorm,因为WebStorm自带了一个本地服务器,而Three.js的很多特性需要在服务器端才能展现。
详解Three.js环境搭建与一个简单例子_第1张图片

2.three.js库的下载与导入

3.打开调用three.js的html的网页文件时,需要借助WebStorm提供的本地服务器,如图所示,通过点击右上角浏览器图标而打开网页文件
详解Three.js环境搭建与一个简单例子_第2张图片


二、文件结构

详解Three.js环境搭建与一个简单例子_第3张图片


三、例子展示

详解Three.js环境搭建与一个简单例子_第4张图片


四、源码展示

html文件:



<html>

    <head>
        <title>Exampletitle>
        <script src="three.js">script>
    head>

    <body>

        
        <div id="WebGL-output"> div>

        <script>

            // 当页面加载完毕后,调用此函数,初始化画面
            function init() {

                // 创建【场景】,场景用于存放各种物体、光源等
                var scene = new THREE.Scene();

                // 创建【相机】,相机相当于视角,可以定义视角(相机)的在【场景】中的朝向,远近面等
                var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);

                // 创建【渲染器】,渲染器用于加载画面,计算指定【相机】角度下浏览器中【场景】的样子
                var renderer = new THREE.WebGLRenderer();

                renderer.setClearColor(new THREE.Color(0xEEEEEE, 1.0));
                renderer.setSize(window.innerWidth, window.innerHeight);
                renderer.shadowMapEnabled = true;

                // 展示坐标轴
                var axes = new THREE.AxisHelper(50);
                scene.add(axes);

                // 创建地面
                var planeGeometry = new THREE.PlaneGeometry(60, 20, 1, 1);
                var planeMaterial = new THREE.MeshLambertMaterial({color: 0xffffff});
                var plane = new THREE.Mesh(planeGeometry, planeMaterial);
                plane.receiveShadow = true;

                // 将地面旋转一定角度
                plane.rotation.x = -0.5 * Math.PI;
                plane.position.x = 15;
                plane.position.y = 0;
                plane.position.z = 0;

                // 将地面添加到场景中
                scene.add(plane);

                // 创建立方体
                var cubeGeometry = new THREE.BoxGeometry(4, 4, 4);
                var cubeMaterial = new THREE.MeshLambertMaterial({color: 0xff0000});
                var cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
                cube.castShadow = true;

                // 设置立方体的位置坐标
                cube.position.x = -4;
                cube.position.y = 3;
                cube.position.z = 0;

                // 将立方体添加到场景中
                scene.add(cube);


                var sphereGeometry = new THREE.SphereGeometry(4, 20, 20);
                var sphereMaterial = new THREE.MeshLambertMaterial({color: 0x7777ff});
                var sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);

                sphere.position.x = 20;
                sphere.position.y = 0;
                sphere.position.z = 2;
                sphere.castShadow = true;

                scene.add(sphere);

                // 设置相机的位置和视角朝向
                camera.position.x = -30;
                camera.position.y = 40;
                camera.position.z = 30;
                camera.lookAt(scene.position);

                // 增加环境光源
                var ambientLight = new THREE.AmbientLight(0x0c0c0c);
                scene.add(ambientLight);

                // 增加点光源
                var spotLight = new THREE.SpotLight(0xffffff);
                spotLight.position.set(-40, 60, -10);
                spotLight.castShadow = true;
                scene.add(spotLight);

                // 将画面输出到id为WebGL-output的div标签中
                document.getElementById("WebGL-output").appendChild(renderer.domElement);

                // 渲染【场景】
                var step = 0;
                renderScene();

                function renderScene() {
                    // 立方体旋转
                    cube.rotation.x += 0;
                    cube.rotation.y += 0.1;
                    cube.rotation.z += 0.1;

                    // 球体跳跃
                    step += 0.04;
                    sphere.position.x = 20 + ( 10 * (Math.cos(step)));
                    sphere.position.y = 4 + ( 10 * Math.abs(Math.sin(step)));

                    // 递归渲染
                    requestAnimationFrame(renderScene);
                    renderer.render(scene, camera);
                }

            }

            window.onload = init;

        script>

    body>

html>

五、附加

1.球体运动的算法介绍:
详解Three.js环境搭建与一个简单例子_第5张图片

2.对比 Three.js中的 requestAnimationFrame() 与原生js中的setInterval()

(1)requestAnimationFrame()函数:可以指定一个函数,按照浏览器定义的时间间隔调用,可以在这个指定的函数里执行所有必要的绘画操作,而浏览器会尽可能保证绘画过程平滑、高效。

(2)setInterval()函数:可指定函数多长时间内调用一次,这个函数的问题是它并不考虑浏览器中发生的事情,如果你正在浏览其他页面,这个函数仍然会每隔几毫秒就会被调用一次,除此之外,setInterval()方法并没有跟显示器的重画同步,这可能会导致较高的CPU使用率,降低系统效率。

你可能感兴趣的:(three.js,javascript)