uniapp 引用three.js教程

1.在项目根目录下，新建一个文件夹，名字可以取为lib，将three.js的文件复制到lib目录下。

2.在main.js文件中，引入Three.js: import * as THREE from './lib/three.js'

3.在App.vue文件中，在mounted函数中调用Three.js：

 mounted(){

//调用Three.js

let scene = new THREE.Scene();

let camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 );

let renderer = new THREE.WebGLRenderer();

renderer.setSize( window.innerWidth, window.innerHeight ); document.body.appendChild( renderer.domElement );

}

4.在index.html文件中，动态改变窗口大小：

<script> window.addEventListener( 'resize', onWindowResize, false ); function onWindowResize(){ camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); renderer.setSize( window.innerWidth, window.innerHeight ); } </script>

5.在App.vue文件中，动态渲染函数： mounted(){

//调用Three.js

let scene = new THREE.Scene();

let camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 );

let renderer = new THREE.WebGLRenderer(); renderer.setSize( window.innerWidth, window.innerHeight );

document.body.appendChild( renderer.domElement );

//渲染函数

let animate = function ()

{

requestAnimationFrame( animate );

renderer.render( scene, camera );

};

animate();

}