three.js 基础展示

1. npm i three
2.  
3. --------------------------------------------
4.  
5. <template>
6. <div id="t-container">
7. <div class="title">基础示例</div>
8. </div>
9. </template>
10.  
11. <script>
12. import * as THREE from 'three'
13. let camera, scene, renderer
14. let geometry, material, mesh
15.  
16. export default {
17. data() {
18. return {
19. menus: []
20. }
21. },
22. props: {},
23. computed: {},
24. components: {},
25. watch: {},
26. methods: {
27. init() {
28. camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 0.01, 10) // *** 相机
29. camera.position.z = 1
30.  
31. scene = new THREE.Scene() // *** 场景
32.  
33. geometry = new THREE.BoxGeometry(0.2, 0.2, 0.2) // 几何图形
34. material = new THREE.MeshNormalMaterial() // 外观材质
35.  
36. mesh = new THREE.Mesh(geometry, material) // 网格
37. scene.add(mesh)
38.  
39. renderer = new THREE.WebGLRenderer({ antialias: true }) // *** 渲染器
40. renderer.setSize(window.innerWidth, window.innerHeight)
41.  
42. let contain = document.getElementById('t-container')
43. contain.appendChild(renderer.domElement)
44.  
45. renderer.render(scene, camera)
46. },
47. animate() {
48. requestAnimationFrame(this.animate)
49. mesh.rotation.x += 0.01
50. mesh.rotation.y += 0.02
51. renderer.render(scene, camera)
52. },
53. demo1() {
54. this.init()
55. this.animate()
56. },
57. },
58. mounted() {
59. this.demo1()
60. }
61. }
62. </script>
63.  
64. <style lang="scss" scoped>
65. .title {
66. position: absolute;
67. top: 0;
68. left: 0;
69. color: #fff;
70. }
71. </style>