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);
                    this.controls = controls
                    console.log(controls)
                },
    
                // 地面
                createFloor() {
                    var loader = new THREE.TextureLoader();
                    var floor, floor1;
                    loader.load("//repo.bfw.wiki/bfwrepo/image/5fa875b6c1194.png", (texture) => {
                        texture.wrapS = texture.wrapT = THREE.RepeatWrapping;
                        texture.repeat.set(30, 30);
                        var floorGeometry = new THREE.BoxGeometry(100, 100, this.fh);
                        var floorMaterial = new THREE.MeshBasicMaterial({
                            map: texture,
                        });
                        floor = new THREE.Mesh(floorGeometry, floorMaterial);
                        floor.rotation.x = -Math.PI / 2;
                        floor.position.set(0, 0, 0)
                        floor.name = "地面";
                        this.scene.add(floor);
                    });
                },
                /**
                 * @param i  某一块墙  
                 * @param wallHeight 墙高  
                 * 
                 */
                createwall(i,width=100, wallHeight = this.wallHeight, wallWeight = this.wallWeight) {
                    var Geometry = new THREE.BoxGeometry(width, wallHeight, wallWeight);
                    
                  
                    var mtl = []
                    for (let i = 0; i < Geometry.faces.length; i++) {
                        mtl.push(
                            new THREE.MeshBasicMaterial({
                                color: new THREE.Color(Math.random() * 0xffffff)
                            })
                        )
               .........完整代码请登录后点击上方下载按钮下载查看