配置开发环境
因为我这边是用的Vue作为前端基础框架所以我们先安装Vue
Vue Install :
npm install -g @vue/cli
# OR
yarn global add @vue/cli
Create a project:
vue create my-project
# OR
vue ui
安装Threejs
yarn add three
# OR
yarn add three
引入使用
<script>
import * as THREE from "three";
let camera, scene, renderer;
let geometry, material, mesh;
export default {
data() {
return {
name: "",
};
},
created() {
this.init();
this.animate();
},
methods: {
init() {
//场景(scene)、相机(camera)和渲染器(renderer)
camera = new THREE.PerspectiveCamera(
70,
window.innerWidth / window.innerHeight,
0.01,
10
); // 创建透视相机
camera.position.z = 1;
scene = new THREE.Scene(); // 创建场景
geometry = new THREE.BoxGeometry(0.2, 0.2, 0.2);
material = new THREE.MeshNormalMaterial();
mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);
renderer = new THREE.WebGLRenderer({ antialias: true }); // 创建渲染器
renderer.setSize(window.innerWidth, window.innerHeight); // 设置渲染器大小
document.body.appendChild(renderer.domElement);
},
animate() {
requestAnimationFrame(this.animate); //渲染循环
mesh.rotation.x += 0.01;
mesh.rotation.y += 0.02;
renderer.render(scene, camera); // 渲染render( scene, camera, renderTarget, forceClear ) scene:前面定义的场景 camera:前面定义的相机renderTarget:渲染的目标,默认是渲染到前面定义的render变量中forceClear:每次绘制之前都将画布的内容给清除,即使自动清除标志autoClear为false,也会清除
},
},
};
</script>
运行看到如下效果,说明配置成功
image.png
网友评论