效果圖

核心代碼

export default ({data(){return {test: "改變相機(jī)位置",scene: '',renderer: "",camera: "",controls: "", // 鼠標(biāo)控件fh: 2, // 地面高度wallHeight: 18,wallWeight: 1}},methods: {// 初始化場(chǎng)景initScene() {this.scene = new THREE.Scene()},// 初始化相機(jī)initCamera(w = 500, h = 500) {var camera = new THREE.PerspectiveCamera(45, w / h, 0.1, 10000);camera.position.set(100, 100, 100);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); // 模擬遠(yuǎn)處類似太陽(yáng)的光源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 影響整個(gè)場(chǎng)景的光源ambient.position.set(0, 0, 0);this.scene.add(ambient);},// 初始化軌跡球控件 鼠標(biāo)控件initControls() {var controls = new THREE.OrbitControls(this.camera, this.renderer.domElement);controls.enableDamping = true;controls.dampingFactor = 0.5;// 視角最小距離controls.minDistance = 0;// 視角最遠(yuǎn)距離controls.maxDistance = 5000;controls.enableKeys = true;// 最大角度// controls.maxPolarAngle = Math.PI / 2;controls.target = new THREE.Vector3(10, 10, 10);this.controls = controlsconsole.log(controls)},// 地面createFloor() {var loader = new THREE.TextureLoader();var floor, floor1;loader.load("./img/cz.jpg", (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)}))}var mesh = new THREE.Mesh(Geometry, mtl)/*剛好在地面模型自身高度 h0地面高度 h1(地面高度 + 模型高度) / 2 即 (h0+h1)/2*/mesh.name = `wall${i}`/*這里如果是做參數(shù)傳入就不用寫這么多 case 了 但是實(shí)際開(kāi)發(fā)中 每一面墻肯定都是定制化的 有的墻面有壁畫 門 窗 貼圖等等所以寫 case 更貼近實(shí)際開(kāi)發(fā)一點(diǎn)當(dāng)然一些共用的屬性可以走參數(shù)我這里直接上case了*/switch (i) {case 1:mesh.position.set(0, (this.fh + wallHeight) / 2, 49.5)break;case 2:mesh.position.set(0, (this.fh + wallHeight) / 2, -49.5)break;case 3:mesh.rotation.y = Math.PI/2mesh.position.set(49.5, (this.fh + wallHeight) / 2, 0)break;case 4:mesh.rotation.y = Math.PI/2mesh.position.set(-49.5, (this.fh + wallHeight) / 2, 0)break;case 5:mesh.position.set(0, (this.fh + wallHeight) / 2, 0)break;case 6:mesh.rotation.y = Math.PI/2mesh.position.set(-20, (this.fh + wallHeight) / 2, 25)break;case 7:mesh.rotation.y = Math.PI/2mesh.position.set(20, (this.fh + wallHeight) / 2, 25)break;case 8:mesh.position.set(0, (this.fh + wallHeight) / 2, -12)break;case 9:mesh.rotation.y = Math.PI/2mesh.position.set(29.5, (this.fh + wallHeight) / 2, -31)break;case 10:mesh.rotation.y = Math.PI/2mesh.position.set(8, (this.fh + wallHeight) / 2, -31)break;case 11:mesh.rotation.y = Math.PI/2mesh.position.set(-18, (this.fh + wallHeight) / 2, -31)break;}this.scene.add(mesh)// console.log(Geometry)},// 模型initContent() {this.createFloor();this.createwall(1)this.createwall(2)this.createwall(3)this.createwall(4)this.createwall(5)this.createwall(6,50)this.createwall(7,50)this.createwall(8,60)this.createwall(9,38)this.createwall(10,38)this.createwall(11,38)},animate() {requestAnimationFrame(this.animate);this.renderer.render(this.scene, this.camera);// composer.render();this.update();// console.log(this.scene)},// 更新控件update() {// stats.update();this.controls.update();TWEEN.update();},init() {this.initScene();this.initCamera();// 初始化渲染器this.initRenderer(700, 700);// 初始化模型this.initContent();// 初始化燈光this.initLight();this.initControls();},// changePOS() {// this.camera.position.set(0, 300, 10)// this.animate()// }},mounted() {this.init();this.animate();}})

后續(xù)會(huì)繼續(xù)研究 three.js 以及一款3D模型制作軟件 SU 草圖大師

總結(jié)

以上是生活随笔為你收集整理的three.js 3D室内设计 - 1的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。