js 页面定义的全局变量值改变后其他页面获取不到

本文链接：https://blog.csdn.net/weixin_28707535/article/details/112078634

关注初识Threejs与小编一起学习成长

大家还记得小编之前说的Three.js的三大组件嘛？它们分别是相机(Camera)、场景(Scene)和渲染器(Renderer)，今天就来实现一下Three.js的Hello World，案例就是一个会旋转的正方体，旋转的正方体就算我们踏入WebGL这个神奇的世界的开始。下图就是最终效果，看到效果后是不是迫不及待的想试试，那就动手一起实现下吧！

创建渲染器

渲染器决定了渲染的结果应该绘制在页面的什么元素上面，并且以怎样的方式来绘制。渲染器包含多种渲染模式，比如分别基于canvas2D，CSS2D，CSS3D，SVG和WebGL渲染的渲染器。这里定义了一个WebGLRenderer渲染器，代码如下(别忘了引入Three.js库)：

//声明一些全局变量
var renderer, camera, scene,
    geometry, material, mesh;
//初始化渲染器
function initRenderer() {
    //实例化渲染器
    renderer = new THREE.WebGLRenderer();
    //设置宽和高
    renderer.setSize(
        window.innerWidth,
        window.innerHeight
    ); 
    // 设置背景
    renderer.setClearColor(0xffffff); 
    //添加到DOM
    document.body.appendChild(renderer.domElement);
}

创建场景

我们再来实例化一个场景对象，代码如下：

//初始化场景
function initScene() {
    scene = new THREE.Scene(); //实例化场景
}

场景只是物体的容器，我们需要一个物体模型放到场景中去，也就是我们的正方体，代码如下：

//创建模型
function initMesh() {
    geometry = new THREE.BoxGeometry(2,2,2);//创建几何体
    material = new THREE.MeshNormalMaterial(); //创建材质
    mesh = new THREE.Mesh(geometry,material); //创建网格
    scene.add(mesh); //将网格添加到场景
}

创建相机

然后我们需要一个相机，相机就相当于人的眼睛，决定了场景中的哪个角度的景色会被显示出来。相机有很多种，我们这里使用正投影相机，近大远小。

//初始化相机
function initCamera() {
    camera = new THREE.PerspectiveCamera(
        45,
        window.innerWidth / window.innerHeight,
        0.1, 
        200); //实例化相机
    camera.position.set(0, 0, 15);
}

四个参数分别是视野、宽高比、近裁面和远裁面。大家可以多换几个值感觉一下，有机会我们再细说参数。

让场景动起来

在定义了渲染器，把物体添加到场景中，设置相机之后。这时候，我们只需要调用渲染器的渲染函数render，就能使其渲染了。其中我们用到了一个重要函数requestAnimationFrame()，H5新增的定时器，会循环调用animate方法。

//运行动画
function animate() {
    requestAnimationFrame(animate); //循环调用函数

    mesh.rotation.x += 0.01; //沿x轴旋转0.01弧度
    mesh.rotation.y += 0.01; //沿y轴旋转0.01弧度

    renderer.render(scene,camera); //渲染界面
}

准备好以上工作，页面加载完成后，就可以调用它们了：

//初始化函数，页面加载完成后调用
function init() {
    initRenderer();//初始化渲染器
    initScene();//初始化场景
    initCamera();//初始化相机
    initMesh();//初始化物体模型
    animate();//添加动画
}

以上就是Hello World实例的所有内容，你的动起来了吗？

案例已托管到码云

获取地址：

https://gitee.com/itboy2012/ThreejsDemo.git

初识Threejs，一起学习成长

长按关注 “初识Threejs”

把有用的知识，分享给更多人