完成手势位置识别
等待校准坐标
This commit is contained in:
rucky
parent
5a4a777d03
commit
f1545677c3
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div class="c-shader" ref="container"></div>
|
||||
<div class="c-shader" ref="container"></div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
@ -18,493 +18,493 @@ 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(),
|
||||
// gui: new GUI(),
|
||||
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(),
|
||||
// gui: new GUI(),
|
||||
|
||||
ENTIRE_SCENE: 0,
|
||||
BLOOM_SCENE: 1,
|
||||
materials: {},
|
||||
params: {
|
||||
exposure: 1,
|
||||
bloomStrength: 5,
|
||||
bloomThreshold: 0,
|
||||
bloomRadius: 0,
|
||||
scene: "Scene with Glow",
|
||||
},
|
||||
};
|
||||
},
|
||||
created() {},
|
||||
mounted() {
|
||||
this.initStage();
|
||||
this.addAnimation();
|
||||
},
|
||||
methods: {
|
||||
initStage() {
|
||||
//基础参数
|
||||
this.container = this.$refs.container;
|
||||
this.camera = new THREE.Camera();
|
||||
this.camera.position.z = 1;
|
||||
this.scene = new THREE.Scene();
|
||||
ENTIRE_SCENE: 0,
|
||||
BLOOM_SCENE: 1,
|
||||
materials: {},
|
||||
params: {
|
||||
exposure: 1,
|
||||
bloomStrength: 5,
|
||||
bloomThreshold: 0,
|
||||
bloomRadius: 0,
|
||||
scene: "Scene with Glow",
|
||||
},
|
||||
};
|
||||
},
|
||||
created() {},
|
||||
mounted() {
|
||||
this.initStage();
|
||||
this.addAnimation();
|
||||
},
|
||||
methods: {
|
||||
initStage() {
|
||||
//基础参数
|
||||
this.container = this.$refs.container;
|
||||
this.camera = new THREE.Camera();
|
||||
this.camera.position.z = 1;
|
||||
this.scene = new THREE.Scene();
|
||||
|
||||
this.bloomLayer = new THREE.Layers();
|
||||
this.bloomLayer.set(this.BLOOM_SCENE);
|
||||
this.bloomLayer = new THREE.Layers();
|
||||
this.bloomLayer.set(this.BLOOM_SCENE);
|
||||
|
||||
this.darkMaterial = new THREE.MeshBasicMaterial({ color: "black" });
|
||||
this.darkMaterial = new THREE.MeshBasicMaterial({ color: "black" });
|
||||
|
||||
// 定义 webglrender
|
||||
this.renderer = new THREE.WebGLRenderer({ antialias: true });
|
||||
this.renderer.setPixelRatio(window.devicePixelRatio);
|
||||
this.renderer.setSize(window.innerWidth, window.innerHeight);
|
||||
this.renderer.toneMapping = THREE.ReinhardToneMapping;
|
||||
if (!document.getElementById("webgl")) {
|
||||
this.renderer.domElement.id = "webgl";
|
||||
this.container.appendChild(this.renderer.domElement);
|
||||
}
|
||||
// 定义 webglrender
|
||||
this.renderer = new THREE.WebGLRenderer({ antialias: true });
|
||||
this.renderer.setPixelRatio(window.devicePixelRatio);
|
||||
this.renderer.setSize(window.innerWidth, window.innerHeight);
|
||||
this.renderer.toneMapping = THREE.ReinhardToneMapping;
|
||||
if (!document.getElementById("webgl")) {
|
||||
this.renderer.domElement.id = "webgl";
|
||||
this.container.appendChild(this.renderer.domElement);
|
||||
}
|
||||
|
||||
// 定义相机
|
||||
this.camera = new THREE.PerspectiveCamera(
|
||||
40,
|
||||
window.innerWidth / window.innerHeight,
|
||||
1,
|
||||
2000
|
||||
);
|
||||
this.camera.position.set(
|
||||
0,
|
||||
0,
|
||||
window.deviceInfo.device == "PC" ? 500 : 1000
|
||||
);
|
||||
this.camera.lookAt(0, 0, 0);
|
||||
// 定义相机
|
||||
this.camera = new THREE.PerspectiveCamera(
|
||||
40,
|
||||
window.innerWidth / window.innerHeight,
|
||||
1,
|
||||
2000
|
||||
);
|
||||
this.camera.position.set(
|
||||
0,
|
||||
0,
|
||||
window.deviceInfo.device == "PC" ? 500 : 1000
|
||||
);
|
||||
this.camera.lookAt(0, 0, 0);
|
||||
|
||||
// 定义操控
|
||||
this.controls = new OrbitControls(
|
||||
this.camera,
|
||||
this.renderer.domElement
|
||||
);
|
||||
this.controls.maxPolarAngle = Math.PI * 0.5;
|
||||
this.controls.minDistance = 1;
|
||||
this.controls.maxDistance = 1500;
|
||||
this.controls.addEventListener("change", this.render);
|
||||
// 定义操控
|
||||
this.controls = new OrbitControls(
|
||||
this.camera,
|
||||
this.renderer.domElement
|
||||
);
|
||||
this.controls.maxPolarAngle = Math.PI * 0.5;
|
||||
this.controls.minDistance = 1;
|
||||
this.controls.maxDistance = 1500;
|
||||
this.controls.addEventListener("change", this.render);
|
||||
|
||||
// 添加全局环境光
|
||||
this.scene.add(new THREE.AmbientLight(0x404040));
|
||||
// 添加全局环境光
|
||||
this.scene.add(new THREE.AmbientLight(0x404040));
|
||||
|
||||
this.renderScene = new RenderPass(this.scene, this.camera);
|
||||
this.renderScene = new RenderPass(this.scene, this.camera);
|
||||
|
||||
this.bloomPass = new UnrealBloomPass(
|
||||
new THREE.Vector2(window.innerWidth, window.innerHeight),
|
||||
1.5,
|
||||
0.4,
|
||||
0.85
|
||||
);
|
||||
this.bloomPass.threshold = this.params.bloomThreshold;
|
||||
this.bloomPass.strength = this.params.bloomStrength;
|
||||
this.bloomPass.radius = this.params.bloomRadius;
|
||||
this.bloomPass = new UnrealBloomPass(
|
||||
new THREE.Vector2(window.innerWidth, window.innerHeight),
|
||||
1.5,
|
||||
0.4,
|
||||
0.85
|
||||
);
|
||||
this.bloomPass.threshold = this.params.bloomThreshold;
|
||||
this.bloomPass.strength = this.params.bloomStrength;
|
||||
this.bloomPass.radius = this.params.bloomRadius;
|
||||
|
||||
this.bloomComposer = new EffectComposer(this.renderer);
|
||||
this.bloomComposer.renderToScreen = false;
|
||||
this.bloomComposer.addPass(this.renderScene);
|
||||
this.bloomComposer.addPass(this.bloomPass);
|
||||
this.bloomComposer = new EffectComposer(this.renderer);
|
||||
this.bloomComposer.renderToScreen = false;
|
||||
this.bloomComposer.addPass(this.renderScene);
|
||||
this.bloomComposer.addPass(this.bloomPass);
|
||||
|
||||
this.finalPass = new ShaderPass(
|
||||
new THREE.ShaderMaterial({
|
||||
uniforms: {
|
||||
baseTexture: { value: null },
|
||||
bloomTexture: {
|
||||
value: this.bloomComposer.renderTarget2.texture,
|
||||
},
|
||||
},
|
||||
vertexShader: colorVertex,
|
||||
fragmentShader: colorFrag,
|
||||
defines: {},
|
||||
}),
|
||||
"baseTexture"
|
||||
);
|
||||
this.finalPass.needsSwap = true;
|
||||
this.finalPass = new ShaderPass(
|
||||
new THREE.ShaderMaterial({
|
||||
uniforms: {
|
||||
baseTexture: { value: null },
|
||||
bloomTexture: {
|
||||
value: this.bloomComposer.renderTarget2.texture,
|
||||
},
|
||||
},
|
||||
vertexShader: colorVertex,
|
||||
fragmentShader: colorFrag,
|
||||
defines: {},
|
||||
}),
|
||||
"baseTexture"
|
||||
);
|
||||
this.finalPass.needsSwap = true;
|
||||
|
||||
this.finalComposer = new EffectComposer(this.renderer);
|
||||
this.finalComposer.addPass(this.renderScene);
|
||||
this.finalComposer.addPass(this.finalPass);
|
||||
this.finalComposer = new EffectComposer(this.renderer);
|
||||
this.finalComposer.addPass(this.renderScene);
|
||||
this.finalComposer.addPass(this.finalPass);
|
||||
|
||||
// 添加点击事件
|
||||
window.addEventListener("pointerdown", this.onPointerDown);
|
||||
// 添加点击事件
|
||||
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();
|
||||
// 自动缩放
|
||||
// 设置场景
|
||||
this.setupScene();
|
||||
// 循环动画
|
||||
this.animate();
|
||||
// 自动缩放
|
||||
|
||||
window.addEventListener("resize", this.onWindowResize);
|
||||
this.onWindowResize();
|
||||
},
|
||||
onPointerDown(event) {
|
||||
this.mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
|
||||
this.mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
|
||||
window.addEventListener("resize", this.onWindowResize);
|
||||
this.onWindowResize();
|
||||
},
|
||||
onPointerDown(event) {
|
||||
this.mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
|
||||
this.mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
|
||||
|
||||
this.raycaster.setFromCamera(this.mouse, this.camera);
|
||||
this.intersects = this.raycaster.intersectObjects(
|
||||
this.group.children,
|
||||
false
|
||||
);
|
||||
if (this.intersects.length > 0) {
|
||||
const object = this.intersects[0].object;
|
||||
gsap.to(object.scale, {
|
||||
x: 0,
|
||||
y: 0,
|
||||
z: 0,
|
||||
onUpdate: () => {
|
||||
this.render();
|
||||
},
|
||||
});
|
||||
object.layers.toggle(this.BLOOM_SCENE);
|
||||
this.render();
|
||||
}
|
||||
},
|
||||
onWindowResize(event) {
|
||||
const width = window.innerWidth;
|
||||
const height = window.innerHeight;
|
||||
this.raycaster.setFromCamera(this.mouse, this.camera);
|
||||
this.intersects = this.raycaster.intersectObjects(
|
||||
this.group.children,
|
||||
false
|
||||
);
|
||||
if (this.intersects.length > 0) {
|
||||
const object = this.intersects[0].object;
|
||||
gsap.to(object.scale, {
|
||||
x: 0,
|
||||
y: 0,
|
||||
z: 0,
|
||||
onUpdate: () => {
|
||||
this.render();
|
||||
},
|
||||
});
|
||||
object.layers.toggle(this.BLOOM_SCENE);
|
||||
this.render();
|
||||
}
|
||||
},
|
||||
onWindowResize(event) {
|
||||
const width = window.innerWidth;
|
||||
const height = window.innerHeight;
|
||||
|
||||
this.camera.aspect = width / height;
|
||||
this.camera.updateProjectionMatrix();
|
||||
this.camera.aspect = width / height;
|
||||
this.camera.updateProjectionMatrix();
|
||||
|
||||
this.renderer.setSize(width, height);
|
||||
this.renderer.setSize(width, height);
|
||||
|
||||
this.bloomComposer.setSize(width, height);
|
||||
this.finalComposer.setSize(width, height);
|
||||
this.bloomComposer.setSize(width, height);
|
||||
this.finalComposer.setSize(width, height);
|
||||
|
||||
this.render();
|
||||
},
|
||||
setupScene() {
|
||||
this.scene.traverse(this.disposeMaterial);
|
||||
this.scene.children.length = 0;
|
||||
this.render();
|
||||
},
|
||||
setupScene() {
|
||||
this.scene.traverse(this.disposeMaterial);
|
||||
this.scene.children.length = 0;
|
||||
|
||||
const geometry = new THREE.IcosahedronGeometry(1, 15);
|
||||
this.group = new THREE.Group();
|
||||
for (let ii = 0; ii < 2; ii++) {
|
||||
pos1024.origin.forEach((item, index) => {
|
||||
item.forEach((t, i) => {
|
||||
if (t == 0) {
|
||||
const color = new THREE.Color();
|
||||
color.setHSL(
|
||||
Math.random(),
|
||||
0.7,
|
||||
Math.random() * 0.2 + 0.05
|
||||
);
|
||||
const material = new THREE.MeshBasicMaterial({
|
||||
color: color,
|
||||
});
|
||||
const sphere = new THREE.Mesh(geometry, material);
|
||||
const geometry = new THREE.IcosahedronGeometry(1, 15);
|
||||
this.group = new THREE.Group();
|
||||
for (let ii = 0; ii < 2; ii++) {
|
||||
pos1024.origin.forEach((item, index) => {
|
||||
item.forEach((t, i) => {
|
||||
if (t == 0) {
|
||||
const color = new THREE.Color();
|
||||
color.setHSL(
|
||||
Math.random(),
|
||||
0.7,
|
||||
Math.random() * 0.2 + 0.05
|
||||
);
|
||||
const material = new THREE.MeshBasicMaterial({
|
||||
color: color,
|
||||
});
|
||||
const sphere = new THREE.Mesh(geometry, material);
|
||||
|
||||
sphere.position.x = i * 10 - (item.length / 2) * 10;
|
||||
sphere.position.y =
|
||||
-index * 10 + (pos1024.origin.length / 2) * 10;
|
||||
sphere.position.z = ii * 5;
|
||||
// sphere.position
|
||||
// .normalize()
|
||||
// .multiplyScalar(Math.random() * 4.0 + 2);
|
||||
sphere.scale.setScalar(Math.random() * 4 + 3);
|
||||
this.scene.add(sphere);
|
||||
sphere.position.x = i * 10 - (item.length / 2) * 10;
|
||||
sphere.position.y =
|
||||
-index * 10 + (pos1024.origin.length / 2) * 10;
|
||||
sphere.position.z = ii * 5;
|
||||
// sphere.position
|
||||
// .normalize()
|
||||
// .multiplyScalar(Math.random() * 4.0 + 2);
|
||||
sphere.scale.setScalar(Math.random() * 4 + 3);
|
||||
this.scene.add(sphere);
|
||||
|
||||
// if (Math.random() < 0.25)
|
||||
sphere.layers.enable(this.BLOOM_SCENE);
|
||||
// if (Math.random() < 0.25)
|
||||
sphere.layers.enable(this.BLOOM_SCENE);
|
||||
|
||||
this.group.add(sphere);
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
this.group.add(sphere);
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// for (let i = 0; i < this.remaining; i++) {
|
||||
// const color = new THREE.Color();
|
||||
// color.setHSL(Math.random(), 0.7, Math.random() * 0.2 + 0.05);
|
||||
// for (let i = 0; i < this.remaining; i++) {
|
||||
// const color = new THREE.Color();
|
||||
// color.setHSL(Math.random(), 0.7, Math.random() * 0.2 + 0.05);
|
||||
|
||||
// const material = new THREE.MeshBasicMaterial({ color: color });
|
||||
// const sphere = new THREE.Mesh(geometry, material);
|
||||
// sphere.position.x = Math.random() * 30 - 15;
|
||||
// sphere.position.y = Math.random() * 30 - 15;
|
||||
// sphere.position.z = Math.random() * 30 - 15;
|
||||
// sphere.position
|
||||
// .normalize()
|
||||
// .multiplyScalar(Math.random() * 5.0 + 2.5);
|
||||
// sphere.scale.setScalar(Math.random() * Math.random() + 0.5);
|
||||
// this.scene.add(sphere);
|
||||
// const material = new THREE.MeshBasicMaterial({ color: color });
|
||||
// const sphere = new THREE.Mesh(geometry, material);
|
||||
// sphere.position.x = Math.random() * 30 - 15;
|
||||
// sphere.position.y = Math.random() * 30 - 15;
|
||||
// sphere.position.z = Math.random() * 30 - 15;
|
||||
// sphere.position
|
||||
// .normalize()
|
||||
// .multiplyScalar(Math.random() * 5.0 + 2.5);
|
||||
// sphere.scale.setScalar(Math.random() * Math.random() + 0.5);
|
||||
// this.scene.add(sphere);
|
||||
|
||||
// // if (Math.random() < 0.25)
|
||||
// sphere.layers.enable(this.BLOOM_SCENE);
|
||||
// // if (Math.random() < 0.25)
|
||||
// sphere.layers.enable(this.BLOOM_SCENE);
|
||||
|
||||
// this.group.add(sphere);
|
||||
// }
|
||||
this.scene.add(this.group);
|
||||
this.render();
|
||||
},
|
||||
disposeMaterial(obj) {
|
||||
if (obj.material) {
|
||||
obj.material.dispose();
|
||||
}
|
||||
},
|
||||
animate() {
|
||||
requestAnimationFrame(this.animate);
|
||||
this.render();
|
||||
},
|
||||
render() {
|
||||
switch (this.params.scene) {
|
||||
case "Scene only":
|
||||
this.renderer.render(this.scene, this.camera);
|
||||
break;
|
||||
case "Glow only":
|
||||
this.renderBloom(false);
|
||||
break;
|
||||
case "Scene with Glow":
|
||||
default:
|
||||
// render scene with bloom
|
||||
this.renderBloom(true);
|
||||
// this.group.add(sphere);
|
||||
// }
|
||||
this.scene.add(this.group);
|
||||
this.render();
|
||||
},
|
||||
disposeMaterial(obj) {
|
||||
if (obj.material) {
|
||||
obj.material.dispose();
|
||||
}
|
||||
},
|
||||
animate() {
|
||||
requestAnimationFrame(this.animate);
|
||||
this.render();
|
||||
},
|
||||
render() {
|
||||
switch (this.params.scene) {
|
||||
case "Scene only":
|
||||
this.renderer.render(this.scene, this.camera);
|
||||
break;
|
||||
case "Glow only":
|
||||
this.renderBloom(false);
|
||||
break;
|
||||
case "Scene with Glow":
|
||||
default:
|
||||
// render scene with bloom
|
||||
this.renderBloom(true);
|
||||
|
||||
// render the entire scene, then render bloom scene on top
|
||||
this.finalComposer.render();
|
||||
break;
|
||||
}
|
||||
// this.renderer.render(this.scene, this.camera);
|
||||
},
|
||||
renderBloom(mask) {
|
||||
if (mask === true) {
|
||||
this.scene.traverse(this.darkenNonBloomed);
|
||||
this.bloomComposer.render();
|
||||
this.scene.traverse(this.restoreMaterial);
|
||||
} else {
|
||||
this.camera.layers.set(this.BLOOM_SCENE);
|
||||
this.bloomComposer.render();
|
||||
this.camera.layers.set(this.ENTIRE_SCENE);
|
||||
}
|
||||
},
|
||||
darkenNonBloomed(obj) {
|
||||
if (obj.isMesh && this.bloomLayer.test(obj.layers) === false) {
|
||||
this.materials[obj.uuid] = obj.material;
|
||||
obj.material = this.darkMaterial;
|
||||
}
|
||||
},
|
||||
restoreMaterial(obj) {
|
||||
if (this.materials[obj.uuid]) {
|
||||
obj.material = this.materials[obj.uuid];
|
||||
delete this.materials[obj.uuid];
|
||||
}
|
||||
},
|
||||
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,
|
||||
});
|
||||
// render the entire scene, then render bloom scene on top
|
||||
this.finalComposer.render();
|
||||
break;
|
||||
}
|
||||
// this.renderer.render(this.scene, this.camera);
|
||||
},
|
||||
renderBloom(mask) {
|
||||
if (mask === true) {
|
||||
this.scene.traverse(this.darkenNonBloomed);
|
||||
this.bloomComposer.render();
|
||||
this.scene.traverse(this.restoreMaterial);
|
||||
} else {
|
||||
this.camera.layers.set(this.BLOOM_SCENE);
|
||||
this.bloomComposer.render();
|
||||
this.camera.layers.set(this.ENTIRE_SCENE);
|
||||
}
|
||||
},
|
||||
darkenNonBloomed(obj) {
|
||||
if (obj.isMesh && this.bloomLayer.test(obj.layers) === false) {
|
||||
this.materials[obj.uuid] = obj.material;
|
||||
obj.material = this.darkMaterial;
|
||||
}
|
||||
},
|
||||
restoreMaterial(obj) {
|
||||
if (this.materials[obj.uuid]) {
|
||||
obj.material = this.materials[obj.uuid];
|
||||
delete this.materials[obj.uuid];
|
||||
}
|
||||
},
|
||||
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();
|
||||
},
|
||||
}
|
||||
);
|
||||
});
|
||||
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++;
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
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++) {
|
||||
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,
|
||||
});
|
||||
}
|
||||
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);
|
||||
// },
|
||||
// });
|
||||
},
|
||||
},
|
||||
// 光闪烁
|
||||
// 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);
|
||||
}
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
position: relative;
|
||||
z-index: 0;
|
||||
.select-btn {
|
||||
// background-color: #fff;
|
||||
.paCenterBottom(2%,50%,auto,10);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -41,7 +41,7 @@
|
||||
</div>
|
||||
|
||||
<!-- canvas -->
|
||||
<canvas class="canvas" ref="canvas"></canvas>
|
||||
<div class="canvas-container" ref="container"></div>
|
||||
|
||||
<!-- hand -->
|
||||
<div
|
||||
@ -88,10 +88,22 @@ export default {
|
||||
this.video = this.$refs.myVideo;
|
||||
this.canvas = this.$refs.canvas;
|
||||
|
||||
this.initTHREELayer();
|
||||
this.checkUserDeviceSuitable();
|
||||
},
|
||||
methods: {
|
||||
// 获取ios版本号
|
||||
getIOSVersion() {
|
||||
let str = navigator.userAgent.toLowerCase();
|
||||
let ver = str.match(/cpu iphone os (.*?) like mac os/);
|
||||
if (!ver) {
|
||||
console.log("请在Ios系统中打开");
|
||||
} else {
|
||||
console.log(
|
||||
"你当前的Ios系统版本为：" + ver[1].replace(/_/g, ".")
|
||||
);
|
||||
return ver[1].replace(/_/g, ".");
|
||||
}
|
||||
},
|
||||
// 检测用户手机是否兼容
|
||||
// > 14.3 ios ok
|
||||
checkUserDeviceSuitable() {
|
||||
@ -271,14 +283,17 @@ export default {
|
||||
|
||||
this.videoRealSize = handledSize;
|
||||
|
||||
// 初始化three
|
||||
this.initTHREELayer();
|
||||
|
||||
console.log("Got stream with constraints:", constraints);
|
||||
console.log(`Using video device: ${videoTracks[0].label}`);
|
||||
console.log("Got stream size:", videoTracks);
|
||||
console.log("Got stream size:", streamSize);
|
||||
console.log(
|
||||
"Got streamHandled size:",
|
||||
window.innerHeight
|
||||
// handledSize
|
||||
window.innerHeight,
|
||||
handledSize
|
||||
);
|
||||
|
||||
this.video.srcObject = stream;
|
||||
@ -296,10 +311,6 @@ export default {
|
||||
responseVideoAndCanvas(size) {
|
||||
this.video.width = window.innerWidth;
|
||||
this.video.height = window.innerHeight;
|
||||
// init canvcas
|
||||
this.ctx = this.canvas.getContext("2d");
|
||||
this.canvas.width = window.innerWidth;
|
||||
this.canvas.height = window.innerHeight;
|
||||
},
|
||||
// 获得stream大小
|
||||
GetStreamDimensions(stream) {
|
||||
@ -396,7 +407,7 @@ export default {
|
||||
cursorPos = this.ExponentialCoordinateAverage(
|
||||
this.ComputeCursorPositionFromCoordinates(e.coordinates)
|
||||
);
|
||||
console.log(cursorPos);
|
||||
// console.log(cursorPos);
|
||||
}
|
||||
|
||||
// console.log(e.type);
|
||||
@ -425,19 +436,6 @@ export default {
|
||||
}
|
||||
});
|
||||
},
|
||||
// 获取ios版本号
|
||||
getIOSVersion() {
|
||||
let str = navigator.userAgent.toLowerCase();
|
||||
let ver = str.match(/cpu iphone os (.*?) like mac os/);
|
||||
if (!ver) {
|
||||
console.log("请在Ios系统中打开");
|
||||
} else {
|
||||
console.log(
|
||||
"你当前的Ios系统版本为：" + ver[1].replace(/_/g, ".")
|
||||
);
|
||||
return ver[1].replace(/_/g, ".");
|
||||
}
|
||||
},
|
||||
// 计算坐标值平均数
|
||||
ExponentialMovingAverage(value, alpha) {
|
||||
if (this.curValue_ === undefined || this.curValue_ === null) {
|
||||
@ -482,21 +480,40 @@ export default {
|
||||
},
|
||||
// init THREELayer
|
||||
initTHREELayer() {
|
||||
this.camera_ = new THREE.OrthographicCamera(
|
||||
0,
|
||||
this.videoRealSize.width,
|
||||
0,
|
||||
this.videoRealSize.height,
|
||||
0,
|
||||
this.container = this.$refs.container;
|
||||
this.camera_ = new THREE.PerspectiveCamera(
|
||||
45,
|
||||
window.innerWidth / window.innerHeight,
|
||||
0.1,
|
||||
1000
|
||||
);
|
||||
|
||||
// const distance =
|
||||
// this.videoRealSize.height /
|
||||
// (2 * Math.tan((this.camera_.fov * Math.PI) / 360));
|
||||
// this.camera_.up.set(0, -1, 0);
|
||||
// this.camera_.position.set(
|
||||
// this.videoRealSize.width / 2,
|
||||
// this.videoRealSize.height / 2,
|
||||
// -distance
|
||||
// );
|
||||
// this.camera_.lookAt(
|
||||
// this.videoRealSize.width,
|
||||
// this.videoRealSize.height / 2,
|
||||
// 0
|
||||
// );
|
||||
|
||||
this.camera_.position.set(0, 0, 1000);
|
||||
this.camera_.lookAt(0, 0, 0);
|
||||
|
||||
this.scene_ = new THREE.Scene();
|
||||
|
||||
this.renderer_ = new THREE.WebGLRenderer({
|
||||
alpha: true,
|
||||
powerPreference: "high-performance",
|
||||
failIfMajorPerformanceCaveat: false,
|
||||
antialias: true,
|
||||
});
|
||||
this.renderer_.domElement = this.canvas;
|
||||
this.renderer_.debug.checkShaderErrors = false;
|
||||
this.renderer_.setSize(
|
||||
this.videoRealSize.width,
|
||||
@ -505,12 +522,60 @@ export default {
|
||||
this.renderer_.setPixelRatio(window.devicePixelRatio);
|
||||
this.renderer_.setClearColor(0x000000, 0.0);
|
||||
this.renderer_.autoClear = true;
|
||||
this.scene_ = new THREE.Scene();
|
||||
this.renderer_.domElement.id = "canvas";
|
||||
this.container.appendChild(this.renderer_.domElement);
|
||||
this.renderer_.domElement.width = this.video.width;
|
||||
this.renderer_.domElement.height = this.video.height;
|
||||
|
||||
// this.animate();
|
||||
this.onWindowResize();
|
||||
window.addEventListener(
|
||||
"resize",
|
||||
() => {
|
||||
this.onWindowResize();
|
||||
},
|
||||
false
|
||||
);
|
||||
},
|
||||
onWindowResize(event) {
|
||||
this.camera_.aspect = window.innerWidth / window.innerHeight;
|
||||
this.camera_.updateProjectionMatrix();
|
||||
this.renderer_.setSize(window.innerWidth, window.innerHeight);
|
||||
},
|
||||
addTestBall() {
|
||||
//light
|
||||
var light = new THREE.DirectionalLight(0xffffff);
|
||||
var light2 = new THREE.DirectionalLight(0xffffff);
|
||||
light.position.set(200, 0, 200);
|
||||
light2.position.set(-200, 0, 200);
|
||||
this.scene_.add(light);
|
||||
|
||||
this.group3D = new THREE.Object3D();
|
||||
//放入些mesh做实验
|
||||
var material = new THREE.MeshLambertMaterial({
|
||||
color: "#2194ce",
|
||||
});
|
||||
// var cubeGeometry = new THREE.CubeGeometry(100, 100, 100);
|
||||
var geo2 = new THREE.SphereGeometry(40, 40, 40);
|
||||
for (var i = 0; i < 50; i++) {
|
||||
var spr = new THREE.Mesh(geo2, material);
|
||||
spr.position.set(
|
||||
Math.random() * 800 - 400,
|
||||
Math.random() * 800 - 400,
|
||||
Math.random() * 800 - 400
|
||||
);
|
||||
this.group3D.add(spr);
|
||||
}
|
||||
|
||||
this.scene_.add(this.group3D);
|
||||
|
||||
this.ambientLight = new THREE.AmbientLight(0x8a7e7e, 0.2);
|
||||
this.scene_.add(this.ambientLight);
|
||||
},
|
||||
// draw pointer
|
||||
drawPoint(x, y) {
|
||||
if (!this.meshAdded) {
|
||||
this.geo_ = new THREE.RingGeometry(0, 8, 30);
|
||||
this.geo_ = new THREE.RingGeometry(0, 10, 32);
|
||||
this.mat_ = new THREE.MeshBasicMaterial({
|
||||
color: "red",
|
||||
side: THREE.DoubleSide,
|
||||
@ -518,12 +583,17 @@ export default {
|
||||
this.mesh_ = new THREE.Mesh(this.geo_, this.mat_);
|
||||
this.scene_.add(this.mesh_);
|
||||
this.meshAdded = true;
|
||||
console.log("three mesh added");
|
||||
}
|
||||
|
||||
this.mesh_.position.x = x * this.videoRealSize.width;
|
||||
this.mesh_.position.y = y * this.videoRealSize.height;
|
||||
this.mesh_.position.z = 0;
|
||||
},
|
||||
animate() {
|
||||
requestAnimationFrame(this.animate);
|
||||
this.Render();
|
||||
},
|
||||
// THREE canvas render
|
||||
Render() {
|
||||
this.renderer_.render(this.scene_, this.camera_);
|
||||
@ -604,7 +674,7 @@ export default {
|
||||
}
|
||||
}
|
||||
}
|
||||
.canvas {
|
||||
.canvas-container {
|
||||
.paLayout(50%,50%,auto,100%,100);
|
||||
transform: translate(-50%, -50%);
|
||||
pointer-events: none;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user