Three.js初体验——VR全景展示

2024-01-02 08:37:46

前言

Three.js 是JavaScript编写的WebGL第三方库。提供了非常多的3D显示功能。

Three.js中文教程：http://www.webgl3d.cn/Three.js/
Three.js相机控件OrbitControls：http://www.yanhuangxueyuan.com/doc/Three.js/OrbitControls.html

一、基本知识

这里只介绍了等下的实例用到的内容，想更好的学习还是自行阅读API文档比较好。

为了真正能够让场景借助three.js来进行显示，需要以下几个对象：场景、相机和渲染器，这样就能透过摄像机渲染出场景。

1.场景对象scene

var scene = new THREE.Scene();

2.相机对象camera

常用的相机对象就是正投影相机OrthographicCamera和透视投影相机PerspectiveCamera。
无论正投影相机还是透视投影相机本质上都是对视图矩阵、投影矩阵的封装。
通过Three.js的相机控件OrbitControls.js可以对Threejs的三维场景进行缩放、平移、旋转操作。

var camera = new THREE.PerspectiveCamera(90, document.body.clientWidth / document.body.clientHeight, 0.1, 100);
camera.position.set(0, 0, 0.01);
var controls = new THREE.OrbitControls(camera, renderer.domElement);

//PerspectiveCamera( fov : Number, aspect : Number, near : Number, far : Number )
//构造函数参数
//fov：视场角
//aspect：视场宽高比（一般用 画布宽/画布 高即可）
//near：能看多近
//far：能看多远
//这几个参数决定了哪些scene里的三维顶点会被渲染/绘制出来

3.渲染器对象renderer

将camera在scene里看到的内容渲染/绘制到画布上

var renderer = new THREE.WebGLRenderer();
renderer.setSize(document.body.clientWidth, document.body.clientHeight);
//document.getElementById("container").appendChild(renderer.domElement);

4.几何体geometry

//创建一个立方体几何对象
var box = new THREE.Mesh(new THREE.BoxGeometry(1, 1, 1), basicMaterials);
//创建一个球体几何对象
var sphere = new THREE.Mesh(sphereGeometry,sphereMaterial);

5.材质对象material

通过构造函数THREE.MeshLambertMaterial()创建了一个可以用于立方体的材质对象，构造函数的参数是一个对象，对象包含了颜色、透明度等属性

MeshBasicMaterial（基础材质，不受光照影响）
MeshStandardMaterial（PBR标准材质）
MeshPhongMaterial（高光材质，适用于陶瓷，烤漆类质感）
MeshToonMaterial（卡通材质，俗称三渲二）
MeshStandardMaterial（PBR标准材质模拟金属反射）

6.贴图texture

通过纹理贴图加载器TextureLoader的load()方法加载一张图片可以返回一个纹理对象Texture，纹理对象Texture可以作为模型材质颜色贴图.map属性的值。

材质的颜色贴图属性.map设置后，模型会从纹理贴图上采集像素值，这时候一般来说不需要再设置材质颜色.color。.map贴图之所以称之为颜色贴图就是因为网格模型会获得颜色贴图的颜色值RGB。

二、实例

1.立方体实例

var scene, camera, renderer;
function initThree(){
    //场景
    scene = new THREE.Scene();
    //镜头
    camera = new THREE.PerspectiveCamera(90, document.body.clientWidth / document.body.clientHeight, 0.1, 100);
    camera.position.set(0, 0, 0.01);
    //渲染器
    renderer = new THREE.WebGLRenderer();
    renderer.setSize(document.body.clientWidth, document.body.clientHeight);
    document.getElementById("container").appendChild(renderer.domElement);
    var controls = new THREE.OrbitControls(camera, renderer.domElement);
    
    //useSphere();
    useBox();
    loop();
}

function useBox(){
    //根据左右上下前后的顺序构建六个面的材质集
    var basicMaterials = [];
    
    var texture_left = new THREE.TextureLoader().load('images/left.jpg');
    basicMaterials.push(new THREE.MeshBasicMaterial( { map: texture_left } ));

    var texture_right = new THREE.TextureLoader().load('images/right.jpg');
    basicMaterials.push(new THREE.MeshBasicMaterial( { map: texture_right } ));

    var texture_top = new THREE.TextureLoader().load('images/top.jpg');
    basicMaterials.push(new THREE.MeshBasicMaterial( { map: texture_top } ));

    var texture_bottom = new THREE.TextureLoader().load('images/bottom.jpg');
    basicMaterials.push(new THREE.MeshBasicMaterial( { map: texture_bottom } ));

    var texture_front = new THREE.TextureLoader().load('images/front.jpg');
    basicMaterials.push(new THREE.MeshBasicMaterial( { map: texture_front } ));

    var texture_back = new THREE.TextureLoader().load('images/back.jpg');
    basicMaterials.push(new THREE.MeshBasicMaterial( { map: texture_back } ));

    var box = new THREE.Mesh(new THREE.BoxGeometry(1, 1, 1), basicMaterials);
    box.geometry.scale( 1, 1, -1 );
    scene.add(box);
}

function useSphere(){
    var sphereGeometry = new THREE.SphereGeometry(1, 50, 50);
    sphereGeometry.scale(1, 1, -1);

    var texture = new THREE.TextureLoader().load('images/main.jpg');
    var sphereMaterial = new THREE.MeshBasicMaterial({map: texture});

    var sphere = new THREE.Mesh(sphereGeometry,sphereMaterial);
    scene.add(sphere);
}

function loop(){
    requestAnimationFrame(loop);
    renderer.render(scene, camera);
}

window.onload = initThree;

2.球体实例

function useSphere(){
    var sphereGeometry = new THREE.SphereGeometry(1, 50, 50);
    sphereGeometry.scale(1, 1, -1);

    var texture = new THREE.TextureLoader().load('images/main.jpg');
    var sphereMaterial = new THREE.MeshBasicMaterial({map: texture});

    var sphere = new THREE.Mesh(sphereGeometry,sphereMaterial);
    scene.add(sphere);
}

3.报错解决

这主要是浏览器跨域问题，我用的是Chrome浏览器百度了一下找到了解决办法并且亲测有效，特别在此记录一下。

在Chrome的快捷图标上点击鼠标右键
选择属性
选择快捷方式标签
在目标里面，在原 Chrome 路径的基础上加上 --disable-web-security
点击应用
点击确定关闭属性窗口
关闭所有已打开的 Chrome，重新启动
看到地址栏下面的小黄条你使用的是不受支持的命令标记 --disable-web-security，就成功了

总结

以上就是今天学习的内容在这里记录一下，当然Three.js的功能远远不止这些，感兴趣的朋友可以去官网看看实例，真的很有趣。以后我也会继续了解学习的！

码农公寓

前言