效果：

中文网three.js docs

1.搭建环境 安装three

首先我们需要新建一个项目 vue/react都可 这里以vue为演示

npm i three

找到一个新的页面 在页面script的地方导入three 

import * as THREE from "three"

或者自己逐个导入

import {PerspectiveCamera,Scene,WebGLRenderer,
} from "three";
import * as THREE from "three"

2.搭建场景

<script>
import {PerspectiveCamera,Scene,WebGLRenderer,
} from "three";
import * as THREE from "three"
export default {mounted() {const scene = new Scene()const camera = new PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );const renderer = new WebGLRenderer();renderer.setSize( window.innerWidth, window.innerHeight );document.body.appendChild( renderer.domElement );}
</script>

简单介绍：

scence：场景-画布

camera：相机-PerspectiveCamera(投影摄像机:模拟人眼）-类似于模拟人的眼睛

render：渲染器-（画布+人=画） 这里就是一整幅画

将这一整幅画插入到body中

3.新建一个立方体

import {PerspectiveCamera,Scene,WebGLRenderer,
} from "three";
import * as THREE from "three"
export default {mounted() {const scene = new Scene()const camera = new PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );const renderer = new WebGLRenderer();renderer.setSize( window.innerWidth, window.innerHeight );document.body.appendChild( renderer.domElement );const geometry = new THREE.BoxGeometry( 1, 1,1 );const material = new THREE.MeshBasicMaterial( {wireframe:true,color: 0x42b983} );const cube = new THREE.Mesh( geometry, material );scene.add( cube );camera.position.z = 5;},}

 简单介绍：

BoxGeometry：three提供的正方体 xyz

MeshBasicMaterial：基础材料 wireframe:true：将材料以线条的方式显示

Mesh：将形状+材料合并

创造一个立方体 设置好材料 形成一个完整的正方体 将这个完整的正方体添加到场景中

并且将相机拿远一点 就是camera.postion.z=5

如果不拿远 我们的视角就在相机内部 如下图

4.将正方体运动起来

function animate() {requestAnimationFrame( animate );cube.rotation.x += 0.01;cube.rotation.y += 0.01;renderer.render( scene, camera );}animate();

 requestAinmationFrame：动画针 重复调用animate函数

cube.rotation.y += 0.01：将正方体沿着x轴y轴旋转0.1

renderer.render( scene, camera )：重新渲染

按照浏览器的刷新频率去让正方体沿xy旋转 并且重新渲染

这样肉眼看起来就像立方体动了起来

5.完整代码

import {PerspectiveCamera,Scene,WebGLRenderer,
} from "three";
import * as THREE from "three"
export default {mounted() {const scene = new Scene()const camera = new PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );const renderer = new WebGLRenderer();renderer.setSize( window.innerWidth, window.innerHeight );document.body.appendChild( renderer.domElement );const geometry = new THREE.BoxGeometry( 1, 1,1 );const material = new THREE.MeshBasicMaterial( {wireframe:true,color: 0x42b983,} );const cube = new THREE.Mesh( geometry, material );scene.add( cube );camera.position.z = 5;function animate() {requestAnimationFrame( animate );cube.rotation.x += 1;cube.rotation.y += 0.01;renderer.render( scene, camera );}animate();},}