vue引入three.js
仇征
在安装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>
类似资料：