添加画板
This commit is contained in:
rucky
parent
05bd8826ad
commit
c02820c3c8
@ -62,6 +62,7 @@
|
||||
"deploy-cli-service": "^1.2.0",
|
||||
"eslint": "^6.7.2",
|
||||
"eslint-plugin-vue": "^6.2.2",
|
||||
"fabric": "^5.0.0",
|
||||
"glslify": "^7.1.1",
|
||||
"handtrackjs": "^0.1.5",
|
||||
"jsmpeg": "^1.0.0",
|
||||
|
||||
@ -1,12 +1,12 @@
|
||||
<template>
|
||||
<div class="c-shader" ref="container">
|
||||
<div class="camra-data">
|
||||
camera.position<br />
|
||||
x:{{ camera ? camera.position.x : "" }} <br />
|
||||
y:{{ camera ? camera.position.y : "" }} <br />
|
||||
z:{{ camera ? camera.position.z : "" }} <br />
|
||||
</div>
|
||||
</div>
|
||||
<div class="c-shader" ref="container">
|
||||
<div class="camra-data">
|
||||
camera.position<br />
|
||||
x:{{ camera ? camera.position.x : "" }} <br />
|
||||
y:{{ camera ? camera.position.y : "" }} <br />
|
||||
z:{{ camera ? camera.position.z : "" }} <br />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
@ -20,306 +20,316 @@ import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader.js";
|
||||
import { DRACOLoader } from "three/examples/jsm/loaders/DRACOLoader.js";
|
||||
|
||||
export default {
|
||||
name: "color",
|
||||
props: {
|
||||
msg: String,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
remaining: 50,
|
||||
container: null,
|
||||
camera: null,
|
||||
scene: null,
|
||||
renderer: null,
|
||||
reticle: null,
|
||||
cursor: new THREE.Vector3(),
|
||||
hitTestSource: null,
|
||||
hitTestSourceRequested: false,
|
||||
};
|
||||
},
|
||||
created() {},
|
||||
mounted() {
|
||||
this.initStage();
|
||||
name: "color",
|
||||
props: {
|
||||
msg: String,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
remaining: 50,
|
||||
container: null,
|
||||
camera: null,
|
||||
scene: null,
|
||||
renderer: null,
|
||||
reticle: null,
|
||||
cursor: new THREE.Vector3(),
|
||||
hitTestSource: null,
|
||||
hitTestSourceRequested: false,
|
||||
};
|
||||
},
|
||||
created() {},
|
||||
mounted() {
|
||||
if (window.deviceInfo.system == "IOS") {
|
||||
alert("您当前系统不支持该AR特性");
|
||||
this.$router.replace({
|
||||
name: "Home",
|
||||
params: {},
|
||||
});
|
||||
return false;
|
||||
} else if (window.deviceInfo.app == "WX") {
|
||||
alert("您当前浏览器不支持,请在大于v81版chrome浏览器中打开预览");
|
||||
}
|
||||
this.initStage();
|
||||
|
||||
// 循环动画
|
||||
this.animate();
|
||||
// this.addAnimation();
|
||||
},
|
||||
methods: {
|
||||
initStage() {
|
||||
//基础参数
|
||||
this.container = this.$refs.container;
|
||||
this.camera = new THREE.PerspectiveCamera(
|
||||
70,
|
||||
window.innerWidth / window.innerHeight,
|
||||
0.01,
|
||||
5
|
||||
);
|
||||
this.scene = new THREE.Scene();
|
||||
// 循环动画
|
||||
this.animate();
|
||||
// this.addAnimation();
|
||||
},
|
||||
methods: {
|
||||
initStage() {
|
||||
//基础参数
|
||||
this.container = this.$refs.container;
|
||||
this.camera = new THREE.PerspectiveCamera(
|
||||
70,
|
||||
window.innerWidth / window.innerHeight,
|
||||
0.01,
|
||||
5
|
||||
);
|
||||
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, {
|
||||
requiredFeatures: ["hit-test"],
|
||||
})
|
||||
);
|
||||
// 定义 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, {
|
||||
requiredFeatures: ["hit-test"],
|
||||
})
|
||||
);
|
||||
|
||||
// 定义操控
|
||||
// 定义操控
|
||||
|
||||
// 添加全局环境光
|
||||
const light = new THREE.HemisphereLight(0xffffff, 0xbbbbff, 1);
|
||||
light.position.set(0.5, 1, 0.25);
|
||||
this.scene.add(light);
|
||||
// 添加全局环境光
|
||||
const light = new THREE.HemisphereLight(0xffffff, 0xbbbbff, 1);
|
||||
light.position.set(0.5, 1, 0.25);
|
||||
this.scene.add(light);
|
||||
|
||||
this.painter = new TubePainter();
|
||||
this.painter.setSize(0.4);
|
||||
// this.painter.mesh.material = new THREE.MeshLambertMaterial({
|
||||
// color: 0x0f19662,
|
||||
// });
|
||||
this.painter.mesh.material.side = THREE.DoubleSide;
|
||||
this.scene.add(this.painter.mesh);
|
||||
this.painter = new TubePainter();
|
||||
this.painter.setSize(0.4);
|
||||
// this.painter.mesh.material = new THREE.MeshLambertMaterial({
|
||||
// color: 0x0f19662,
|
||||
// });
|
||||
this.painter.mesh.material.side = THREE.DoubleSide;
|
||||
this.scene.add(this.painter.mesh);
|
||||
|
||||
console.log(this.painter.mesh.material);
|
||||
console.log(this.painter.mesh.material);
|
||||
|
||||
setInterval(() => {
|
||||
this.painter.mesh.material.color.set(0xffffff * Math.random());
|
||||
}, 1000);
|
||||
setInterval(() => {
|
||||
this.painter.mesh.material.color.set(0xffffff * Math.random());
|
||||
}, 1000);
|
||||
|
||||
// this.addPumpkin();
|
||||
// this.addPumpkin();
|
||||
|
||||
let that = this;
|
||||
function onSelectEnd() {
|
||||
this.userData.isSelecting = false;
|
||||
}
|
||||
function onSelectStart() {
|
||||
that.startTime = new Date().getTime();
|
||||
this.userData.isSelecting = true;
|
||||
this.userData.skipFrames = 2;
|
||||
}
|
||||
let that = this;
|
||||
function onSelectEnd() {
|
||||
this.userData.isSelecting = false;
|
||||
}
|
||||
function onSelectStart() {
|
||||
that.startTime = new Date().getTime();
|
||||
this.userData.isSelecting = true;
|
||||
this.userData.skipFrames = 2;
|
||||
}
|
||||
|
||||
this.controller = this.renderer.xr.getController(0);
|
||||
this.controller.addEventListener("select", () => {
|
||||
let moved = new Date().getTime() - that.startTime > 165;
|
||||
if (!moved) {
|
||||
this.addPumpkin();
|
||||
}
|
||||
});
|
||||
this.controller.addEventListener("selectstart", onSelectStart);
|
||||
this.controller.addEventListener("selectend", onSelectEnd);
|
||||
this.controller.userData.skipFrames = 0;
|
||||
this.scene.add(this.controller);
|
||||
this.controller = this.renderer.xr.getController(0);
|
||||
this.controller.addEventListener("select", () => {
|
||||
let moved = new Date().getTime() - that.startTime > 165;
|
||||
if (!moved) {
|
||||
this.addPumpkin();
|
||||
}
|
||||
});
|
||||
this.controller.addEventListener("selectstart", onSelectStart);
|
||||
this.controller.addEventListener("selectend", onSelectEnd);
|
||||
this.controller.userData.skipFrames = 0;
|
||||
this.scene.add(this.controller);
|
||||
|
||||
this.reticle = new THREE.Mesh(
|
||||
new THREE.RingGeometry(0.15, 0.2, 32).rotateX(-Math.PI / 2),
|
||||
new THREE.MeshBasicMaterial()
|
||||
);
|
||||
this.reticle.matrixAutoUpdate = false;
|
||||
this.reticle.visible = false;
|
||||
this.scene.add(this.reticle);
|
||||
// 自动缩放
|
||||
window.addEventListener("resize", this.onWindowResize);
|
||||
// this.onWindowResize();
|
||||
},
|
||||
addACyli() {
|
||||
if (this.reticle.visible) {
|
||||
const material = new THREE.MeshPhongMaterial({
|
||||
color: 0xffffff * Math.random(),
|
||||
});
|
||||
const geometry = new THREE.CylinderGeometry(
|
||||
0.1,
|
||||
0.1,
|
||||
0.2,
|
||||
32
|
||||
).translate(0, 0.1, 0);
|
||||
const mesh = new THREE.Mesh(geometry, material);
|
||||
mesh.position.setFromMatrixPosition(this.reticle.matrix);
|
||||
mesh.scale.y = Math.random() * 2 + 1;
|
||||
this.scene.add(mesh);
|
||||
}
|
||||
},
|
||||
// 添加南瓜
|
||||
addPumpkin() {
|
||||
// const dracoLoader = new DRACOLoader();
|
||||
// dracoLoader.setDecoderPath("./");
|
||||
// dracoLoader.setDecoderConfig({ type: "js" });
|
||||
const loader = new GLTFLoader();
|
||||
// loader.setDRACOLoader(dracoLoader);
|
||||
loader.load(require("@/assets/model/pumpkin.gltf"), (gltf) => {
|
||||
console.log(gltf);
|
||||
gltf.scene.scale.set(0.1, 0.1, 0.1);
|
||||
// gltf.scene.rotation.y = Math.PI;
|
||||
this.reticle = new THREE.Mesh(
|
||||
new THREE.RingGeometry(0.15, 0.2, 32).rotateX(-Math.PI / 2),
|
||||
new THREE.MeshBasicMaterial()
|
||||
);
|
||||
this.reticle.matrixAutoUpdate = false;
|
||||
this.reticle.visible = false;
|
||||
this.scene.add(this.reticle);
|
||||
// 自动缩放
|
||||
window.addEventListener("resize", this.onWindowResize);
|
||||
// this.onWindowResize();
|
||||
},
|
||||
addACyli() {
|
||||
if (this.reticle.visible) {
|
||||
const material = new THREE.MeshPhongMaterial({
|
||||
color: 0xffffff * Math.random(),
|
||||
});
|
||||
const geometry = new THREE.CylinderGeometry(
|
||||
0.1,
|
||||
0.1,
|
||||
0.2,
|
||||
32
|
||||
).translate(0, 0.1, 0);
|
||||
const mesh = new THREE.Mesh(geometry, material);
|
||||
mesh.position.setFromMatrixPosition(this.reticle.matrix);
|
||||
mesh.scale.y = Math.random() * 2 + 1;
|
||||
this.scene.add(mesh);
|
||||
}
|
||||
},
|
||||
// 添加南瓜
|
||||
addPumpkin() {
|
||||
// const dracoLoader = new DRACOLoader();
|
||||
// dracoLoader.setDecoderPath("./");
|
||||
// dracoLoader.setDecoderConfig({ type: "js" });
|
||||
const loader = new GLTFLoader();
|
||||
// loader.setDRACOLoader(dracoLoader);
|
||||
loader.load(require("@/assets/model/pumpkin.gltf"), (gltf) => {
|
||||
console.log(gltf);
|
||||
gltf.scene.scale.set(0.1, 0.1, 0.1);
|
||||
// gltf.scene.rotation.y = Math.PI;
|
||||
|
||||
gltf.scene.position.setFromMatrixPosition(this.reticle.matrix);
|
||||
// console.log(gltf.scene);
|
||||
this.scene.add(gltf.scene);
|
||||
gsap.to(gltf.scene.rotation, {
|
||||
y: `+=${Math.PI * 2}`,
|
||||
duration: 10,
|
||||
});
|
||||
});
|
||||
},
|
||||
handleController(controller) {
|
||||
const userData = controller.userData;
|
||||
gltf.scene.position.setFromMatrixPosition(this.reticle.matrix);
|
||||
// console.log(gltf.scene);
|
||||
this.scene.add(gltf.scene);
|
||||
gsap.to(gltf.scene.rotation, {
|
||||
y: `+=${Math.PI * 2}`,
|
||||
duration: 10,
|
||||
});
|
||||
});
|
||||
},
|
||||
handleController(controller) {
|
||||
const userData = controller.userData;
|
||||
|
||||
this.cursor
|
||||
.set(0, 0, -0.2)
|
||||
.applyMatrix4(this.controller.matrixWorld);
|
||||
this.cursor
|
||||
.set(0, 0, -0.2)
|
||||
.applyMatrix4(this.controller.matrixWorld);
|
||||
|
||||
if (userData.isSelecting === true) {
|
||||
if (userData.skipFrames >= 0) {
|
||||
// TODO(mrdoob) Revisit this
|
||||
if (userData.isSelecting === true) {
|
||||
if (userData.skipFrames >= 0) {
|
||||
// TODO(mrdoob) Revisit this
|
||||
|
||||
userData.skipFrames--;
|
||||
userData.skipFrames--;
|
||||
|
||||
this.painter.moveTo(this.cursor);
|
||||
} else {
|
||||
this.painter.lineTo(this.cursor);
|
||||
this.painter.update();
|
||||
}
|
||||
}
|
||||
},
|
||||
addCubes(controller) {
|
||||
this.group = new THREE.Group();
|
||||
// this.group.position.set(0, 0.1, 0);
|
||||
for (let i = 0; i < 10; i++) {
|
||||
const material = new THREE.MeshPhongMaterial({
|
||||
color: 0x2399d3,
|
||||
});
|
||||
const geometry = new THREE.CylinderGeometry(
|
||||
0.1,
|
||||
0.1,
|
||||
0.2,
|
||||
32
|
||||
).translate(0, 0.1, 0); //new THREE.BoxGeometry(1, 1, 1);
|
||||
const cube = new THREE.Mesh(geometry, material);
|
||||
cube.position.x = Math.random() * 4 - 2;
|
||||
cube.position.y = Math.random() * 4 - 2;
|
||||
cube.position.z = Math.random() * 4 - 2;
|
||||
cube.scale.set(0.5, 0.5, 0.5);
|
||||
// if (this.cursor)
|
||||
// cube.position.setFromMatrixPosition(this.cursor.matrix);
|
||||
this.painter.moveTo(this.cursor);
|
||||
} else {
|
||||
this.painter.lineTo(this.cursor);
|
||||
this.painter.update();
|
||||
}
|
||||
}
|
||||
},
|
||||
addCubes(controller) {
|
||||
this.group = new THREE.Group();
|
||||
// this.group.position.set(0, 0.1, 0);
|
||||
for (let i = 0; i < 10; i++) {
|
||||
const material = new THREE.MeshPhongMaterial({
|
||||
color: 0x2399d3,
|
||||
});
|
||||
const geometry = new THREE.CylinderGeometry(
|
||||
0.1,
|
||||
0.1,
|
||||
0.2,
|
||||
32
|
||||
).translate(0, 0.1, 0); //new THREE.BoxGeometry(1, 1, 1);
|
||||
const cube = new THREE.Mesh(geometry, material);
|
||||
cube.position.x = Math.random() * 4 - 2;
|
||||
cube.position.y = Math.random() * 4 - 2;
|
||||
cube.position.z = Math.random() * 4 - 2;
|
||||
cube.scale.set(0.5, 0.5, 0.5);
|
||||
// if (this.cursor)
|
||||
// cube.position.setFromMatrixPosition(this.cursor.matrix);
|
||||
|
||||
// cube.applyMatrix4(this.controller.matrixWorld);
|
||||
// cube.applyMatrix4(this.controller.matrixWorld);
|
||||
|
||||
this.scene.add(cube);
|
||||
}
|
||||
// this.group.applyMatrix4(controller.matrixWorld);
|
||||
// this.scene.add(this.group);
|
||||
this.scene.add(cube);
|
||||
}
|
||||
// this.group.applyMatrix4(controller.matrixWorld);
|
||||
// this.scene.add(this.group);
|
||||
|
||||
// setInterval(() => {
|
||||
// console.log(this.camera.position);
|
||||
// console.log(this.painter.mesh.position, 123);
|
||||
// }, 5000);
|
||||
},
|
||||
onWindowResize(event) {
|
||||
const width = window.innerWidth;
|
||||
const height = window.innerHeight;
|
||||
// setInterval(() => {
|
||||
// console.log(this.camera.position);
|
||||
// console.log(this.painter.mesh.position, 123);
|
||||
// }, 5000);
|
||||
},
|
||||
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);
|
||||
},
|
||||
animate() {
|
||||
this.renderer.setAnimationLoop(this.render);
|
||||
},
|
||||
render(timestamp, frame) {
|
||||
this.handleController(this.controller);
|
||||
if (frame) {
|
||||
const referenceSpace = this.renderer.xr.getReferenceSpace();
|
||||
const session = this.renderer.xr.getSession();
|
||||
this.renderer.setSize(width, height);
|
||||
},
|
||||
animate() {
|
||||
this.renderer.setAnimationLoop(this.render);
|
||||
},
|
||||
render(timestamp, frame) {
|
||||
this.handleController(this.controller);
|
||||
if (frame) {
|
||||
const referenceSpace = this.renderer.xr.getReferenceSpace();
|
||||
const session = this.renderer.xr.getSession();
|
||||
|
||||
if (this.hitTestSourceRequested === false) {
|
||||
session
|
||||
.requestReferenceSpace("viewer")
|
||||
.then((referenceSpace) => {
|
||||
session
|
||||
.requestHitTestSource({ space: referenceSpace })
|
||||
.then((source) => {
|
||||
this.hitTestSource = source;
|
||||
});
|
||||
});
|
||||
if (this.hitTestSourceRequested === false) {
|
||||
session
|
||||
.requestReferenceSpace("viewer")
|
||||
.then((referenceSpace) => {
|
||||
session
|
||||
.requestHitTestSource({ space: referenceSpace })
|
||||
.then((source) => {
|
||||
this.hitTestSource = source;
|
||||
});
|
||||
});
|
||||
|
||||
session.addEventListener("end", () => {
|
||||
this.hitTestSourceRequested = false;
|
||||
this.hitTestSource = null;
|
||||
});
|
||||
session.addEventListener("end", () => {
|
||||
this.hitTestSourceRequested = false;
|
||||
this.hitTestSource = null;
|
||||
});
|
||||
|
||||
this.hitTestSourceRequested = true;
|
||||
}
|
||||
this.hitTestSourceRequested = true;
|
||||
}
|
||||
|
||||
if (this.hitTestSource) {
|
||||
const hitTestResults = frame.getHitTestResults(
|
||||
this.hitTestSource
|
||||
);
|
||||
if (this.hitTestSource) {
|
||||
const hitTestResults = frame.getHitTestResults(
|
||||
this.hitTestSource
|
||||
);
|
||||
|
||||
if (hitTestResults.length) {
|
||||
const hit = hitTestResults[0];
|
||||
if (hitTestResults.length) {
|
||||
const hit = hitTestResults[0];
|
||||
|
||||
this.reticle.visible = true;
|
||||
this.reticle.matrix.fromArray(
|
||||
hit.getPose(referenceSpace).transform.matrix
|
||||
);
|
||||
} else {
|
||||
this.reticle.visible = false;
|
||||
}
|
||||
}
|
||||
}
|
||||
this.reticle.visible = true;
|
||||
this.reticle.matrix.fromArray(
|
||||
hit.getPose(referenceSpace).transform.matrix
|
||||
);
|
||||
} else {
|
||||
this.reticle.visible = false;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
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.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);
|
||||
},
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</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;
|
||||
.camra-data {
|
||||
display: none;
|
||||
.paLayout(0, 0, 150px, 80px, 10);
|
||||
background: rgba(255, 255, 255, 0.75);
|
||||
border-radius: 0 0 10px 0;
|
||||
color: #333;
|
||||
text-align: center;
|
||||
line-height: 20px;
|
||||
}
|
||||
.select-btn {
|
||||
// background-color: #fff;
|
||||
.paCenterBottom(2%,50%,auto,10);
|
||||
}
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
position: relative;
|
||||
z-index: 0;
|
||||
.camra-data {
|
||||
display: none;
|
||||
.paLayout(0, 0, 150px, 80px, 10);
|
||||
background: rgba(255, 255, 255, 0.75);
|
||||
border-radius: 0 0 10px 0;
|
||||
color: #333;
|
||||
text-align: center;
|
||||
line-height: 20px;
|
||||
}
|
||||
.select-btn {
|
||||
// background-color: #fff;
|
||||
.paCenterBottom(2%,50%,auto,10);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,12 +1,12 @@
|
||||
<template>
|
||||
<div class="c-shader" ref="container">
|
||||
<div class="camra-data">
|
||||
camera.position<br />
|
||||
x:{{ camera ? camera.position.x : "" }} <br />
|
||||
y:{{ camera ? camera.position.y : "" }} <br />
|
||||
z:{{ camera ? camera.position.z : "" }} <br />
|
||||
</div>
|
||||
</div>
|
||||
<div class="c-shader" ref="container">
|
||||
<div class="camra-data">
|
||||
camera.position<br />
|
||||
x:{{ camera ? camera.position.x : "" }} <br />
|
||||
y:{{ camera ? camera.position.y : "" }} <br />
|
||||
z:{{ camera ? camera.position.z : "" }} <br />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
@ -18,235 +18,245 @@ import { TubePainter } from "three/examples/jsm/misc/TubePainter.js";
|
||||
import { ARButton } from "three/examples//jsm/webxr/ARButton.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.animate();
|
||||
// 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();
|
||||
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() {
|
||||
if (window.deviceInfo.system == "IOS") {
|
||||
alert("您当前系统不支持该AR特性");
|
||||
this.$router.replace({
|
||||
name: "Home",
|
||||
params: {},
|
||||
});
|
||||
return false;
|
||||
} else if (window.deviceInfo.app == "WX") {
|
||||
alert("您当前浏览器不支持,请在大于v81版chrome浏览器中打开预览");
|
||||
}
|
||||
this.initStage();
|
||||
// 循环动画
|
||||
this.animate();
|
||||
// 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, {
|
||||
requiredFeatures: ["hit-test"],
|
||||
})
|
||||
);
|
||||
// 定义 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, {
|
||||
requiredFeatures: ["hit-test"],
|
||||
})
|
||||
);
|
||||
|
||||
// 定义操控
|
||||
// 定义操控
|
||||
|
||||
// 添加全局环境光
|
||||
const light = new THREE.HemisphereLight(0xffffff, 0xbbbbff, 1);
|
||||
light.position.set(0, 1, 0);
|
||||
this.scene.add(light);
|
||||
// 添加全局环境光
|
||||
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 = new THREE.MeshLambertMaterial({
|
||||
// color: 0x0189cbe,
|
||||
// });
|
||||
// this.painter.mesh.material.side = THREE.DoubleSide;
|
||||
// this.scene.add(this.painter.mesh);
|
||||
// this.painter = new TubePainter();
|
||||
// this.painter.setSize(0.4);
|
||||
// this.painter.mesh.material = new THREE.MeshLambertMaterial({
|
||||
// color: 0x0189cbe,
|
||||
// });
|
||||
// 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;
|
||||
}
|
||||
function onSelectEnd() {
|
||||
this.userData.isSelecting = false;
|
||||
}
|
||||
function onSelectStart() {
|
||||
this.userData.isSelecting = true;
|
||||
this.userData.skipFrames = 2;
|
||||
}
|
||||
|
||||
let that = this;
|
||||
function onSelect() {
|
||||
that.addACyli();
|
||||
}
|
||||
let that = this;
|
||||
function onSelect() {
|
||||
that.addACyli();
|
||||
}
|
||||
|
||||
// that.addACyli();
|
||||
// that.addACyli();
|
||||
|
||||
this.controller = this.renderer.xr.getController(0);
|
||||
this.controller.addEventListener("select", onSelect);
|
||||
// this.controller.addEventListener("selectstart", onSelectStart);
|
||||
// this.controller.addEventListener("selectend", onSelectEnd);
|
||||
this.controller.userData.skipFrames = 0;
|
||||
this.scene.add(this.controller);
|
||||
this.controller = this.renderer.xr.getController(0);
|
||||
this.controller.addEventListener("select", onSelect);
|
||||
// this.controller.addEventListener("selectstart", onSelectStart);
|
||||
// this.controller.addEventListener("selectend", onSelectEnd);
|
||||
this.controller.userData.skipFrames = 0;
|
||||
this.scene.add(this.controller);
|
||||
|
||||
// 自动缩放
|
||||
window.addEventListener("resize", this.onWindowResize);
|
||||
// this.onWindowResize();
|
||||
},
|
||||
addACyli() {
|
||||
const material = new THREE.MeshPhongMaterial({
|
||||
color: 0xffffff * Math.random(),
|
||||
});
|
||||
const geometry = new THREE.CylinderGeometry(1, 1, 2, 32);
|
||||
const mesh = new THREE.Mesh(geometry, material);
|
||||
mesh.position.set(0, 0, -10);
|
||||
this.scene.add(mesh);
|
||||
},
|
||||
addCubes(controller) {
|
||||
this.group = new THREE.Group();
|
||||
// this.group.position.set(0, 0.1, 0);
|
||||
for (let i = 0; i < 10; i++) {
|
||||
const material = new THREE.MeshPhongMaterial({
|
||||
color: 0x2399d3,
|
||||
});
|
||||
const geometry = new THREE.CylinderGeometry(
|
||||
0.1,
|
||||
0.1,
|
||||
0.2,
|
||||
32
|
||||
).translate(0, 0.1, 0); //new THREE.BoxGeometry(1, 1, 1);
|
||||
const cube = new THREE.Mesh(geometry, material);
|
||||
cube.position.x = Math.random() * 4 - 2;
|
||||
cube.position.y = Math.random() * 4 - 2;
|
||||
cube.position.z = Math.random() * 4 - 2;
|
||||
cube.scale.set(0.5, 0.5, 0.5);
|
||||
// if (this.cursor)
|
||||
// cube.position.setFromMatrixPosition(this.cursor.matrix);
|
||||
// 自动缩放
|
||||
window.addEventListener("resize", this.onWindowResize);
|
||||
// this.onWindowResize();
|
||||
},
|
||||
addACyli() {
|
||||
const material = new THREE.MeshPhongMaterial({
|
||||
color: 0xffffff * Math.random(),
|
||||
});
|
||||
const geometry = new THREE.CylinderGeometry(1, 1, 2, 32);
|
||||
const mesh = new THREE.Mesh(geometry, material);
|
||||
mesh.position.set(0, 0, -10);
|
||||
this.scene.add(mesh);
|
||||
},
|
||||
addCubes(controller) {
|
||||
this.group = new THREE.Group();
|
||||
// this.group.position.set(0, 0.1, 0);
|
||||
for (let i = 0; i < 10; i++) {
|
||||
const material = new THREE.MeshPhongMaterial({
|
||||
color: 0x2399d3,
|
||||
});
|
||||
const geometry = new THREE.CylinderGeometry(
|
||||
0.1,
|
||||
0.1,
|
||||
0.2,
|
||||
32
|
||||
).translate(0, 0.1, 0); //new THREE.BoxGeometry(1, 1, 1);
|
||||
const cube = new THREE.Mesh(geometry, material);
|
||||
cube.position.x = Math.random() * 4 - 2;
|
||||
cube.position.y = Math.random() * 4 - 2;
|
||||
cube.position.z = Math.random() * 4 - 2;
|
||||
cube.scale.set(0.5, 0.5, 0.5);
|
||||
// if (this.cursor)
|
||||
// cube.position.setFromMatrixPosition(this.cursor.matrix);
|
||||
|
||||
// cube.applyMatrix4(this.controller.matrixWorld);
|
||||
// cube.applyMatrix4(this.controller.matrixWorld);
|
||||
|
||||
this.scene.add(cube);
|
||||
}
|
||||
// this.group.applyMatrix4(controller.matrixWorld);
|
||||
// this.scene.add(this.group);
|
||||
this.scene.add(cube);
|
||||
}
|
||||
// this.group.applyMatrix4(controller.matrixWorld);
|
||||
// this.scene.add(this.group);
|
||||
|
||||
// setInterval(() => {
|
||||
// console.log(this.camera.position);
|
||||
// console.log(this.painter.mesh.position, 123);
|
||||
// }, 5000);
|
||||
},
|
||||
handleController(controller) {
|
||||
const userData = controller.userData;
|
||||
// setInterval(() => {
|
||||
// console.log(this.camera.position);
|
||||
// console.log(this.painter.mesh.position, 123);
|
||||
// }, 5000);
|
||||
},
|
||||
handleController(controller) {
|
||||
const userData = controller.userData;
|
||||
|
||||
this.cursor
|
||||
.set(0, 0, -0.2)
|
||||
.applyMatrix4(this.controller.matrixWorld);
|
||||
this.cursor
|
||||
.set(0, 0, -0.2)
|
||||
.applyMatrix4(this.controller.matrixWorld);
|
||||
|
||||
// if (!this.group) {
|
||||
// this.addCubes(controller);
|
||||
// }
|
||||
// if (!this.group) {
|
||||
// this.addCubes(controller);
|
||||
// }
|
||||
|
||||
// this.group.position
|
||||
// .set(
|
||||
// this.camera.position.x,
|
||||
// this.camera.position.y,
|
||||
// this.camera.position.z
|
||||
// )
|
||||
// .applyMatrix4(controller.matrixWorld);
|
||||
// this.group.position
|
||||
// .set(
|
||||
// this.camera.position.x,
|
||||
// this.camera.position.y,
|
||||
// this.camera.position.z
|
||||
// )
|
||||
// .applyMatrix4(controller.matrixWorld);
|
||||
|
||||
// console.log(this.cursor);
|
||||
// console.log(this.cursor);
|
||||
|
||||
if (userData.isSelecting === true) {
|
||||
if (userData.skipFrames >= 0) {
|
||||
// TODO(mrdoob) Revisit this
|
||||
if (userData.isSelecting === true) {
|
||||
if (userData.skipFrames >= 0) {
|
||||
// TODO(mrdoob) Revisit this
|
||||
|
||||
userData.skipFrames--;
|
||||
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.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.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.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.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);
|
||||
},
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</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;
|
||||
.camra-data {
|
||||
.paLayout(0,0,150px,80px,10);
|
||||
background: rgba(255, 255, 255, 0.75);
|
||||
border-radius: 0 0 10px 0;
|
||||
color: #333;
|
||||
text-align: center;
|
||||
line-height: 20px;
|
||||
}
|
||||
.select-btn {
|
||||
// background-color: #fff;
|
||||
.paCenterBottom(2%,50%,auto,10);
|
||||
}
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
position: relative;
|
||||
z-index: 0;
|
||||
.camra-data {
|
||||
.paLayout(0,0,150px,80px,10);
|
||||
background: rgba(255, 255, 255, 0.75);
|
||||
border-radius: 0 0 10px 0;
|
||||
color: #333;
|
||||
text-align: center;
|
||||
line-height: 20px;
|
||||
}
|
||||
.select-btn {
|
||||
// background-color: #fff;
|
||||
.paCenterBottom(2%,50%,auto,10);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
100
src/page/index/Drawing/index.vue
Normal file
100
src/page/index/Drawing/index.vue
Normal file
@ -0,0 +1,100 @@
|
||||
|
||||
<template>
|
||||
<div class="drawing">
|
||||
<canvas id="canvas" ref="canvas"></canvas>
|
||||
|
||||
<button id="add" class="add" @click="Add">Add</button>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
// @ is an alias to /src
|
||||
import { fabric } from "fabric";
|
||||
export default {
|
||||
name: "Curve",
|
||||
components: {},
|
||||
data() {
|
||||
return {
|
||||
deleteIcon:
|
||||
"data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3C!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3E%3Csvg version='1.1' id='Ebene_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='595.275px' height='595.275px' viewBox='200 215 230 470' xml:space='preserve'%3E%3Ccircle style='fill:%23F44336;' cx='299.76' cy='439.067' r='218.516'/%3E%3Cg%3E%3Crect x='267.162' y='307.978' transform='matrix(0.7071 -0.7071 0.7071 0.7071 -222.6202 340.6915)' style='fill:white;' width='65.545' height='262.18'/%3E%3Crect x='266.988' y='308.153' transform='matrix(0.7071 0.7071 -0.7071 0.7071 398.3889 -83.3116)' style='fill:white;' width='65.544' height='262.179'/%3E%3C/g%3E%3C/svg%3E",
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.init();
|
||||
},
|
||||
methods: {
|
||||
init() {
|
||||
fabric.Object.prototype.transparentCorners = false;
|
||||
fabric.Object.prototype.cornerColor = "rgba(90,175,119,0.75)";
|
||||
fabric.Object.prototype.cornerStyle = "circle";
|
||||
|
||||
var img = document.createElement("img");
|
||||
img.src = this.deleteIcon;
|
||||
// create fabric canvas
|
||||
this.$refs.canvas.width = window.innerWidth;
|
||||
this.$refs.canvas.height = window.innerHeight;
|
||||
var canvas = (this.canvas = new fabric.Canvas("canvas"));
|
||||
|
||||
this.Add();
|
||||
|
||||
function deleteObject(eventData, transform) {
|
||||
var target = transform.target;
|
||||
var canvas = target.canvas;
|
||||
canvas.remove(target);
|
||||
canvas.requestRenderAll();
|
||||
}
|
||||
|
||||
function renderIcon(ctx, left, top, styleOverride, fabricObject) {
|
||||
var size = this.cornerSize;
|
||||
ctx.save();
|
||||
ctx.translate(left, top);
|
||||
ctx.rotate(fabric.util.degreesToRadians(fabricObject.angle));
|
||||
ctx.drawImage(img, -size / 2, -size / 2, size, size);
|
||||
ctx.restore();
|
||||
}
|
||||
|
||||
// 添加自定义控制
|
||||
fabric.Object.prototype.controls.deleteControl = new fabric.Control(
|
||||
{
|
||||
x: 0.5,
|
||||
y: -0.5,
|
||||
offsetY: 16,
|
||||
cursorStyle: "pointer",
|
||||
mouseUpHandler: deleteObject,
|
||||
render: renderIcon,
|
||||
cornerSize: 24,
|
||||
}
|
||||
);
|
||||
},
|
||||
Add() {
|
||||
let rect = new fabric.Rect({
|
||||
left: 100,
|
||||
top: 50,
|
||||
fill: "yellow",
|
||||
width: 200,
|
||||
height: 100,
|
||||
objectCaching: false,
|
||||
stroke: "lightgreen",
|
||||
strokeWidth: 4,
|
||||
});
|
||||
|
||||
this.canvas.add(rect);
|
||||
this.canvas.setActiveObject(rect);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<!-- Add "scoped" attribute to limit CSS to this component only -->
|
||||
<style scoped lang="less">
|
||||
.drawing {
|
||||
.prLayout(100%,100%);
|
||||
overflow: hidden;
|
||||
color: #fff;
|
||||
background-color: #cda2bf;
|
||||
.add {
|
||||
.paCenterBottom(30px,100px,100px,10);
|
||||
border-radius: 50%;
|
||||
background: #cda2bf;
|
||||
box-shadow: 20px 20px 60px #ae8aa2, -20px -20px 60px #ecbadc;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -8,7 +8,7 @@
|
||||
-->
|
||||
<template>
|
||||
<div class="home">
|
||||
<Shader class="shader"></Shader>
|
||||
<!-- <Shader class="shader"></Shader> -->
|
||||
<div class="overlay"></div>
|
||||
<div
|
||||
class="page grid js_show dialog"
|
||||
@ -45,12 +45,12 @@
|
||||
<script>
|
||||
// @ is an alias to /src
|
||||
import { gsap } from "gsap";
|
||||
import Shader from "@/components/shader/index.vue";
|
||||
// import Shader from "@/components/shader/index.vue";
|
||||
|
||||
export default {
|
||||
name: "Index",
|
||||
components: {
|
||||
Shader,
|
||||
// Shader,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
@ -98,6 +98,12 @@ export default {
|
||||
name: "三维文字曲线运动",
|
||||
active: false,
|
||||
},
|
||||
{
|
||||
fontIconCode: "",
|
||||
target: "Drawing",
|
||||
name: "画板",
|
||||
active: false,
|
||||
},
|
||||
],
|
||||
};
|
||||
},
|
||||
|
||||
@ -16,6 +16,7 @@ import Camera from '../Camera/index.vue'
|
||||
import HandTrack from '../HandTrack/index.vue'
|
||||
import Video from '../Video/index.vue'
|
||||
import Curve from '../modifier_curve/index.vue'
|
||||
import Drawing from '../Drawing/index.vue'
|
||||
|
||||
|
||||
|
||||
@ -103,7 +104,15 @@ const routes = [
|
||||
keepAlive: false, // 是否保持活跃
|
||||
},
|
||||
},
|
||||
|
||||
{
|
||||
path: "/drawing",
|
||||
name: "Drawing",
|
||||
component: Drawing,
|
||||
meta: {
|
||||
title: "Drawing Board", // 标题
|
||||
keepAlive: false, // 是否保持活跃
|
||||
},
|
||||
},
|
||||
|
||||
// {
|
||||
// path: "/example",
|
||||
|
||||
Loading…
Reference in New Issue
Block a user