|
@@ -130,6 +130,7 @@
|
|
|
boundary = null;
|
|
|
let stats;
|
|
|
let videoMeshGroup = [];
|
|
|
+ let cubeCamera = null;
|
|
|
init();
|
|
|
// this.clearEvent = clearEvent;
|
|
|
// this.attendEvent = attendEvent;
|
|
@@ -157,12 +158,13 @@
|
|
|
// gridHelper.position.x = 0;
|
|
|
// scene.add(gridHelper);
|
|
|
//加载环境720贴图
|
|
|
- const loader = new THREE.TextureLoader();
|
|
|
- const texture = loader.load(that.bgUrl, () => {
|
|
|
- const rt = new THREE.WebGLCubeRenderTarget(texture.image.height);
|
|
|
+ let loader = new THREE.TextureLoader();
|
|
|
+ let texture = loader.load(that.bgUrl, () => {
|
|
|
+ let rt = new THREE.WebGLCubeRenderTarget(texture.image.height);
|
|
|
rt.fromEquirectangularTexture(renderer, texture);
|
|
|
scene.background = rt.texture;
|
|
|
});
|
|
|
+ // makeInstance(),
|
|
|
//antialias 这个值得设置为false,不然IOS上截图会失效
|
|
|
renderer = that.renderer = new THREE.WebGLRenderer({
|
|
|
canvas: canvas3d,
|
|
@@ -178,20 +180,22 @@
|
|
|
controls.maxDistance = 30;
|
|
|
// controls.minPolarAngle = 0; // 默认0
|
|
|
// controls.maxPolarAngle = Math.PI / 2; // 默认Math.PI,即可以向下旋转到的视角。
|
|
|
- controls.enableZoom = false; //启用摄像机的缩放
|
|
|
- controls.enablePan = false; //禁用摄像机平移
|
|
|
- controls.enableRotate = true; //启用摄像机水平或垂直旋转
|
|
|
+ controls.enableZoom = false; //启用/禁用摄像机的缩放
|
|
|
+ controls.enablePan = false; //启用/禁用摄像机平移
|
|
|
+ controls.enableRotate = true; //启用/禁用摄像机水平或垂直旋转
|
|
|
|
|
|
// 监听相机移动事件-限制只能在当前空间范围内移动
|
|
|
// controls.addEventListener('change', () => {
|
|
|
+ // // 获取OrbitControls的缩放值
|
|
|
+ // var scale = controls.scale;
|
|
|
// // 检查相机位置是否超出边界框
|
|
|
- // if (boundary && !boundary.containsPoint(camera.position)) {
|
|
|
- // let clampedPosition = new THREE.Vector3();
|
|
|
- // boundary.clampPoint(camera.position, clampedPosition);
|
|
|
- // if (clampedPosition) {
|
|
|
- // camera.position.copy(clampedPosition);
|
|
|
- // }
|
|
|
- // }
|
|
|
+ // // if (boundary && !boundary.containsPoint(camera.position)) {
|
|
|
+ // // let clampedPosition = new THREE.Vector3();
|
|
|
+ // // boundary.clampPoint(camera.position, clampedPosition);
|
|
|
+ // // if (clampedPosition) {
|
|
|
+ // // camera.position.copy(clampedPosition);
|
|
|
+ // // }
|
|
|
+ // // }
|
|
|
// });
|
|
|
// camera.lookAt(that.controlStarPosition.x, that.controlStarPosition.y, that.controlStarPosition.z);
|
|
|
if(that.coordinate){
|
|
@@ -223,6 +227,41 @@
|
|
|
}
|
|
|
}, false);
|
|
|
}
|
|
|
+ function makeInstance() {
|
|
|
+ // let geometry = new THREE.BoxGeometry(10, 10, 10);
|
|
|
+ // //加载环境720贴图
|
|
|
+ // var loader1 = new THREE.TextureLoader();
|
|
|
+ // var texture1 = loader1.load(that.bgUrl, () => {
|
|
|
+ // let cubeRenderTarget = new THREE.WebGLCubeRenderTarget(texture1.image.height);
|
|
|
+ // cubeRenderTarget.fromEquirectangularTexture(renderer, texture1);
|
|
|
+ // // scene.background = cubeRenderTarget.texture;
|
|
|
+ // // 创建一个立方体贴图相机
|
|
|
+ // cubeCamera = new THREE.CubeCamera(1, 1000, cubeRenderTarget);
|
|
|
+ // // 创建材质并应用纹理
|
|
|
+ // let material = new THREE.MeshBasicMaterial({ envMap: cubeRenderTarget.texture,side:THREE.BackSide });
|
|
|
+ // // const material = new THREE.MeshPhongMaterial({color});
|
|
|
+ // let cube = new THREE.Mesh(geometry, material);
|
|
|
+ // cube.position.set(0,0,0);
|
|
|
+ // scene.add(cube);
|
|
|
+ // });
|
|
|
+ // 创建一个立方体贴图加载器
|
|
|
+ var loader = new THREE.CubeTextureLoader();
|
|
|
+ // 加载Equirectangular map
|
|
|
+ loader.load([
|
|
|
+ 'https://dm.static.elab-plus.com/miniProgram/pos-x.jpg',
|
|
|
+ 'https://dm.static.elab-plus.com/miniProgram/neg-x.jpg',
|
|
|
+ 'https://dm.static.elab-plus.com/miniProgram/pos-y.jpg',
|
|
|
+ 'https://dm.static.elab-plus.com/miniProgram/neg-y.jpg',
|
|
|
+ 'https://dm.static.elab-plus.com/miniProgram/pos-z.jpg',
|
|
|
+ 'https://dm.static.elab-plus.com/miniProgram/neg-z.jpg',
|
|
|
+ ], function (texture) {
|
|
|
+ // 将Equirectangular map 应用到天空盒的材质上
|
|
|
+ var material = new THREE.MeshBasicMaterial({ envMap: texture,side:THREE.BackSide });
|
|
|
+ var geometry = new THREE.BoxGeometry(10, 10, 10);
|
|
|
+ var skybox = new THREE.Mesh(geometry, material);
|
|
|
+ scene.add(skybox);
|
|
|
+ });
|
|
|
+ }
|
|
|
function moreTest(){
|
|
|
let data = [
|
|
|
{
|
|
@@ -485,6 +524,12 @@
|
|
|
if(videoMeshGroup){
|
|
|
videoMeshGroup.forEach(it=>{it.lookAt(camera.position)})
|
|
|
}
|
|
|
+ if(cubeCamera){
|
|
|
+ cubeCamera.update(renderer, scene);
|
|
|
+ }
|
|
|
+ // if(scene.background){
|
|
|
+ // scene.background.scale.set(0.5,0.5,0.5)
|
|
|
+ // }
|
|
|
renderer.render(scene, camera); //单次渲染
|
|
|
requestId = requestAnimationFrame(render, canvas3d);
|
|
|
}
|