ThreeJs 实例教学 -- 3D全景

正文

请到「今天看啥」查看全文

alt = "" >

id = "surface_5" class = "surface" >

class = "bg" src = "images/negz.jpg" alt = "" >

html这边没什么特别的，首先把每个面放进去，用div把每个面的图片放进去。

没有用官网demo的实现方式是因为官网是create一个img插入到页面，我们在对每个面添加元素的时候不太方便。先把六个面定义好，如果要在每个面上加入一些交互的元素，直接在html上添加dom就可以了。

一共就引入了3个js，除了index另外两个都是压缩过的js，不用关心，看一下index.js的实现：

camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 1000 );
scene = new THREE.Scene();

那么很明显这两行代码，字面上的意思就是创建了一个相机，创建了一个场景。那这里稍微解释一下这两个类。

PerspectiveCamera

以下是官网的解释：

大概意思：这是一个模仿人眼的投影模式，它是用于渲染3D场景最常见的投影模式。

总之这个类就是new一个镜头。下面是样例代码：

这个类的构造函数接受四个参数：

那么这四个参数具体是什么东西？

图片来源：https://isux.tencent.com/3d.html

分别表示：镜头夹角，宽高比，最近焦距，最远焦距。

Scene

接下来，用Scene类创建场景。以下官方说明：

这东西创建了一个场景，这个场景允许你对某个东西某个位置通过threeJs渲染场景。创建了场景和相机，我们需要往场景里面放入之前说的正方体。

首先定义好六个面的数据，每个面的位置，3D旋转的旋转角度。

position三个参数分别对应的x,y,z轴的位置。因为我选的面宽度是1024px，所以位置是基于中心点的正负1024/2。

rotation的三个参数分贝对应xyz轴的旋转角度。Math.PI/2代表90度。

var sides = [
    {
        position: [ -512, 0, 0 ],//位置
        rotation: [ 0, Math.PI / 2, 0 ]//角度
    },
    {
        position: [ 512, 0, 0 ],
        rotation: [ 0, -Math.PI / 2, 0 ]
    },
    {
        position: [ 0,  512, 0 ],
        rotation: [ Math.PI / 2, 0, Math.PI ]
    },
    {
        position: [ 0, -512, 0 

请到「今天看啥」查看全文