携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第1天，点击查看活动详情。
Three.js 是一款运行在浏览器中的 3D 引擎，你可以用它创建各种三维场景，包括了摄影机、光影、材质等各种对象。three.js的作用是什么？简单来说，就是渲染器控制相机，对场景完成拍照的一个过程。three.js有三个重要的要素，分别是场景、相机和渲染器。
-
场景 scene
场景相当于一个容器，主要用于保存、跟踪所要渲染的物体和使用的光源。
-
相机 camera
相机决定的在场景中能看到什么。
-
渲染器 renderer
渲染器相当于一个画笔，就是基于相机的角度来计算场景在浏览器中会渲染成什么样子。
-
vue项目中安装与使用
安装：npm install --save three
在要使用的页面中引入：import * as Three from 'three'
-
基础代码
<template>
<div id="app">
<div id="three"></div>
</div>
</template>
<script>
import * as THREE from "three";
export default {
name: "App",
components: {},
methods: {
init() {
// 1. 创建场景
var scene = new THREE.Scene();
// 2. 创建相机
var camera = new THREE.PerspectiveCamera(
80,
window.innerWidth / window.innerHeight,
0.1,
2000
);
// 3. 创建渲染器
var renderer = new THREE.WebGLRenderer();
// 4. 设置输出canvas画面的大小
renderer.setSize(window.innerWidth, window.innerHeight);
// 5. 创建立方体
var cubeGeometry = new THREE.BoxGeometry(4, 4, 4); // 几何体结构
var cubeMaterial = new THREE.MeshBasicMaterial({ color: 0xffffff }); // 几何体材质
// 使用网格Mesh来承载几何模型
var cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
// 立方体位置
cube.position.x = 0;
cube.position.y = 10;
cube.position.z = 0;
// 对象是否渲染到阴影贴图中
cube.castShadow = true;
// 6. 将包含物体的网格插入到场景中
scene.add(cube);
// 7. 将渲染器输出添加到html元素中
document.getElementById("three").appendChild(renderer.domElement);
renderer.render(scene, camera);
},
},
mounted() {
this.init();
},
};
</script>
<style>
html,
body {
margin: 0;
padding: 0;
}
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
}
</style>
