本文介绍: 现在,运行项目,你将看到一个旋转的3D地球。你可以根据需要修改地球的颜色大小属性接下来我们创建一个Vue3项目,并在项目引入Three.js库。

首先,我们需要安装Three.js库:

npm install three

接下来,我们创建一个Vue3项目,并在项目引入Three.js库。在src/main.js文件中,编写以下代码

import { createApp } from 'vue'
import App from './App.vue'
import * as THREE from 'three'

const app = createApp(App)

app.config.globalProperties.$three = {
  init: () => {
    // 创建场景
    const scene = new THREE.Scene()

    // 创建相机
    const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000)
    camera.position.z = 5

    // 创建渲染器
    const renderer = new THREE.WebGLRenderer()
    renderer.setSize(window.innerWidth, window.innerHeight)
    document.body.appendChild(renderer.domElement)

    // 创建地球
    const geometry = new THREE.SphereGeometry(1, 32, 32)
    const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 })
    const earth = new THREE.Mesh(geometry, material)
    scene.add(earth)

    // 渲染循环
    const animate = () => {
      requestAnimationFrame(animate)

      // 旋转地球
      earth.rotation.y += 0.01

      renderer.render(scene, camera)
    }

    animate()
  }
}

app.mount('#app')

src/App.vue文件中,编写以下代码

<template>
  <div id="app">
    &lt;canvas ref="earthCanvas"&gt;</canvas&gt;
  </div&gt;
</template&gt;

<script>
export default {
  mounted() {
    this.$refs.earthCanvas.getContext('webgl').call(this.$three.init(), this)
  }
}
</script>

现在,运行项目,你将看到一个可旋转的3D地球。你可以根据需要修改地球的颜色、大小属性

原文地址:https://blog.csdn.net/weixin_54226053/article/details/134751216

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任

如若转载,请注明出处:http://www.7code.cn/show_48919.html

如若内容造成侵权/违法违规/事实不符,请联系代码007邮箱suwngjj01@126.com进行投诉反馈,一经查实,立即删除

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注