vue3.0 引用 three.js
cnpm install three -S 在使用的页面 import * as Three from ‘three’ 使用three绘制最简单正方体
< template>
< div class = "Create" >
< / div>
< / template>
< script>
import * as Three from 'three'
export default {
name: 'Create' ,
data ( ) {
return { }
} ,
setup ( ) {
const scene = new Three. Scene ( )
const camera = new Three. PerspectiveCamera ( 75 , window. innerWidth / window. innerHeight, 2 , 1000 )
const renderer = new Three. WebGLRenderer ( { antialias: true } )
renderer. setSize ( window. innerWidth, window. innerHeight)
document. body. appendChild ( renderer. domElement)
const geometry = new Three. BoxGeometry ( 2 , 2 , 2 )
const texture = new Three. TextureLoader ( ) . load ( require ( '../assets/img/bg-01.jpg' ) )
const material = new Three. MeshBasicMaterial ( { map: texture } )
const cube = new Three. Mesh ( geometry, material)
scene. add ( cube)
const animate = ( ) => {
requestAnimationFrame ( animate)
cube. rotation. x += 0.01
cube. rotation. y += 0.01
renderer. render ( scene, camera)
}
animate ( )
camera. position. z = 5
window. addEventListener ( 'resize' , ( ) => {
camera. aspect = window. innerWidth / window. innerHeight
camera. updateProjectionMatrix ( )
renderer. setSize ( window. innerWidth, window. innerHeight)
} )
}
}
< / script>