更新 ar demo
This commit is contained in:
rucky
parent
cafa19f6fd
commit
24d78f8378
File diff suppressed because one or more lines are too long
@ -3,7 +3,9 @@
|
||||
默认设置
|
||||
-------------------*/
|
||||
*{
|
||||
padding:0; margin:0; box-sizing:border-box; -webkit-box-sizing:border-box;/* -webkit-user-select: none;-moz-user-select: none; */ /*touch-action: none; */
|
||||
padding:0; margin:0; box-sizing:border-box; -webkit-box-sizing:border-box;
|
||||
/* -webkit-user-select: none;-moz-user-select: none; */
|
||||
// touch-action: none;
|
||||
// -webkit-transform: translate3d(0, 0, 0);
|
||||
// -moz-transform: translate3d(0, 0, 0);
|
||||
// -ms-transform: translate3d(0, 0, 0);
|
||||
@ -108,8 +110,8 @@ html,body{
|
||||
.loop((@i+1));//执行某个需要循环的方法
|
||||
@realIndex: @i+1;
|
||||
@aniname : ~'leaf@{realIndex}';
|
||||
@delaytime: @i*0.05+0.1;
|
||||
@duration: @i*0.1*0.5;
|
||||
@delaytime: @i*0.025+0.1;
|
||||
@duration: @i*0.1*0.25;
|
||||
@durationStr: ~'@{duration}s';
|
||||
@delaytimeStr: ~'@{delaytime}s';
|
||||
@rotate: @i*10-10;
|
||||
|
||||
@ -1,17 +1,17 @@
|
||||
export default {
|
||||
origin: [
|
||||
[1, 0, 0, 0, 1, 1, 1, 0, 0, 0, 0, 0, 1, 1, 1, 1, 0, 0, 0, 0, 0, 1, 1, 1, 0, 0, 1, 1, 1, 0, 0],
|
||||
[0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 1, 1, 1, 0, 0],
|
||||
[1, 1, 0, 0, 1, 1, 0, 0, 1, 1, 1, 0, 0, 1, 1, 0, 0, 1, 1, 1, 0, 0, 1, 1, 0, 0, 1, 1, 1, 0, 0],
|
||||
[1, 1, 0, 0, 1, 1, 0, 0, 1, 1, 1, 0, 0, 1, 1, 1, 1, 1, 1, 1, 0, 0, 1, 1, 0, 0, 1, 1, 1, 0, 0],
|
||||
[1, 1, 0, 0, 1, 1, 0, 0, 1, 1, 1, 0, 0, 1, 1, 1, 1, 1, 1, 0, 0, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0],
|
||||
[1, 1, 0, 0, 1, 1, 0, 0, 1, 1, 1, 0, 0, 1, 1, 1, 1, 1, 0, 0, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0],
|
||||
[1, 1, 0, 0, 1, 1, 0, 0, 1, 1, 1, 0, 0, 1, 1, 1, 1, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0],
|
||||
[1, 1, 0, 0, 1, 1, 0, 0, 1, 1, 1, 0, 0, 1, 1, 1, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0],
|
||||
[1, 1, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 0, 0],
|
||||
[1, 1, 0, 0, 1, 1, 1, 0, 0, 0, 0, 0, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 0, 0],
|
||||
],
|
||||
game: [
|
||||
[1, 1, 1, 0, 0, 0, 1, 1, 1, 1, 0, 0, 0, 0, 0, 1, 1, 1, 1, 0, 0, 0, 0, 0, 1, 1, 1, 0, 0, 1, 1, 1, 0, 0, 1, 1,],
|
||||
[1, 1, 0, 0, 0, 0, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 1, 1, 1, 0, 0, 1, 1,],
|
||||
[1, 1, 1, 1, 0, 0, 1, 1, 1, 0, 0, 1, 1, 1, 0, 0, 1, 1, 0, 0, 1, 1, 1, 0, 0, 1, 1, 0, 0, 1, 1, 1, 0, 0, 1, 1,],
|
||||
[1, 1, 1, 1, 0, 0, 1, 1, 1, 0, 0, 1, 1, 1, 0, 0, 1, 1, 1, 1, 1, 1, 1, 0, 0, 1, 1, 0, 0, 1, 1, 1, 0, 0, 1, 1,],
|
||||
[1, 1, 1, 1, 0, 0, 1, 1, 1, 0, 0, 1, 1, 1, 0, 0, 1, 1, 1, 1, 1, 1, 0, 0, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 1, 1,],
|
||||
[1, 1, 1, 1, 0, 0, 1, 1, 1, 0, 0, 1, 1, 1, 0, 0, 1, 1, 1, 1, 1, 0, 0, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 1, 1,],
|
||||
[1, 1, 1, 1, 0, 0, 1, 1, 1, 0, 0, 1, 1, 1, 0, 0, 1, 1, 1, 1, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 1, 1,],
|
||||
[1, 1, 1, 1, 0, 0, 1, 1, 1, 0, 0, 1, 1, 1, 0, 0, 1, 1, 1, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 1, 1,],
|
||||
[1, 1, 1, 1, 0, 0, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 0, 0, 1, 1,],
|
||||
[1, 1, 1, 1, 0, 0, 1, 1, 1, 1, 0, 0, 0, 0, 0, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 0, 0, 1, 1,],
|
||||
[1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,],
|
||||
[1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,],
|
||||
[1, 0, 0, 0, 0, 0, 1, 1, 1, 1, 1, 0, 0, 0, 1, 1, 1, 1, 0, 0, 1, 1, 1, 1, 1, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0,],
|
||||
[0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 0, 0, 0, 0, 0, 1, 1, 1, 0, 0, 0, 1, 1, 1, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0,],
|
||||
[0, 0, 1, 1, 1, 0, 0, 1, 1, 0, 0, 1, 1, 1, 0, 0, 1, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 1, 0, 0, 1, 1, 1, 1, 1,],
|
||||
@ -23,4 +23,28 @@ export default {
|
||||
[0, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 1, 1, 1, 0, 0, 1, 1, 0, 0, 1, 1, 1, 1, 1, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0,],
|
||||
[1, 0, 0, 0, 0, 0, 1, 1, 1, 0, 0, 1, 1, 1, 0, 0, 1, 1, 0, 0, 1, 1, 1, 1, 1, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0,],
|
||||
],
|
||||
ready: [
|
||||
[0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 0, 0, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 1, 1, 1, 0, 0, 1, 1, 1, 1, 0, 0,],
|
||||
[0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 0, 0, 0, 0, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 1, 1, 1, 1, 0, 0,],
|
||||
[0, 0, 1, 1, 1, 0, 0, 1, 0, 0, 1, 1, 1, 1, 1, 1, 1, 0, 0, 1, 1, 0, 0, 1, 1, 0, 0, 1, 1, 1, 1, 0, 0, 1, 1, 0, 0, 1, 1, 0, 0, 1,],
|
||||
[0, 0, 1, 1, 0, 0, 0, 1, 0, 0, 1, 1, 1, 1, 1, 1, 0, 0, 1, 1, 1, 1, 0, 0, 1, 0, 0, 1, 1, 1, 1, 0, 0, 1, 1, 0, 0, 1, 1, 0, 0, 1,],
|
||||
[0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 1, 1, 1, 1, 0, 0, 1, 0, 0, 1, 1, 1, 1, 0, 0, 1, 1, 1, 0, 0, 0, 0, 1, 1,],
|
||||
[0, 0, 0, 0, 0, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 1, 1, 1, 1, 0, 0, 1, 1, 1, 1, 0, 0, 1, 1, 1,],
|
||||
[0, 0, 1, 0, 0, 1, 1, 1, 0, 0, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 1, 1, 1, 1, 0, 0, 1, 1, 1, 1, 0, 0, 1, 1, 1,],
|
||||
[0, 0, 1, 1, 0, 0, 1, 1, 0, 0, 1, 1, 1, 1, 1, 1, 0, 0, 1, 1, 1, 1, 0, 0, 1, 0, 0, 1, 1, 1, 1, 0, 0, 1, 1, 1, 1, 0, 0, 1, 1, 1,],
|
||||
[0, 0, 1, 1, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 1, 1, 1, 1, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 1, 0, 0, 1, 1, 1,],
|
||||
[0, 0, 1, 1, 1, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 1, 1, 1, 1, 0, 0, 1, 0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 0, 0, 1, 1, 1,],
|
||||
[1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,],
|
||||
[1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,],
|
||||
[1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,],
|
||||
[1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,],
|
||||
[1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 1, 1, 1, 1, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,],
|
||||
[1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 1, 1, 1, 0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,],
|
||||
[1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,],
|
||||
[1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,],
|
||||
[1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,],
|
||||
[1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,],
|
||||
[1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,],
|
||||
[1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,],
|
||||
],
|
||||
}
|
||||
293
src/components/ar/index.vue
Normal file
293
src/components/ar/index.vue
Normal file
@ -0,0 +1,293 @@
|
||||
<template>
|
||||
<div class="c-shader" ref="container"></div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import gsap from "gsap";
|
||||
import * as THREE from "three";
|
||||
import * as Stats from "stats.js";
|
||||
|
||||
import colorVertex from "@/assets/shader/color_vertex.glsl";
|
||||
import colorFrag from "@/assets/shader/color_fragment.glsl";
|
||||
import pos1024 from "@/assets/layout/1024.js";
|
||||
import { TubePainter } from "three/examples/jsm/misc/TubePainter.js";
|
||||
import { ARButton } from "three/examples//jsm/webxr/ARButton.js";
|
||||
|
||||
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";
|
||||
import { EffectComposer } from "three/examples/jsm/postprocessing/EffectComposer.js";
|
||||
import { RenderPass } from "three/examples/jsm/postprocessing/RenderPass.js";
|
||||
import { ShaderPass } from "three/examples/jsm/postprocessing/ShaderPass.js";
|
||||
import { UnrealBloomPass } from "three/examples/jsm/postprocessing/UnrealBloomPass.js";
|
||||
|
||||
export default {
|
||||
name: "color",
|
||||
props: {
|
||||
msg: String,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
remaining: 50,
|
||||
container: null,
|
||||
camera: null,
|
||||
scene: null,
|
||||
renderer: null,
|
||||
mouse: new THREE.Vector2(),
|
||||
raycaster: new THREE.Raycaster(),
|
||||
cursor: new THREE.Vector3(),
|
||||
};
|
||||
},
|
||||
created() {},
|
||||
mounted() {
|
||||
this.initStage();
|
||||
// this.addAnimation();
|
||||
},
|
||||
methods: {
|
||||
initStage() {
|
||||
//基础参数
|
||||
this.container = this.$refs.container;
|
||||
this.camera = new THREE.PerspectiveCamera(
|
||||
70,
|
||||
window.innerWidth / window.innerHeight,
|
||||
0.01,
|
||||
20
|
||||
);
|
||||
this.scene = new THREE.Scene();
|
||||
|
||||
// 定义 webglrender
|
||||
this.renderer = new THREE.WebGLRenderer({
|
||||
antialias: true,
|
||||
alpha: true,
|
||||
});
|
||||
this.renderer.setPixelRatio(window.devicePixelRatio);
|
||||
this.renderer.setSize(window.innerWidth, window.innerHeight);
|
||||
this.renderer.xr.enabled = true;
|
||||
if (!document.getElementById("webgl")) {
|
||||
this.renderer.domElement.id = "webgl";
|
||||
this.container.appendChild(this.renderer.domElement);
|
||||
}
|
||||
document.body.appendChild(ARButton.createButton(this.renderer));
|
||||
|
||||
// 定义操控
|
||||
|
||||
// 添加全局环境光
|
||||
const light = new THREE.HemisphereLight(0xffffff, 0xbbbbff, 1);
|
||||
light.position.set(0, 1, 0);
|
||||
this.scene.add(light);
|
||||
|
||||
this.painter = new TubePainter();
|
||||
this.painter.setSize(0.4);
|
||||
this.painter.mesh.material.side = THREE.DoubleSide;
|
||||
this.scene.add(this.painter.mesh);
|
||||
|
||||
function onSelectEnd() {
|
||||
this.userData.isSelecting = false;
|
||||
}
|
||||
function onSelectStart() {
|
||||
this.userData.isSelecting = true;
|
||||
this.userData.skipFrames = 2;
|
||||
}
|
||||
|
||||
this.controller = this.renderer.xr.getController(0);
|
||||
this.controller.addEventListener("selectstart", onSelectStart);
|
||||
this.controller.addEventListener("selectend", onSelectEnd);
|
||||
this.controller.userData.skipFrames = 0;
|
||||
this.scene.add(this.controller);
|
||||
|
||||
// 循环动画
|
||||
this.animate();
|
||||
// 自动缩放
|
||||
window.addEventListener("resize", this.onWindowResize);
|
||||
this.onWindowResize();
|
||||
},
|
||||
handleController(controller) {
|
||||
const userData = controller.userData;
|
||||
|
||||
this.cursor.set(0, 0, -0.2).applyMatrix4(controller.matrixWorld);
|
||||
|
||||
if (userData.isSelecting === true) {
|
||||
if (userData.skipFrames >= 0) {
|
||||
// TODO(mrdoob) Revisit this
|
||||
|
||||
userData.skipFrames--;
|
||||
|
||||
this.painter.moveTo(this.cursor);
|
||||
} else {
|
||||
this.painter.lineTo(this.cursor);
|
||||
this.painter.update();
|
||||
}
|
||||
}
|
||||
},
|
||||
onWindowResize(event) {
|
||||
const width = window.innerWidth;
|
||||
const height = window.innerHeight;
|
||||
|
||||
this.camera.aspect = width / height;
|
||||
this.camera.updateProjectionMatrix();
|
||||
|
||||
this.renderer.setSize(width, height);
|
||||
},
|
||||
animate() {
|
||||
this.renderer.setAnimationLoop(this.render);
|
||||
// requestAnimationFrame(this.animate);
|
||||
// this.render();
|
||||
},
|
||||
render() {
|
||||
this.handleController(this.controller);
|
||||
|
||||
this.renderer.render(this.scene, this.camera);
|
||||
},
|
||||
addAnimation() {
|
||||
// 自旋转
|
||||
gsap.to(this.group.rotation, {
|
||||
y: -Math.PI * 2,
|
||||
x: 0.1,
|
||||
duration: 5,
|
||||
// yoyo: true,
|
||||
// repeat: -1,
|
||||
onUpdate: () => {
|
||||
// this.renderer.toneMappingExposure = Math.pow(
|
||||
// this.params.exposure,
|
||||
// 4.0
|
||||
// );
|
||||
// this.render();
|
||||
// console.log(this.params.scene);
|
||||
},
|
||||
});
|
||||
// 球体自动
|
||||
this.group.children.map((item, index) => {
|
||||
gsap.to(item.scale, {
|
||||
x: "+=.5",
|
||||
y: "+=.5",
|
||||
z: "+=.5",
|
||||
stagger: 0.01,
|
||||
duration: 1,
|
||||
ease: "none",
|
||||
yoyoEase: "none",
|
||||
yoyo: true,
|
||||
repeat: 10,
|
||||
});
|
||||
|
||||
let op = item.position;
|
||||
gsap.fromTo(
|
||||
item.position,
|
||||
{
|
||||
x: () => {
|
||||
return Math.random() * 100 - 50;
|
||||
},
|
||||
y: () => {
|
||||
return Math.random() * 100 - 50;
|
||||
},
|
||||
z: () => {
|
||||
return Math.random() * 100 - 20;
|
||||
},
|
||||
},
|
||||
{
|
||||
x: op.x,
|
||||
y: op.y,
|
||||
z: op.z,
|
||||
duration: 5,
|
||||
onUpdate: () => {
|
||||
// if (index == 1) this.render();
|
||||
},
|
||||
}
|
||||
);
|
||||
});
|
||||
|
||||
setTimeout(() => {
|
||||
let iii = 0;
|
||||
for (let ii = 0; ii < 2; ii++) {
|
||||
pos1024.ready.forEach((item, index) => {
|
||||
item.forEach((t, i) => {
|
||||
if (t == 0) {
|
||||
let position = {};
|
||||
position.x = i * 10 - (item.length / 2) * 10;
|
||||
position.y =
|
||||
-index * 10 +
|
||||
(pos1024.ready.length / 2) * 10;
|
||||
position.z = ii * 10;
|
||||
gsap.to(this.group.children[iii].position, {
|
||||
x: position.x,
|
||||
y: position.y,
|
||||
z: position.z,
|
||||
duration: 1,
|
||||
});
|
||||
iii++;
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
this.group.children.forEach((item, index) => {
|
||||
if (index >= iii) {
|
||||
gsap.to(item.position, {
|
||||
x: 10000,
|
||||
y: 10000,
|
||||
z: 10000,
|
||||
});
|
||||
// gsap.to(item.scale, { x: 0, y: 0, z: 0 });
|
||||
} else {
|
||||
gsap.to(item.position, {
|
||||
x: Math.random() * 1000 - 500,
|
||||
y: Math.random() * 1000 - 500,
|
||||
z: Math.random() * 1000,
|
||||
duration: 2,
|
||||
delay: 4,
|
||||
});
|
||||
gsap.to(item.scale, {
|
||||
x: 0,
|
||||
y: 0,
|
||||
z: 0,
|
||||
duration: 2.5,
|
||||
delay: 4,
|
||||
});
|
||||
}
|
||||
});
|
||||
}, 6000);
|
||||
// for (let ii = 0; ii < 2; ii++) {
|
||||
|
||||
// }
|
||||
|
||||
if (window.deviceInfo.device !== "PC") {
|
||||
gsap.to(this.camera.position, {
|
||||
z: 1200,
|
||||
delay: 1,
|
||||
});
|
||||
gsap.to(this.camera.position, {
|
||||
z: 1400,
|
||||
delay: 6.5,
|
||||
});
|
||||
}
|
||||
|
||||
// 光闪烁
|
||||
// gsap.to(this.params, {
|
||||
// exposure: 1.1,
|
||||
// duration: 2,
|
||||
// yoyo: true,
|
||||
// repeat: -1,
|
||||
// onUpdate: () => {
|
||||
// this.renderer.toneMappingExposure = Math.pow(
|
||||
// this.params.exposure,
|
||||
// 4.0
|
||||
// );
|
||||
// this.render();
|
||||
// // console.log(this.params.scene);
|
||||
// },
|
||||
// });
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<!-- Add "scoped" attribute to limit CSS to this component only -->
|
||||
<style scoped lang="less">
|
||||
.c-shader {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
position: relative;
|
||||
z-index: 0;
|
||||
.select-btn {
|
||||
// background-color: #fff;
|
||||
.paCenterBottom(2%,50%,auto,10);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -31,7 +31,7 @@ export default {
|
||||
renderer: null,
|
||||
mouse: new THREE.Vector2(),
|
||||
raycaster: new THREE.Raycaster(),
|
||||
gui: new GUI(),
|
||||
// gui: new GUI(),
|
||||
|
||||
ENTIRE_SCENE: 0,
|
||||
BLOOM_SCENE: 1,
|
||||
@ -68,7 +68,10 @@ export default {
|
||||
this.renderer.setPixelRatio(window.devicePixelRatio);
|
||||
this.renderer.setSize(window.innerWidth, window.innerHeight);
|
||||
this.renderer.toneMapping = THREE.ReinhardToneMapping;
|
||||
this.container.appendChild(this.renderer.domElement);
|
||||
if (!document.getElementById("webgl")) {
|
||||
this.renderer.domElement.id = "webgl";
|
||||
this.container.appendChild(this.renderer.domElement);
|
||||
}
|
||||
|
||||
// 定义相机
|
||||
this.camera = new THREE.PerspectiveCamera(
|
||||
@ -77,7 +80,11 @@ export default {
|
||||
1,
|
||||
2000
|
||||
);
|
||||
this.camera.position.set(0, 0, 500);
|
||||
this.camera.position.set(
|
||||
0,
|
||||
0,
|
||||
window.deviceInfo.device == "PC" ? 500 : 1000
|
||||
);
|
||||
this.camera.lookAt(0, 0, 0);
|
||||
|
||||
// 定义操控
|
||||
@ -87,7 +94,7 @@ export default {
|
||||
);
|
||||
this.controls.maxPolarAngle = Math.PI * 0.5;
|
||||
this.controls.minDistance = 1;
|
||||
this.controls.maxDistance = 500;
|
||||
this.controls.maxDistance = 1500;
|
||||
this.controls.addEventListener("change", this.render);
|
||||
|
||||
// 添加全局环境光
|
||||
@ -133,61 +140,67 @@ export default {
|
||||
// 添加点击事件
|
||||
window.addEventListener("pointerdown", this.onPointerDown);
|
||||
|
||||
this.gui
|
||||
.add(this.params, "scene", [
|
||||
"Scene with Glow",
|
||||
"Glow only",
|
||||
"Scene only",
|
||||
])
|
||||
.onChange((value) => {
|
||||
switch (value) {
|
||||
case "Scene with Glow":
|
||||
this.bloomComposer.renderToScreen = false;
|
||||
break;
|
||||
case "Glow only":
|
||||
this.bloomComposer.renderToScreen = true;
|
||||
break;
|
||||
case "Scene only":
|
||||
// nothing to do
|
||||
break;
|
||||
}
|
||||
// this.gui
|
||||
// .add(this.params, "scene", [
|
||||
// "Scene with Glow",
|
||||
// "Glow only",
|
||||
// "Scene only",
|
||||
// ])
|
||||
// .onChange((value) => {
|
||||
// switch (value) {
|
||||
// case "Scene with Glow":
|
||||
// this.bloomComposer.renderToScreen = false;
|
||||
// break;
|
||||
// case "Glow only":
|
||||
// this.bloomComposer.renderToScreen = true;
|
||||
// break;
|
||||
// case "Scene only":
|
||||
// // nothing to do
|
||||
// break;
|
||||
// }
|
||||
|
||||
this.render();
|
||||
});
|
||||
// this.render();
|
||||
// });
|
||||
|
||||
this.folder = this.gui.addFolder("Bloom Parameters");
|
||||
// this.folder = this.gui.addFolder("Bloom Parameters");
|
||||
|
||||
this.folder
|
||||
.add(this.params, "exposure", 0.1, 2)
|
||||
.onChange((value) => {
|
||||
this.renderer.toneMappingExposure = Math.pow(value, 4.0);
|
||||
this.render();
|
||||
});
|
||||
// this.folder
|
||||
// .add(this.params, "exposure", 0.1, 2)
|
||||
// .onChange((value) => {
|
||||
// this.renderer.toneMappingExposure = Math.pow(value, 4.0);
|
||||
// this.render();
|
||||
// });
|
||||
|
||||
this.folder
|
||||
.add(this.params, "bloomThreshold", 0.0, 1.0)
|
||||
.onChange((value) => {
|
||||
this.bloomPass.threshold = Number(value);
|
||||
this.render();
|
||||
});
|
||||
// this.folder
|
||||
// .add(this.params, "bloomThreshold", 0.0, 1.0)
|
||||
// .onChange((value) => {
|
||||
// this.bloomPass.threshold = Number(value);
|
||||
// this.render();
|
||||
// });
|
||||
|
||||
this.folder
|
||||
.add(this.params, "bloomStrength", 0.0, 10.0)
|
||||
.onChange((value) => {
|
||||
this.bloomPass.strength = Number(value);
|
||||
this.render();
|
||||
});
|
||||
// this.folder
|
||||
// .add(this.params, "bloomStrength", 0.0, 10.0)
|
||||
// .onChange((value) => {
|
||||
// this.bloomPass.strength = Number(value);
|
||||
// this.render();
|
||||
// });
|
||||
|
||||
this.folder
|
||||
.add(this.params, "bloomRadius", 0.0, 1.0)
|
||||
.step(0.01)
|
||||
.onChange((value) => {
|
||||
this.bloomPass.radius = Number(value);
|
||||
this.render();
|
||||
});
|
||||
// this.folder
|
||||
// .add(this.params, "bloomRadius", 0.0, 1.0)
|
||||
// .step(0.01)
|
||||
// .onChange((value) => {
|
||||
// this.bloomPass.radius = Number(value);
|
||||
// this.render();
|
||||
// });
|
||||
|
||||
// 设置场景
|
||||
this.setupScene();
|
||||
// 循环动画
|
||||
this.animate();
|
||||
// 自动缩放
|
||||
|
||||
window.addEventListener("resize", this.onWindowResize);
|
||||
this.onWindowResize();
|
||||
},
|
||||
onPointerDown(event) {
|
||||
this.mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
|
||||
@ -295,8 +308,8 @@ export default {
|
||||
}
|
||||
},
|
||||
animate() {
|
||||
// requestAnimationFrame(this.animate);
|
||||
// this.render();
|
||||
requestAnimationFrame(this.animate);
|
||||
this.render();
|
||||
},
|
||||
render() {
|
||||
switch (this.params.scene) {
|
||||
@ -344,6 +357,7 @@ export default {
|
||||
// 自旋转
|
||||
gsap.to(this.group.rotation, {
|
||||
y: -Math.PI * 2,
|
||||
x: 0.1,
|
||||
duration: 5,
|
||||
// yoyo: true,
|
||||
// repeat: -1,
|
||||
@ -358,6 +372,18 @@ export default {
|
||||
});
|
||||
// 球体自动
|
||||
this.group.children.map((item, index) => {
|
||||
gsap.to(item.scale, {
|
||||
x: "+=.5",
|
||||
y: "+=.5",
|
||||
z: "+=.5",
|
||||
stagger: 0.01,
|
||||
duration: 1,
|
||||
ease: "none",
|
||||
yoyoEase: "none",
|
||||
yoyo: true,
|
||||
repeat: 10,
|
||||
});
|
||||
|
||||
let op = item.position;
|
||||
gsap.fromTo(
|
||||
item.position,
|
||||
@ -378,39 +404,59 @@ export default {
|
||||
z: op.z,
|
||||
duration: 5,
|
||||
onUpdate: () => {
|
||||
if (index == 1) this.render();
|
||||
// if (index == 1) this.render();
|
||||
},
|
||||
}
|
||||
);
|
||||
});
|
||||
|
||||
let iii = 0;
|
||||
setTimeout(() => {
|
||||
pos1024.game.forEach((item, index) => {
|
||||
item.forEach((t, i) => {
|
||||
if (t == 0) {
|
||||
let position = {};
|
||||
position.x = i * 10 - (item.length / 2) * 10;
|
||||
position.y =
|
||||
-index * 10 + (pos1024.game.length / 2) * 10;
|
||||
position.z = 0;
|
||||
gsap.to(this.group.children[iii].position, {
|
||||
x: position.x,
|
||||
y: position.y,
|
||||
z: position.z,
|
||||
duration: 1,
|
||||
onUpdate: () => {
|
||||
if (i == 0) this.render();
|
||||
},
|
||||
});
|
||||
iii++;
|
||||
}
|
||||
let iii = 0;
|
||||
for (let ii = 0; ii < 2; ii++) {
|
||||
pos1024.ready.forEach((item, index) => {
|
||||
item.forEach((t, i) => {
|
||||
if (t == 0) {
|
||||
let position = {};
|
||||
position.x = i * 10 - (item.length / 2) * 10;
|
||||
position.y =
|
||||
-index * 10 +
|
||||
(pos1024.ready.length / 2) * 10;
|
||||
position.z = ii * 10;
|
||||
gsap.to(this.group.children[iii].position, {
|
||||
x: position.x,
|
||||
y: position.y,
|
||||
z: position.z,
|
||||
duration: 1,
|
||||
});
|
||||
iii++;
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
this.group.children.forEach((item, index) => {
|
||||
if (index > iii) {
|
||||
gsap.to(item.scale, { x: 0, y: 0, z: 0 });
|
||||
if (index >= iii) {
|
||||
gsap.to(item.position, {
|
||||
x: 10000,
|
||||
y: 10000,
|
||||
z: 10000,
|
||||
});
|
||||
// gsap.to(item.scale, { x: 0, y: 0, z: 0 });
|
||||
} else {
|
||||
gsap.to(item.position, {
|
||||
x: Math.random() * 1000 - 500,
|
||||
y: Math.random() * 1000 - 500,
|
||||
z: Math.random() * 1000,
|
||||
duration: 2,
|
||||
delay: 4,
|
||||
});
|
||||
gsap.to(item.scale, {
|
||||
x: 0,
|
||||
y: 0,
|
||||
z: 0,
|
||||
duration: 2.5,
|
||||
delay: 4,
|
||||
});
|
||||
}
|
||||
});
|
||||
}, 6000);
|
||||
@ -418,6 +464,17 @@ export default {
|
||||
|
||||
// }
|
||||
|
||||
if (window.deviceInfo.device !== "PC") {
|
||||
gsap.to(this.camera.position, {
|
||||
z: 1200,
|
||||
delay: 1,
|
||||
});
|
||||
gsap.to(this.camera.position, {
|
||||
z: 1400,
|
||||
delay: 6.5,
|
||||
});
|
||||
}
|
||||
|
||||
// 光闪烁
|
||||
// gsap.to(this.params, {
|
||||
// exposure: 1.1,
|
||||
|
||||
40
src/page/index/AR/index.vue
Normal file
40
src/page/index/AR/index.vue
Normal file
@ -0,0 +1,40 @@
|
||||
<!--
|
||||
* @Author: your name
|
||||
* @Date: 2020-08-28 15:20:15
|
||||
* @LastEditTime: 2020-10-10 17:19:06
|
||||
* @LastEditors: Please set LastEditors
|
||||
* @Description: In User Settings Edit
|
||||
* @FilePath: /xfhd-vue-scaffold/src/page/index/Home/Index.vue
|
||||
-->
|
||||
<template>
|
||||
<div class="color">
|
||||
<AR></AR>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
// @ is an alias to /src
|
||||
import AR from "@/components/ar/index.vue";
|
||||
|
||||
export default {
|
||||
name: "ar",
|
||||
components: { AR },
|
||||
mounted() {},
|
||||
methods: {
|
||||
showTips() {
|
||||
this.$weui.topTips("正在努力开发中……敬请期待", {
|
||||
duration: 1500,
|
||||
className: "custom-classname",
|
||||
callback: function () {
|
||||
// console.log('close');
|
||||
},
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<!-- Add "scoped" attribute to limit CSS to this component only -->
|
||||
<style scoped lang="less">
|
||||
.color {
|
||||
min-height: 100vh;
|
||||
}
|
||||
</style>
|
||||
@ -19,23 +19,27 @@
|
||||
<p class="page__desc">have fun！</p>
|
||||
</div>
|
||||
<div class="weui-grids" style="margin-top: 100px">
|
||||
<div style="opacity: 0.5" @click="jump(1)" class="weui-grid">
|
||||
<div class="weui-grid__icon">
|
||||
<span class="iconfont"></span>
|
||||
</div>
|
||||
<p class="weui-grid__label">鉴色</p>
|
||||
</div>
|
||||
<a
|
||||
href="#"
|
||||
<div
|
||||
style="opacity: 0.5"
|
||||
@click="showTips"
|
||||
class="weui-grid"
|
||||
@click="jump(1)"
|
||||
class="weui-grid link"
|
||||
>
|
||||
<div class="weui-grid__icon">
|
||||
<span class="iconfont"></span>
|
||||
</div>
|
||||
<p class="weui-grid__label">预留</p>
|
||||
</a>
|
||||
<p class="weui-grid__label">Color</p>
|
||||
</div>
|
||||
<div
|
||||
href="#"
|
||||
style="opacity: 0.5"
|
||||
@click="jump(2)"
|
||||
class="weui-grid link"
|
||||
>
|
||||
<div class="weui-grid__icon">
|
||||
<span class="iconfont"></span>
|
||||
</div>
|
||||
<p class="weui-grid__label">AR Paint</p>
|
||||
</div>
|
||||
<a
|
||||
href="#"
|
||||
style="opacity: 0.5"
|
||||
@ -111,6 +115,11 @@ export default {
|
||||
name: "Color",
|
||||
params: {},
|
||||
});
|
||||
} else if (id == 2) {
|
||||
this.$router.push({
|
||||
name: "AR",
|
||||
params: {},
|
||||
});
|
||||
}
|
||||
},
|
||||
showTips() {
|
||||
@ -134,6 +143,9 @@ export default {
|
||||
.paLayout(0,0,100%,100%,101);
|
||||
pointer-events: none;
|
||||
}
|
||||
.link {
|
||||
cursor: pointer;
|
||||
}
|
||||
.dialog {
|
||||
.paLayout(0,0,100%,50%,102);
|
||||
color: #fff;
|
||||
|
||||
@ -122,7 +122,7 @@ new Vue({
|
||||
gsap.to("#loadingContainer", {
|
||||
autoAlpha: 0,
|
||||
duration: 0.65,
|
||||
delay: 3.2,
|
||||
delay: 2,
|
||||
onComplete: () => {
|
||||
document.getElementById('loadingContainer').remove();
|
||||
}
|
||||
|
||||
@ -10,6 +10,7 @@ import Vue from 'vue'
|
||||
import VueRouter from 'vue-router'
|
||||
import Home from '../Home/index.vue'
|
||||
import Color from '../Color/index.vue'
|
||||
import AR from '../AR/index.vue'
|
||||
|
||||
Vue.use(VueRouter)
|
||||
|
||||
@ -37,7 +38,16 @@ const routes = [
|
||||
name: "Color",
|
||||
component: Color,
|
||||
meta: {
|
||||
title: "鉴色", // 标题
|
||||
title: "Color", // 标题
|
||||
keepAlive: false, // 是否保持活跃
|
||||
},
|
||||
},
|
||||
{
|
||||
path: "/ar",
|
||||
name: "AR",
|
||||
component: AR,
|
||||
meta: {
|
||||
title: "AR Paint", // 标题
|
||||
keepAlive: false, // 是否保持活跃
|
||||
},
|
||||
},
|
||||
|
||||
Loading…
Reference in New Issue
Block a user