vue+three根据户型图平面绘制三维户型图效果代码-html代码-BFW代码库

vue+three根据户型图平面绘制三维户型图效果代码

代码语言：html

所属分类：三维

代码描述：vue+three根据户型图平面绘制三维户型图效果代码，创建平面地板，然后墙体一个一个创建。

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum=1.0,minimum=1.0,user-scalable=0" />
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/vue@2.6.1-dev.js"></script>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/three.js"></script>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/OrbitControls.min.js"></script>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/tween.min.js"></script>
</head>

<body>

    <div id="app"></div>
    <div id="3dAPP"></div>
    <script>
    
  

        var vm = new Vue({
            el: "#app",
            data: {
                test: "改变相机位置",
                scene: '',
                renderer: "",
                camera: "",
                controls: "",  // 鼠标控件
                fh: 2, // 地面高度
                wallHeight: 12,
                wallWeight: 1,
                angle: 0,
                roam: false,  // 漫游  开启漫游状态时应该禁用一切
    
            },
            methods: {
                // 初始化场景
                initScene() {
                    this.scene = new THREE.Scene()
                },
                
                // 计算geometry面积


                // 初始化相机
                initCamera(w = 500, h = 500) {
                    var camera = new THREE.PerspectiveCamera(45, w / h, 0.1, 10000);
                    camera.position.set(100, 100,.........完整代码请登录后点击上方下载按钮下载查看