vue引入three.js

最新推荐文章于 2024-03-25 11:23:26 发布

喝星茶发o_o ....

最新推荐文章于 2024-03-25 11:23:26 发布

阅读量730

点赞数 1

分类专栏： vue three 文章标签： html javascript css

本文链接：https://blog.csdn.net/weixin_44479957/article/details/120505663

版权

vue 同时被 2 个专栏收录

35 篇文章 0 订阅

订阅专栏

three

1 篇文章 0 订阅

订阅专栏

在安装npm install --save three-orbit-controls
基本使用three.js

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <script src="http://www.yanhuangxueyuan.com/versions/threejsR92/build/three.js"></script>
    <title>threevue</title>
  </head>
  <body>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

<template>
  <div id="container"></div>
</template>

<script>
const OrbitControls = require("three-orbit-controls")(THREE);
export default {
  name: "index",
  data() {
    return {
      camera: null,
      scene: null,
      renderer: null,
      mesh: null,
    };
  },
  methods: {
    init() {
      let container = document.getElementById("container");
      // 创建一个相机 参数：fov、aspect、near、far
      this.camera = new THREE.PerspectiveCamera(30, 1, 0.01, 1000);
      // 相机离屏幕的距离
      this.camera.position.z = 1;
      // 创建场景
      this.scene = new THREE.Scene();
      // 创建一个立方体 参数 width、height、depth
      let geometry = new THREE.BoxGeometry(0.2, 0.2, 0.2);
      // 立方体的材质 参数为obj
      let material = new THREE.MeshNormalMaterial({ color: 0x00ff00 });
      // 将立方体和材质包添加到网格
      this.mesh = new THREE.Mesh(geometry, material);
      // 将网格添加到场景中
      this.scene.add(this.mesh);
      // 渲染器 参数为obj antialias：true 开启抗锯齿（默认为false）
      this.renderer = new THREE.WebGLRenderer({ antialias: true });
      this.renderer.setClearColor(0xb9d3ff, 1);
      // 设置渲染大小
      this.renderer.setSize(500, 500);
      this.renderer.render(this.scene, this.camera);
      container.appendChild(this.renderer.domElement);
      new OrbitControls(this.camera,this.renderer.domElement)
    },
    animate() {
      requestAnimationFrame(this.animate);
      this.mesh.rotation.x += 0.01;
      this.mesh.rotation.y += 0.01;
      this.renderer.render(this.scene, this.camera);
    },
  },
  mounted() {
    this.init();
    this.animate();
  },
  created() {},
};
</script>
<style scoped>
body {
  margin: 0;
  overflow: hidden;
  /* 隐藏body窗口区域滚动条 */
}

#container {
  width: 90vw;
  height: 100vh;
}
</style>

喝星茶发o_o ....

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
vue引入three.js

在安装npm install --save three-orbit-controls基本使用three.jsindex.html<!DOCTYPE html><html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <script src="http:.
复制链接

扫一扫