1:安装
-
有淘宝镜像的建议使用cnpm
npm / cnpm install three -
然后安装轨道控件
npm install three-orbit-controls -
安装.obj和.mtl文件的加载
npm i --save three-obj-mtl-loader -
安装渲染器
npm i --save three-css2drender
2:引入
使用 import引入,这里单独引入three
这里是引入其他的模块
<template>
<div id="container"></div>
</template>
<script>
import * as THREE from "three";
// 轨道控制器
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";
import { ConvexGeometry } from "three/examples/jsm/geometries/ConvexGeometry.js";
import { BufferGeometryUtils } from "three/examples/jsm/utils/BufferGeometryUtils.js";
// import { OBJLoader, MTLLoader } from 'three-obj-mtl-loader'
import { OBJLoader } from "three/examples/jsm/loaders/OBJLoader.js";
import { MTLLoader } from "three/examples/jsm/loaders/MTLLoader.js";
// import THREE from '@/units/three'
export default {
name: "HomeView",
data() {
return {
camera: null,
scene: null,
renderer: null,
mesh: null,
};
},
created() {},
mounted() {
this.ready();
},
methods: {
ready() {
// 场景
const scene = new THREE.Scene();
// PerspectiveCamera(透视摄像机) 参数:视野角度(FOV),长宽比(aspect ratio),近截面(near),远截面(far)
const camera = new THREE.PerspectiveCamera(
75,
window.innerWidth / window.innerHeight,
0.1,
1000
);
// WebGLRenderer 渲染器
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
// BoxGeometry(几何立方体)
const geometry = new THREE.BoxGeometry();
// MeshBasicMaterial 材质
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
// Mesh 网格
const cube = new THREE.Mesh(geometry, material);
// 添加至 0.0.0 坐标,
scene.add(cube);
// 防止摄像机与几何体重叠,做偏移处理
camera.position.z = 5;
// 创建轨道控制器
const controls = new OrbitControls(camera, renderer.domElement);
// 渲染
// renderer.render(scene, camera);
function render() {
renderer.render(scene, camera);
requestAnimationFrame(render);
}
render();
},
},
};
</script>
<style lang="scss" scoped>
body {
margin: 0;
}
</style>