After a long and ignorant exploration, the code for vue to load obj and mtl finally ran out, so record it;
Effect:
code:
<template>
<view class="content">
<view id="threeView">
\t\t\t
<!-- #ifdef APP-PLUS || H5 -->
<view class="threeView" id="threeView">
\t\t\t\t
\t\t\t
<view class="button">
<view type="text" @click="click" > Global View</view>
</view>
\t\t\t\t
</view>
<!-- #endif -->
<!-- #ifndef APP-PLUS || H5 -->
<view>Non-APP, H5 environment does not support</view>
<!-- #endif -->
</view>
</view>
</template>
<script module="three" lang="renderjs">
const THREE = require('static/three/build/three.min.js')
import {OrbitControls} from 'static/three/examples/jsm/controls/OrbitControls.js'
import {PointerLockControls} from 'static/three/examples/jsm/controls/PointerLockControls.js'
import { OBJLoader } from 'static/three/examples/jsm/loaders/OBJLoader.js'
import { MTLLoader } from 'static/three/examples/jsm/loaders/MTLLoader.js'
const ThreeBSP = require('static/three/build/ThreeBSP.js')(THREE)
var renderer;
var scene;
var camera;
var mesh;
var controls;
var Colors = {
red:0xf25346,
white: 0xd8d0d1,
pink:0xF5986E,
brown:0x59332e,
brownDark: 0x23190f,
blue:0x68c3c0,
};
var matArrayA = [];//inner wall
var matArrayB = [];//outer wall
export default {
mounted() {
console.log("45666666666666666666666666");
this.initThree();
this.loadMTL();
this. createControls();
// var bodyGeom = new THREE. BoxGeometry(15,15,15);
// var bodyMat = new THREE.MeshPhongMaterial({color:Colors.brown, shading:THREE.FlatShading});
// var body = new THREE. Mesh(bodyGeom, bodyMat);
// body.position.set(200,200,200);
// // mesh. add(body);
// scene. add(body)
// this. createLayout();
// this.createWallMaterail();
// this. createFloor();
this.initControls();
},
methods: {
\t\t
// loadMTL () {
// let that = this;
// let mtlLoader = new MTLLoader();
// let objloader = new OBJLoader();
// mtlLoader.load('static/model/Sideboard.mtl', function (materials) {
// materials. preload();
// objloader. setMaterials(materials);
// objloader. load('/file. obj', function (obj) {
// obj.position.set(0, -5, 0);//The position of the model
// obj.scale.set(0.002, 0.002, 0.002);//The model is zoomed in or out, and sometimes the model cannot be seen. Consider whether the model is too small or too large.
// scene.add(obj);//Add the model to the scene
// function (xhr) {
// // console.log((xhr.loaded / xhr.total) * 100 + "% loaded");
// },
// // called when loading has errors
// function (error) {
// console. log(error)
// console.log("An error happened");
// });
// });
// },
loadMTL () {
let that = this;
let mtlLoader = new MTLLoader();
let objloader = new OBJLoader();
mtlLoader.load('../../static/model/Sideboard.mtl',
function (materials) {
\t\t\t\t
materials. preload();
objloader. setMaterials(materials);
objloader.load('../../static/model/Sideboard.obj', function (obj) {
obj.position.set(0, -50, 0);//The position of the model
obj.scale.set(10.002, 1.002, 10.002);//The model is enlarged or reduced, and sometimes the model cannot be seen. Consider whether the model is too small or too large.
scene.add(obj);//add the model to the scene
},
function ( xhr ) {
\t\t\t
console.log((xhr.loaded / xhr.total) * 100 + "% Dong Kangle loaded");
},
// called when loading has errors
function (error) {
debugger
console. log(error)
console.log("An error happened");
}
\t\t\t
);
});
},
createControls () {
controls = new OrbitControls(camera, renderer.domElement)
},
// create wall texture
createWallMaterail() {
matArrayA.push(new THREE.MeshPhongMaterial({ color: 0xafc0ca })); //front 0xafc0ca: gray
matArrayA.push(new THREE.MeshPhongMaterial({ color: 0xafc0ca })); //after
matArrayA.push(new THREE.MeshPhongMaterial({ color: 0xd6e4ec })); //upper 0xd6e4ec: off-white
matArrayA.push(new THREE.MeshPhongMaterial({ color: 0xd6e4ec })); //Next
matArrayA.push(new THREE.MeshPhongMaterial({ color: 0xafc0ca })); //Left 0xafc0ca: gray
matArrayA.push(new THREE.MeshPhongMaterial({ color: 0xafc0ca })); //right
matArrayB.push(new THREE.MeshPhongMaterial({ color: 0xafc0ca })); //front 0xafc0ca: gray
matArrayB.push(new THREE.MeshPhongMaterial({ color: 0x9cb2d1 })); //after 0x9cb2d1: lavender
matArrayB.push(new THREE.MeshPhongMaterial({ color: 0xd6e4ec })); //upper 0xd6e4ec: off-white
matArrayB.push(new THREE.MeshPhongMaterial({ color: 0xd6e4ec })); //Next
matArrayB.push(new THREE.MeshPhongMaterial({ color: 0xafc0ca })); //left 0xafc0ca: gray
matArrayB.push(new THREE.MeshPhongMaterial({ color: 0xafc0ca })); //right
},
createLayout() {
// Wall 1, the longer side of the cube, the first from the left
this.createCubeWall(10, 200, 900, 0, matArrayB, -651, 100, 0);
// wall 2, the longer side of the cube, the first from the right
this.createCubeWall(10, 200, 900, 1, matArrayB, 651, 100, 0);
// Wall 3, the wall opposite the door, the shorter side of the cube
this.createCubeWall(10, 200, 1310, 1.5, matArrayB, 0, 100, -451);
// wall 4 face with door
var wall = this.returnWallObject(1310, 200, 10, 0, matArrayB, 0, 100, 455);
// door frame
var door_cube = this.returnWallObject(100, 180, 10, 0, matArrayB, 0, 90, 455);
this.createResultBsp(wall, door_cube, 1);
//Install the door for the wall, the right door
var loader = new THREE. TextureLoader();
loader.load("images/door_right.png", function (texture) {
var doorgeometry = new THREE. BoxGeometry(100, 180, 2);
var doormaterial = new THREE. MeshBasicMaterial({ map: texture, color: 0xffffff });
doormaterial. opacity = 1.0;
doormaterial.transparent = true;
door = new THREE. Mesh(doorgeometry, doormaterial);
door.position.set(-50, 0, 0);
var door1 = door. clone();
door1. position. set(50, 0, 0);
door1.visible = false;
dummy. add(door);
dummy. add(door1);
dummy. position. set(50, 90, 451)
scene. add(dummy);
});
// Room A: Partition 1
this.createCubeWall(10, 200, 250, 0, matArrayA, -151, 100, 325);
//Room A: Partition 2 without door
this.createCubeWall(10, 200, 220, 0.5, matArrayA, -256, 100, 201);
// Kitchen: Partition 3
this.createCubeWall(350, 200, 10, 0, matArrayA, 481, 100, 131);
// Kitchen: partition 4 no door
this.createCubeWall(10, 200, 200, 0, matArrayA, 301, 100, 225);
// room B
this.createCubeWall(350, 200, 10, 0, matArrayA, -471, 100, -50);
//Room B has no door
this.createCubeWall(200, 200, 10, 0.5, matArrayA, 0, 100, -350);
// room C
this.createCubeWall(220, 200, 10, 0, matArrayA, 540, 100, -50);
//Room C has no door
this.createCubeWall(200, 200, 10, 0.5, matArrayA, 250, 100, -350);
\t\t //bathroom
var cube = this.returnWallObject(10, 200, 260, 0.5, matArrayA, 125, 100, -250);
//toilet door frame
var door_cube1 = this. returnWallObject(10, 160, 80, 0.5, matArrayA, 155, 90, -250);
this.createResultBsp(cube, door_cube1, 2);
//Brown color: 0x58ACFA Transparent glass color: 0XECF1F3
var glass_material = new THREE. MeshBasicMaterial({ color: 0x58ACFA });
glass_material. opacity = 0.6;
glass_material.transparent = true;
this.createCubeWall(1, 180, 80, 0.5, glass_material, 155, 90, -250);
},
// return the wall object
returnWallObject(width, height, depth, angle, material, x, y, z) {
var cubeGeometry = new THREE. BoxGeometry(width, height, depth);
var cube = new THREE. Mesh(cubeGeometry, material);
cube.position.x = x;
cube.position.y = y;
cube.position.z = z;
cube.rotation.y += angle * Math.PI;
return cube;
},
//Dig a door on the wall and generate a BSP object through two geometries
createResultBsp(bsp, less_bsp, mat) {
switch(mat) {
case 1:
var material = new THREE. MeshPhongMaterial({ color: 0x9cb2d1, specular: 0x9cb2d1, shininess: 30, transparent: true, opacity: 1 });
break;
case 2:
var material = new THREE. MeshPhongMaterial({ color: 0xafc0ca, specular: 0xafc0ca, shininess: 30, transparent: true, opacity: 1 });
break;
default:
}
var sphere1BSP = new ThreeBSP(bsp);
var cube2BSP = new ThreeBSP(less_bsp);//0x9cb2d1 light purple, 0xC3C3C3 white gray, 0xafc0ca gray
var resultBSP = sphere1BSP. subtract(cube2BSP);
var result = resultBSP.toMesh(material);
result.material.flatshading = THREE.FlatShading;
result.geometry.computeFaceNormals(); //Recalculate the geometry side normal vector
result.geometry.computeVertexNormals();
result.material.needsUpdate = true; //update texture
result.geometry.buffersNeedUpdate = true;
result.geometry.uvsNeedUpdate = true;
scene. add(result);
},
createFloor() {
var loader = new THREE. TextureLoader();
loader.load("static/images/floor.jpg", function (texture) {
texture.wrapS = texture.wrapT = THREE.RepeatWrapping;
texture.repeat.set(10, 10);
var floorGeometry = new THREE. BoxGeometry(1600, 1100, 1);
var floorMaterial = new THREE. MeshBasicMaterial({ map: texture, side: THREE. DoubleSide });
var floor = new THREE. Mesh(floorGeometry, floorMaterial);
floor.position.y = -0.5;
floor.rotation.x = Math.PI / 2;
scene. add(floor);
});
\t\t\t
//Brown color: 0x58ACFA Transparent glass color: 0XECF1F3
var glass_material = new THREE. MeshBasicMaterial({ color: 0XECF1F3 });
glass_material. opacity = 0.4;
glass_material.transparent = true;
\t\t\t
var left_wall = this.returnWallObject(20, 200, 1100, 0, matArrayB, -801, 100, 0);
var left_cube = this.returnWallObject(20, 110, 1100, 0, matArrayB, -801, 100, 0);
this.createResultBsp(left_wall, left_cube, 1);
this.createCubeWall(1, 110, 1100, 0, glass_material, -801, 100, 0);
\t\t\t
var right_wall = this.returnWallObject(20, 200, 1100, 1, matArrayB, 801, 100, 0);
var right_cube = this.returnWallObject(20, 110, 1100, 0, matArrayB, 801, 100, 0);
this.createResultBsp(right_wall, right_cube, 1);
this.createCubeWall(1, 110, 1100, 0, glass_material, 801, 100, 0);
},
//create the wall
createCubeWall(width, height, depth, angle, material, x, y, z) {
var cubeGeometry = new THREE. BoxGeometry(width, height, depth);
var cube = new THREE. Mesh(cubeGeometry, material);
cube.position.x = x;
cube.position.y = y;
cube.position.z = z;
cube.rotation.y + = angle * Math.PI; //-rotate counterclockwise, + clockwise
scene. add(cube);
},
initThree() {
// If the return is not undefined, it means that threejs has been successfully imported
console.log('print scene API24222', THREE.Scene);
/* Create scene object Scene */
scene = new THREE. Scene();
/*
light source settings
*/
// point light source - light intensity
// var point = new THREE. PointLight(0xffffff);
// point.position.set(0, 3500, 0); // Point light position
// scene.add(point); // point light added to the scene
// ambient light
var ambient = new THREE. AmbientLight(0xffffff);
scene. add(ambient);
\t\t\t
\t\t\t
\t\t\t
// var loader = new OBJLoader();
// loader.load("static/images/qiu.obj", function (obj) { // Call the loader function of OBJ, there will be a callback function if the loading is successful, and the parameter obj is the mesh Mesh after the model is loaded successfully instance object
// console.log(obj); //You can view the return structure
// obj.scale.set(10,10000,10); //Set the size of obj model
// scene. add(obj);
// });
\t\t\t
// this. loadObj();
\t\t\t
\t\t\t
\t\t\t
/*
camera settings
*/
var width = window.innerWidth; // window width
var height = window.innerHeight; // height
var k = width / height; // window aspect ratio
var s = 1000; // 3D scene display range control coefficient, the larger the coefficient, the larger the display range
// create camera object (orthographic projection)
camera = new THREE. PerspectiveCamera(45, k, 1, 10000);
camera.position.set(0, 3500, 0); // set the camera position
camera.lookAt(scene.position); // Set the direction of the camera (pointing to the scene object)
/*
Create a renderer object
*/
renderer = new THREE. WebGLRenderer({ antialias:true });
renderer.setSize(width, height); // Set the size of the rendering area
renderer.setClearColor(0xb9d3ff, 1); // set background color
const element = document. getElementById('threeView')
element.appendChild(renderer.domElement); // Insert the canvas object into the body element
// Execute the rendering operation, specify the scene, and the camera as a parameter
renderer. render(scene, camera);
console. log(1);
this. render();
},
\t\t
//Mouse control to move the camera angle of view***** Copy the code below initControls to control the camera
initControls(){
window.addEventListener('touchstart', this.onMouseDown, false)
// click on the model
let controls = new PointerLockControls(camera, document.body);
// controls. lock();
// scene. add(controls. getObject() );
// camera = new THREE. PerspectiveCamera(90, window. innerWidth / window. innerHeight, 0.1, 20000)
// camera.position.z = 0.1
\t\t\t\t
// click on the model
// // window.addEventListener('touchstart', onMouseClick, false);
// // window.addEventListener('touchmove', onMouseMove, false);
\t\t
\t\t\t\t
// controls = new OrbitControls(camera,renderer.domElement)
// window. addEventListener( 'touchmove', function () {
// let controls = new PointerLockControls( camera, document. body );
// var ambient = new THREE. AmbientLight(0xf00ff1);
// scene. add(ambient);
// controls. lock();
// });
},
click(e){
console.log("123456789");
console. log(e);
// camera.position.set(0, 0, 0); // set camera position
// camera.position.copy(this.OricamerPosition);
// camera. quaternion. copy(this. Oricamera Quaternion);
// camera. lookAt(this. OricontrolTarget);
// control.target.copy(this.OricontrolTarget);
// control. update();
// camera. zoom = 1.0;
// camera. updateProjectionMatrix();
// let controls = new PointerLockControls(camera, document. body );
let controls = new PointerLockControls( camera, document. body );
controls.getObject().position.y = 50;
\t\t\t\t
controls.getObject().position.x = 100;
scene. add(controls. getObject() );
},
\t\t\t
loadObj () {
for (let i = 0; i < 1; i ++ ) {
new OBJLoader().setPath('../../static/images/').load(`body${i}.obj`, obj => {
obj.scale.set(1000, 1, 1)
obj. position. set(0, 0, 0)
obj.castShadow = true
obj. receiveShadow = true
obj.traverse(child => {
if (child instanceof Three. Mesh & amp; & amp; i > 0) {
child.material = new Three.MeshBasicMaterial({color: 0xfe4066})
}
})
this. scene. add(obj)
if (i > 0) {
this. object. push(obj)
}
})
}
} ,
\t\t\t
// animation
render(){
let that = this;
requestAnimationFrame(function() {
that. render();
});
renderer.render(scene,camera);//perform rendering operation
\t\t\t
}
}
}
</script>
<style>
.content {
margin: 0;
overflow: hidden;
}
.three {
width: 100%;
height: 50px;
}
.button_out{
border-radius: 50%;
border: #555555 solid 2px;
display: flex;
position: relative;
}
.button{
width: 150rpx;
height: 80rpx;
border-radius: 25rpx;
background-color: #808080;
display: flex;
position: absolute;
left: 50rpx;
top: 50rpx;
}
.buttontext{
background-color: #ffffff;
}
</style>