// pages/ThreeModel/ThreeModel.js
|
import getMTLLoader from '../../jsm/loaders/MTLLoader.js';
|
import getOBJLoader from '../../jsm/loaders/OBJLoader.js';
|
// import CameraControls from '../../jsm/controls/CameraControls'
|
import {
|
OrbitControls
|
} from '../../jsm/controls/OrbitControls';
|
import * as THREE from '../../libs/three.weapp.js'
|
var {
|
MTLLoader
|
} = getMTLLoader(THREE);
|
var OBJLoader = getOBJLoader(THREE);
|
var window = THREE.global;
|
var camera, scene, requestAnimationFrame, renderer, controls, jeepCar, cameracontrols, texture;
|
let t0 = new Date()
|
// var animateion = wx.createAnimation({
|
// delay: 0,
|
// duration: 800,
|
// timingFunction: "ease"
|
// })
|
Page({
|
|
/**
|
* 页面的初始数据
|
*/
|
data: {
|
isOnAccelerometerChange: true,
|
threeLeft: "0",
|
vdisplay: "none",
|
view: "1",
|
change: false,
|
back: true,
|
thirdView: false
|
|
},
|
|
/**
|
* 生命周期函数--监听页面加载
|
*/
|
onLoad: function (options) {
|
this.start()
|
},
|
|
/**
|
* 生命周期函数--监听页面初次渲染完成
|
*/
|
onReady: function () {
|
|
},
|
onUnload: function () {
|
|
},
|
start: function () {
|
let that = this;
|
wx.createSelectorQuery()
|
.select('#c')
|
.node()
|
.exec((res) => {
|
console.log(res)
|
const canvas = new THREE.global.registerCanvas(res[0].node)
|
console.log(canvas, "canvas")
|
if (canvas != undefined) {
|
canvas.width = canvas._width;
|
canvas.height = canvas._height;
|
requestAnimationFrame = canvas.requestAnimationFrame;
|
that.init(canvas);
|
}
|
|
})
|
},
|
onProgress: function (xhr) {
|
if (xhr.lengthComputable) {
|
|
let percentComplete = xhr.loaded / xhr.total * 100;
|
// console.log('model ' + Math.round(percentComplete, 2) + '% downloaded');
|
|
}
|
},
|
|
onError: function () {},
|
// 模型加载
|
init: function (canvas) {
|
let that = this;
|
// render
|
renderer = new THREE.WebGLRenderer({
|
canvas,
|
antialias: true,
|
alpha: true,
|
preserveDrawingBuffer:true
|
});
|
|
renderer.setPixelRatio(window.devicePixelRatio);
|
renderer.setSize(window.innerHeight, window.innerHeight);
|
|
|
// camera
|
|
console.log(that.data.view, "函数内")
|
if (that.data.view == "1") {
|
camera = new THREE.PerspectiveCamera(10, 2, 1, -1, 100, 1000);
|
camera.position.z = 500;
|
camera.position.y = 300;
|
camera.lookAt({
|
x: 0,
|
y: 200,
|
z: 0
|
})
|
} else if (that.data.view == "2") {
|
// camera.position.set(400,400,500)
|
camera = new THREE.PerspectiveCamera(60, 2, 1, -1, 1, 10);
|
camera.position.y = 20;
|
camera.position.x = -10;
|
camera.position.z = -10;
|
camera.lookAt({
|
x: 0,
|
y: 50,
|
z: 0
|
})
|
}
|
// else if (that.data.view == "3") {
|
// camera = new THREE.PerspectiveCamera(45, 1, 1, 500);
|
// camera.position.set = (400,400,500);
|
// camera.lookAt({
|
// x:0,
|
// y:400,
|
// z:0
|
// })
|
|
// }
|
// controls
|
controls = new OrbitControls(camera, canvas);
|
controls.minZoom = 0.5;
|
controls.target.set(1, 5, 1);
|
|
|
// scan和light
|
scene = new THREE.Scene();
|
let ambientLight = new THREE.AmbientLight(0x444444, 0.4);
|
scene.add(ambientLight);
|
let AmbientLight = new THREE.AmbientLight(0xffffff, 1)
|
// let pointLight = new THREE.PointLight(0xffffff, 3);
|
camera.add(AmbientLight);
|
scene.add(camera);
|
|
// 加载obj模型
|
let loader = new OBJLoader();
|
loader.load('http://47.92.33.19:9001/version/OBJ/Diaobao.obj', function (obj) {
|
console.log(obj)
|
});
|
// 加载mtl纹理
|
let mtlLoader = new MTLLoader();
|
mtlLoader.load(
|
'http://47.92.33.19:9001/version/OBJ/Diaobao.mtl',
|
function (materials) {
|
materials.preload()
|
// console.log(that, "this")
|
loader.setMaterials(materials)
|
// 加载obj
|
loader.load('http://47.92.33.19:9001/version/OBJ/Diaobao.obj', function (obj) {
|
// 模型文件太大，缩小一下比例，方便显示
|
obj.scale.set(0.5, 0.5, 0.5)
|
obj.position.y = -15
|
// 设置可以投影
|
obj.children.forEach(item => {
|
item.castShadow = true
|
item.receiveShadow = true
|
// console.log(item,"item")
|
})
|
jeepCar = obj
|
// 添加到场景
|
scene.add(jeepCar)
|
})
|
}
|
)
|
that.animate()
|
},
|
|
animate: function () {
|
let that = this;
|
// controls.update();
|
// let t1 = new Date(); //本次时间
|
// let t = t1 - t0; // 时间差
|
// camera.translateX(0.001 * t/3) //沿着Y轴旋转着从大到小
|
// camera.translateZ(0.001 * t/3) //沿着Z轴由近到远
|
// camera.rotateY(0.0001 * t/3); //物体的均匀从左到又平移可以用相机旋转Y轴来实现
|
camera.lookAt(scene.position);
|
requestAnimationFrame(that.animate);
|
renderer.render(scene, camera);
|
},
|
|
// 模型拖动事件
|
touchStart(e) {
|
THREE.global.touchEventHandlerFactory('canvas', 'touchstart')(e)
|
},
|
touchMove(e) {
|
THREE.global.touchEventHandlerFactory('canvas', 'touchmove')(e)
|
},
|
touchEnd(e) {
|
THREE.global.touchEventHandlerFactory('canvas', 'touchend')(e)
|
},
|
|
// 页面内容事件
|
// 切换碉堡内部和外部按键
|
FirstView: function () {
|
|
this.setData({
|
change: !this.data.change
|
})
|
let that = this
|
if (that.data.change) {
|
this.setData({
|
view: "2",
|
thirdView: true
|
})
|
} else {
|
this.setData({
|
view: "1",
|
thirdView: false
|
})
|
}
|
that.start()
|
},
|
// 切换碉堡内部的视角
|
// TView: function () {
|
// if (this.data.changeTop) {
|
// this.setData({
|
// view: "3",
|
// changeTop: !this.data.changeTop
|
// })
|
// } else {
|
// this.setData({
|
// view: "2",
|
// changeTop: !this.data.changeTop
|
// })
|
// }
|
// this.start()
|
// },
|
// 播放视频
|
BindShow: function () {
|
console.log("点击了")
|
this.setData({
|
threeLeft: "100%",
|
vdisplay: "block",
|
back: false
|
})
|
},
|
// 回退上一页
|
backIndex: function () {
|
wx.navigateBack({
|
delta: 0,
|
})
|
},
|
// 视频后退按钮
|
cloth: function () {
|
console.log("点击了")
|
this.setData({
|
threeLeft: "0%",
|
vdisplay: "none",
|
back: true
|
})
|
},
|
})
|
