Three.js
前面我们创建了项目Three.js(一)项目创建base on Vue Project
接下来我们按官方的架子,随便显示一点东西
- 相机 视角,也就是用于看东西的
- 场景 类似于一个容器,把东西放容器里
- 渲染器 渲染容器里的内容
- 内容 内容放到场景中
参考代码
// app.vue
<template>
<div id="main">
<div class="left-part"></div>
<div class="right-part" id="right-part">
</div>
</div>
</template>
<script>
import * as THREE from 'three';
export default {
mounted() {
let container = document.getElementById('right-part');
//相机-->预览内容
//场景-->类似于容器
//渲染器-->渲染场景
//内容-->要被渲染的内容
//关系:把内容放到场景中,用渲染器渲染,用相机查看
let scene = new THREE.Scene();
//fov — 摄像机视锥体垂直视野角度
//aspect — 摄像机视锥体长宽比
//near — 摄像机视锥体近端面
//far — 摄像机视锥体远端面
let camera = new THREE.PerspectiveCamera(75, container.offsetWidth / container.offsetHeight, 0.1, 1000);
//设置相机的位置
camera.position.set(0, 0, 2);
//创建一个立方体,我从官网CP的:
//https://threejs.org/docs/index.html?q=box#api/zh/geometries/BoxGeometry
let geometry = new THREE.BoxGeometry(1, 1, 1);
let material = new THREE.MeshBasicMaterial({color: 0x00ff00});
let cube = new THREE.Mesh(geometry, material);
//加到场景中
scene.add(cube);
console.log(container.offsetWidth);
let render = new THREE.WebGL1Renderer();
render.setSize(container.offsetWidth, container.offsetHeight);
render.render(scene, camera);
container.appendChild(render.domElement);
}
}
</script>
<style>
.right-part {
height: 300px;
width: 300px;
background: #9988aa;
}
.left-part {
width: 300px;
height: 300px;
background: #ff99aa;
}
#main {
display: flex;
}
</style>
预览效果