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>

预览效果