官网文档 three.js docs

首先要创建 场景scene 相机camera 渲染器render 一定要先根据官网引入three.js的js文件

const scene = new THREE.Scene(); //创建场景
const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 ); const renderer = new THREE.WebGLRenderer();//创建渲染器对象
renderer.setSize( window.innerWidth, window.innerHeight ); //设置渲染区尺寸
document.body.appendChild( renderer.domElement );//body中插入canvas对象

/*

three.js有几种不同的相机

* 1.js有几种相机,分别是什么? [ a.四种相机: PerspectiveCamera （ 透视 相机） 、OrthographicCamera （ 正交投影 相机）、CubeCamera （ 立方体 相机 或全景 相机）和StereoCamera （3D相机）]

  *

  * 2.相机的参数分别是什么? [

  *        a.透视相机: PerspectiveCamera( fov, aspect, near, far ) fov: 视角大小, aspect: 宽高比, near: 近裁面, far: 远裁面

  *        b.正交投影相机: OrthographicCamera( left, right, top, bottom, near, far ) left: 视锥体左边界, right: 视锥体右边界, top: 视锥体上边界, bottom: 视锥体下边界, near: 近裁面, far: 远裁面

  *        c.立方体相机: CubeCamera( near, far, cubeResolution ) near: 近裁面, far: 远裁面, cubeResolution: 立方体纹理分辨率

  *        d.3D相机: StereoCamera( fov, aspect, near, far ) fov: 视角大小, aspect: 宽高比, near: 近裁面, far: 远裁面

  * ]

  *

  * 3.相机的位置是怎么设置的? [

  *        a.相机的位置通过相机的position属性来设置的  相机.position.set(x,y,z);

  * ]

  * 4.相机的方向是怎么设置的?[

  *        a.相机的方向通过相机的lookAt方法来设置的    相机.lookAt(0,0,0);

  *        b．相机默认是由正z轴看像-z轴（相机镜头对着-z轴方向拍） 就像是由屏幕外向屏幕内看一样 (模拟人眼的视觉效果)

  * ]

  * 5.相机的视野是怎么设置的?[

  *        a.相机以哪个视野为上方通过up方法来设置的

  *        b.相机.up.set(x,y,z); 默认是y轴向上 就是你拿着相机是躺着拍，趴着拍还是侧着拍的区别，或是抬头看，低头看，扭头看的区别。

  * ]

*/

根据官网例子

 添加立方体

const geometry = new THREE.BoxGeometry(); //立方体图形
//材质对象material 这里表示给材质对象添加颜色,颜色仅支持十六进制的0x色彩
const material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
const cube = new THREE.Mesh( geometry, material );
scene.add( cube );//网格模型对象添加到场景中camera.position.z = 5;//相机视角大小,数值越小 视角越小,看到的就越大类似于小孔成像原理

渲染场景

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

添加动画函数,使物体转动

将下列代码添加到animate()函数中renderer.render调用的上方：

cube.rotation.x += 0.01;
cube.rotation.y += 0.01;

全部代码如下

效果如下 上下左右旋转的一个正方体

个人练习代码

一定要引入three.js文件否则会白屏不会显示渲染

这里我使用的是远程仓库的three.main.js外联 vue项目可根据官网自行下载包

效果图如下 一个旋转的球体

 刚接触three,仅是个人初步了解.