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, 100);
                    camera.lookAt(100,-200,800);
                    this.camera = camera
                },
                initRenderer(w = 500, h = 500) {
                    renderer = new THREE.WebGLRenderer({
                        antialias: true
                    });
                    renderer.setSize(w, h);
                    renderer.setClearColor(0x4682B4, 1.0);
    
                    document.getElementById("3dAPP").appendChild(renderer.domElement);
                    this.renderer = renderer
                },
                // 初始化灯光
                initLight() {
                    var directionalLight = new THREE.DirectionalLight(0xffffff, 1); // 模拟远处类似太阳的光源
                    directionalLight.color.setHSL(0.1, 1, 0.95);
                    directionalLight.position.set(0, 200, 0).normalize();
                    this.scene.add(directionalLight);
                    var ambient = new THREE.AmbientLight(0xffffff, 1); // AmbientLight 影响整个场景的光源
                    ambient.position.set(0, 0, 0);
                    this.scene.add(ambient);
                },
           

                // 初始化轨迹球控件  鼠标控件
                initControls() {
                    var controls = new THREE.OrbitControls(this.camera, this.renderer.domElement);
                    controls.enableDamping = true;
                    controls.dampingFactor = 0.5;
                    // 视角最小距离
                    controls.minDistance = 0;
                    // 视角最远距离
                    controls.maxDistance = 5000;
                    controls.enableKeys = true;
                    // 最大角度
                    // controls.maxPolarAngle = Math.PI / 2;
                    controls.target = new THREE.Vector3(10, 10, 10);
               .........完整代码请登录后点击上方下载按钮下载查看