shaochangli/webglToy
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

添加画板

Browse Source
This commit is contained in:
rucky 2022-02-11 18:14:20 +08:00
parent 05bd8826ad
commit c02820c3c8
6 changed files with 625 additions and 489 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

@ -62,6 +62,7 @@
"deploy-cli-service": "^1.2.0", "deploy-cli-service": "^1.2.0",
"eslint": "^6.7.2", "eslint": "^6.7.2",
"eslint-plugin-vue": "^6.2.2", "eslint-plugin-vue": "^6.2.2",
"fabric": "^5.0.0",
"glslify": "^7.1.1", "glslify": "^7.1.1",
"handtrackjs": "^0.1.5", "handtrackjs": "^0.1.5",
"jsmpeg": "^1.0.0", "jsmpeg": "^1.0.0",

560
src/components/ar/hit.vue
View File

@ -1,12 +1,12 @@
<template> <template>
<div class="c-shader" ref="container"> <div class="c-shader" ref="container">
<div class="camra-data"> <div class="camra-data">
camera.position<br /> camera.position<br />
x:{{ camera ? camera.position.x : "" }} <br /> x:{{ camera ? camera.position.x : "" }} <br />
y:{{ camera ? camera.position.y : "" }} <br /> y:{{ camera ? camera.position.y : "" }} <br />
z:{{ camera ? camera.position.z : "" }} <br /> z:{{ camera ? camera.position.z : "" }} <br />
</div> </div>
</div> </div>
</template> </template>
<script> <script>
@ -20,306 +20,316 @@ import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader.js";
import { DRACOLoader } from "three/examples/jsm/loaders/DRACOLoader.js"; import { DRACOLoader } from "three/examples/jsm/loaders/DRACOLoader.js";
export default { export default {
name: "color", name: "color",
props: { props: {
msg: String, msg: String,
}, },
data() { data() {
return { return {
remaining: 50, remaining: 50,
container: null, container: null,
camera: null, camera: null,
scene: null, scene: null,
renderer: null, renderer: null,
reticle: null, reticle: null,
cursor: new THREE.Vector3(), cursor: new THREE.Vector3(),
hitTestSource: null, hitTestSource: null,
hitTestSourceRequested: false, hitTestSourceRequested: false,
}; };
}, },
created() {}, created() {},
mounted() { mounted() {
this.initStage(); 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.animate();
// this.addAnimation(); // this.addAnimation();
}, },
methods: { methods: {
initStage() { initStage() {
//基础参数 //基础参数
this.container = this.$refs.container; this.container = this.$refs.container;
this.camera = new THREE.PerspectiveCamera( this.camera = new THREE.PerspectiveCamera(
70, 70,
window.innerWidth / window.innerHeight, window.innerWidth / window.innerHeight,
0.01, 0.01,
5 5
); );
this.scene = new THREE.Scene(); this.scene = new THREE.Scene();
// 定义 webglrender // 定义 webglrender
this.renderer = new THREE.WebGLRenderer({ this.renderer = new THREE.WebGLRenderer({
antialias: true, antialias: true,
alpha: true, alpha: true,
}); });
this.renderer.setPixelRatio(window.devicePixelRatio); this.renderer.setPixelRatio(window.devicePixelRatio);
this.renderer.setSize(window.innerWidth, window.innerHeight); this.renderer.setSize(window.innerWidth, window.innerHeight);
this.renderer.xr.enabled = true; this.renderer.xr.enabled = true;
if (!document.getElementById("webgl")) { if (!document.getElementById("webgl")) {
this.renderer.domElement.id = "webgl"; this.renderer.domElement.id = "webgl";
this.container.appendChild(this.renderer.domElement); this.container.appendChild(this.renderer.domElement);
} }
document.body.appendChild( document.body.appendChild(
ARButton.createButton(this.renderer, { ARButton.createButton(this.renderer, {
requiredFeatures: ["hit-test"], requiredFeatures: ["hit-test"],
}) })
); );
// 定义操控 // 定义操控
// 添加全局环境光 // 添加全局环境光
const light = new THREE.HemisphereLight(0xffffff, 0xbbbbff, 1); const light = new THREE.HemisphereLight(0xffffff, 0xbbbbff, 1);
light.position.set(0.5, 1, 0.25); light.position.set(0.5, 1, 0.25);
this.scene.add(light); this.scene.add(light);
this.painter = new TubePainter(); this.painter = new TubePainter();
this.painter.setSize(0.4); this.painter.setSize(0.4);
// this.painter.mesh.material = new THREE.MeshLambertMaterial({ // this.painter.mesh.material = new THREE.MeshLambertMaterial({
// color: 0x0f19662, // color: 0x0f19662,
// }); // });
this.painter.mesh.material.side = THREE.DoubleSide; this.painter.mesh.material.side = THREE.DoubleSide;
this.scene.add(this.painter.mesh); this.scene.add(this.painter.mesh);
console.log(this.painter.mesh.material); console.log(this.painter.mesh.material);
setInterval(() => { setInterval(() => {
this.painter.mesh.material.color.set(0xffffff * Math.random()); this.painter.mesh.material.color.set(0xffffff * Math.random());
}, 1000); }, 1000);
// this.addPumpkin(); // this.addPumpkin();
let that = this; let that = this;
function onSelectEnd() { function onSelectEnd() {
this.userData.isSelecting = false; this.userData.isSelecting = false;
} }
function onSelectStart() { function onSelectStart() {
that.startTime = new Date().getTime(); that.startTime = new Date().getTime();
this.userData.isSelecting = true; this.userData.isSelecting = true;
this.userData.skipFrames = 2; this.userData.skipFrames = 2;
} }
this.controller = this.renderer.xr.getController(0); this.controller = this.renderer.xr.getController(0);
this.controller.addEventListener("select", () => { this.controller.addEventListener("select", () => {
let moved = new Date().getTime() - that.startTime > 165; let moved = new Date().getTime() - that.startTime > 165;
if (!moved) { if (!moved) {
this.addPumpkin(); this.addPumpkin();
} }
}); });
this.controller.addEventListener("selectstart", onSelectStart); this.controller.addEventListener("selectstart", onSelectStart);
this.controller.addEventListener("selectend", onSelectEnd); this.controller.addEventListener("selectend", onSelectEnd);
this.controller.userData.skipFrames = 0; this.controller.userData.skipFrames = 0;
this.scene.add(this.controller); this.scene.add(this.controller);
this.reticle = new THREE.Mesh( this.reticle = new THREE.Mesh(
new THREE.RingGeometry(0.15, 0.2, 32).rotateX(-Math.PI / 2), new THREE.RingGeometry(0.15, 0.2, 32).rotateX(-Math.PI / 2),
new THREE.MeshBasicMaterial() new THREE.MeshBasicMaterial()
); );
this.reticle.matrixAutoUpdate = false; this.reticle.matrixAutoUpdate = false;
this.reticle.visible = false; this.reticle.visible = false;
this.scene.add(this.reticle); this.scene.add(this.reticle);
// 自动缩放 // 自动缩放
window.addEventListener("resize", this.onWindowResize); window.addEventListener("resize", this.onWindowResize);
// this.onWindowResize(); // this.onWindowResize();
}, },
addACyli() { addACyli() {
if (this.reticle.visible) { if (this.reticle.visible) {
const material = new THREE.MeshPhongMaterial({ const material = new THREE.MeshPhongMaterial({
color: 0xffffff * Math.random(), color: 0xffffff * Math.random(),
}); });
const geometry = new THREE.CylinderGeometry( const geometry = new THREE.CylinderGeometry(
0.1, 0.1,
0.1, 0.1,
0.2, 0.2,
32 32
).translate(0, 0.1, 0); ).translate(0, 0.1, 0);
const mesh = new THREE.Mesh(geometry, material); const mesh = new THREE.Mesh(geometry, material);
mesh.position.setFromMatrixPosition(this.reticle.matrix); mesh.position.setFromMatrixPosition(this.reticle.matrix);
mesh.scale.y = Math.random() * 2 + 1; mesh.scale.y = Math.random() * 2 + 1;
this.scene.add(mesh); this.scene.add(mesh);
} }
}, },
// 添加南瓜 // 添加南瓜
addPumpkin() { addPumpkin() {
// const dracoLoader = new DRACOLoader(); // const dracoLoader = new DRACOLoader();
// dracoLoader.setDecoderPath("./"); // dracoLoader.setDecoderPath("./");
// dracoLoader.setDecoderConfig({ type: "js" }); // dracoLoader.setDecoderConfig({ type: "js" });
const loader = new GLTFLoader(); const loader = new GLTFLoader();
// loader.setDRACOLoader(dracoLoader); // loader.setDRACOLoader(dracoLoader);
loader.load(require("@/assets/model/pumpkin.gltf"), (gltf) => { loader.load(require("@/assets/model/pumpkin.gltf"), (gltf) => {
console.log(gltf); console.log(gltf);
gltf.scene.scale.set(0.1, 0.1, 0.1); gltf.scene.scale.set(0.1, 0.1, 0.1);
// gltf.scene.rotation.y = Math.PI; // gltf.scene.rotation.y = Math.PI;
gltf.scene.position.setFromMatrixPosition(this.reticle.matrix); gltf.scene.position.setFromMatrixPosition(this.reticle.matrix);
// console.log(gltf.scene); // console.log(gltf.scene);
this.scene.add(gltf.scene); this.scene.add(gltf.scene);
gsap.to(gltf.scene.rotation, { gsap.to(gltf.scene.rotation, {
y: `+=${Math.PI * 2}`, y: `+=${Math.PI * 2}`,
duration: 10, duration: 10,
}); });
}); });
}, },
handleController(controller) { handleController(controller) {
const userData = controller.userData; const userData = controller.userData;
this.cursor this.cursor
.set(0, 0, -0.2) .set(0, 0, -0.2)
.applyMatrix4(this.controller.matrixWorld); .applyMatrix4(this.controller.matrixWorld);
if (userData.isSelecting === true) { if (userData.isSelecting === true) {
if (userData.skipFrames >= 0) { if (userData.skipFrames >= 0) {
// TODO(mrdoob) Revisit this // TODO(mrdoob) Revisit this
userData.skipFrames--; userData.skipFrames--;
this.painter.moveTo(this.cursor); this.painter.moveTo(this.cursor);
} else { } else {
this.painter.lineTo(this.cursor); this.painter.lineTo(this.cursor);
this.painter.update(); this.painter.update();
} }
} }
}, },
addCubes(controller) { addCubes(controller) {
this.group = new THREE.Group(); this.group = new THREE.Group();
// this.group.position.set(0, 0.1, 0); // this.group.position.set(0, 0.1, 0);
for (let i = 0; i < 10; i++) { for (let i = 0; i < 10; i++) {
const material = new THREE.MeshPhongMaterial({ const material = new THREE.MeshPhongMaterial({
color: 0x2399d3, color: 0x2399d3,
}); });
const geometry = new THREE.CylinderGeometry( const geometry = new THREE.CylinderGeometry(
0.1, 0.1,
0.1, 0.1,
0.2, 0.2,
32 32
).translate(0, 0.1, 0); //new THREE.BoxGeometry(1, 1, 1); ).translate(0, 0.1, 0); //new THREE.BoxGeometry(1, 1, 1);
const cube = new THREE.Mesh(geometry, material); const cube = new THREE.Mesh(geometry, material);
cube.position.x = Math.random() * 4 - 2; cube.position.x = Math.random() * 4 - 2;
cube.position.y = Math.random() * 4 - 2; cube.position.y = Math.random() * 4 - 2;
cube.position.z = Math.random() * 4 - 2; cube.position.z = Math.random() * 4 - 2;
cube.scale.set(0.5, 0.5, 0.5); cube.scale.set(0.5, 0.5, 0.5);
// if (this.cursor) // if (this.cursor)
// cube.position.setFromMatrixPosition(this.cursor.matrix); // cube.position.setFromMatrixPosition(this.cursor.matrix);
// cube.applyMatrix4(this.controller.matrixWorld); // cube.applyMatrix4(this.controller.matrixWorld);
this.scene.add(cube); this.scene.add(cube);
} }
// this.group.applyMatrix4(controller.matrixWorld); // this.group.applyMatrix4(controller.matrixWorld);
// this.scene.add(this.group); // this.scene.add(this.group);
// setInterval(() => { // setInterval(() => {
// console.log(this.camera.position); // console.log(this.camera.position);
// console.log(this.painter.mesh.position, 123); // console.log(this.painter.mesh.position, 123);
// }, 5000); // }, 5000);
}, },
onWindowResize(event) { onWindowResize(event) {
const width = window.innerWidth; const width = window.innerWidth;
const height = window.innerHeight; const height = window.innerHeight;
this.camera.aspect = width / height; this.camera.aspect = width / height;
this.camera.updateProjectionMatrix(); this.camera.updateProjectionMatrix();
this.renderer.setSize(width, height); this.renderer.setSize(width, height);
}, },
animate() { animate() {
this.renderer.setAnimationLoop(this.render); this.renderer.setAnimationLoop(this.render);
}, },
render(timestamp, frame) { render(timestamp, frame) {
this.handleController(this.controller); this.handleController(this.controller);
if (frame) { if (frame) {
const referenceSpace = this.renderer.xr.getReferenceSpace(); const referenceSpace = this.renderer.xr.getReferenceSpace();
const session = this.renderer.xr.getSession(); const session = this.renderer.xr.getSession();
if (this.hitTestSourceRequested === false) { if (this.hitTestSourceRequested === false) {
session session
.requestReferenceSpace("viewer") .requestReferenceSpace("viewer")
.then((referenceSpace) => { .then((referenceSpace) => {
session session
.requestHitTestSource({ space: referenceSpace }) .requestHitTestSource({ space: referenceSpace })
.then((source) => { .then((source) => {
this.hitTestSource = source; this.hitTestSource = source;
}); });
}); });
session.addEventListener("end", () => { session.addEventListener("end", () => {
this.hitTestSourceRequested = false; this.hitTestSourceRequested = false;
this.hitTestSource = null; this.hitTestSource = null;
}); });
this.hitTestSourceRequested = true; this.hitTestSourceRequested = true;
} }
if (this.hitTestSource) { if (this.hitTestSource) {
const hitTestResults = frame.getHitTestResults( const hitTestResults = frame.getHitTestResults(
this.hitTestSource this.hitTestSource
); );
if (hitTestResults.length) { if (hitTestResults.length) {
const hit = hitTestResults[0]; const hit = hitTestResults[0];
this.reticle.visible = true; this.reticle.visible = true;
this.reticle.matrix.fromArray( this.reticle.matrix.fromArray(
hit.getPose(referenceSpace).transform.matrix hit.getPose(referenceSpace).transform.matrix
); );
} else { } else {
this.reticle.visible = false; this.reticle.visible = false;
} }
} }
} }
this.renderer.render(this.scene, this.camera); this.renderer.render(this.scene, this.camera);
}, },
addAnimation() { addAnimation() {
// 自旋转 // 自旋转
gsap.to(this.group.rotation, { gsap.to(this.group.rotation, {
y: -Math.PI * 2, y: -Math.PI * 2,
x: 0.1, x: 0.1,
duration: 5, duration: 5,
// yoyo: true, // yoyo: true,
// repeat: -1, // repeat: -1,
onUpdate: () => { onUpdate: () => {
// this.renderer.toneMappingExposure = Math.pow( // this.renderer.toneMappingExposure = Math.pow(
// this.params.exposure, // this.params.exposure,
// 4.0 // 4.0
// ); // );
// this.render(); // this.render();
// console.log(this.params.scene); // console.log(this.params.scene);
}, },
}); });
}, },
}, },
}; };
</script> </script>
<!-- Add "scoped" attribute to limit CSS to this component only --> <!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less"> <style scoped lang="less">
.c-shader { .c-shader {
width: 100vw; width: 100vw;
height: 100vh; height: 100vh;
position: relative; position: relative;
z-index: 0; z-index: 0;
.camra-data { .camra-data {
display: none; display: none;
.paLayout(0, 0, 150px, 80px, 10); .paLayout(0, 0, 150px, 80px, 10);
background: rgba(255, 255, 255, 0.75); background: rgba(255, 255, 255, 0.75);
border-radius: 0 0 10px 0; border-radius: 0 0 10px 0;
color: #333; color: #333;
text-align: center; text-align: center;
line-height: 20px; line-height: 20px;
} }
.select-btn { .select-btn {
// background-color: #fff; // background-color: #fff;
.paCenterBottom(2%,50%,auto,10); .paCenterBottom(2%,50%,auto,10);
} }
} }
</style> </style>

430
src/components/ar/index.vue
View File

@ -1,12 +1,12 @@
<template> <template>
<div class="c-shader" ref="container"> <div class="c-shader" ref="container">
<div class="camra-data"> <div class="camra-data">
camera.position<br /> camera.position<br />
x:{{ camera ? camera.position.x : "" }} <br /> x:{{ camera ? camera.position.x : "" }} <br />
y:{{ camera ? camera.position.y : "" }} <br /> y:{{ camera ? camera.position.y : "" }} <br />
z:{{ camera ? camera.position.z : "" }} <br /> z:{{ camera ? camera.position.z : "" }} <br />
</div> </div>
</div> </div>
</template> </template>
<script> <script>
@ -18,235 +18,245 @@ import { TubePainter } from "three/examples/jsm/misc/TubePainter.js";
import { ARButton } from "three/examples//jsm/webxr/ARButton.js"; import { ARButton } from "three/examples//jsm/webxr/ARButton.js";
export default { export default {
name: "color", name: "color",
props: { props: {
msg: String, msg: String,
}, },
data() { data() {
return { return {
remaining: 50, remaining: 50,
container: null, container: null,
camera: null, camera: null,
scene: null, scene: null,
renderer: null, renderer: null,
mouse: new THREE.Vector2(), mouse: new THREE.Vector2(),
raycaster: new THREE.Raycaster(), raycaster: new THREE.Raycaster(),
cursor: new THREE.Vector3(), cursor: new THREE.Vector3(),
}; };
}, },
created() {}, created() {},
mounted() { mounted() {
this.initStage(); if (window.deviceInfo.system == "IOS") {
// 循环动画 alert("您当前系统不支持该AR特性");
this.animate(); this.$router.replace({
// this.addAnimation(); name: "Home",
}, params: {},
methods: { });
initStage() { return false;
//基础参数 } else if (window.deviceInfo.app == "WX") {
this.container = this.$refs.container; alert("您当前浏览器不支持,请在大于v81版chrome浏览器中打开预览");
this.camera = new THREE.PerspectiveCamera( }
70, this.initStage();
window.innerWidth / window.innerHeight, // 循环动画
0.01, this.animate();
20 // this.addAnimation();
); },
this.scene = new THREE.Scene(); 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 // 定义 webglrender
this.renderer = new THREE.WebGLRenderer({ this.renderer = new THREE.WebGLRenderer({
antialias: true, antialias: true,
alpha: true, alpha: true,
}); });
this.renderer.setPixelRatio(window.devicePixelRatio); this.renderer.setPixelRatio(window.devicePixelRatio);
this.renderer.setSize(window.innerWidth, window.innerHeight); this.renderer.setSize(window.innerWidth, window.innerHeight);
this.renderer.xr.enabled = true; this.renderer.xr.enabled = true;
if (!document.getElementById("webgl")) { if (!document.getElementById("webgl")) {
this.renderer.domElement.id = "webgl"; this.renderer.domElement.id = "webgl";
this.container.appendChild(this.renderer.domElement); this.container.appendChild(this.renderer.domElement);
} }
document.body.appendChild( document.body.appendChild(
ARButton.createButton(this.renderer, { ARButton.createButton(this.renderer, {
requiredFeatures: ["hit-test"], requiredFeatures: ["hit-test"],
}) })
); );
// 定义操控 // 定义操控
// 添加全局环境光 // 添加全局环境光
const light = new THREE.HemisphereLight(0xffffff, 0xbbbbff, 1); const light = new THREE.HemisphereLight(0xffffff, 0xbbbbff, 1);
light.position.set(0, 1, 0); light.position.set(0, 1, 0);
this.scene.add(light); this.scene.add(light);
// this.painter = new TubePainter(); // this.painter = new TubePainter();
// this.painter.setSize(0.4); // this.painter.setSize(0.4);
// this.painter.mesh.material = new THREE.MeshLambertMaterial({ // this.painter.mesh.material = new THREE.MeshLambertMaterial({
// color: 0x0189cbe, // color: 0x0189cbe,
// }); // });
// this.painter.mesh.material.side = THREE.DoubleSide; // this.painter.mesh.material.side = THREE.DoubleSide;
// this.scene.add(this.painter.mesh); // this.scene.add(this.painter.mesh);
function onSelectEnd() { function onSelectEnd() {
this.userData.isSelecting = false; this.userData.isSelecting = false;
} }
function onSelectStart() { function onSelectStart() {
this.userData.isSelecting = true; this.userData.isSelecting = true;
this.userData.skipFrames = 2; this.userData.skipFrames = 2;
} }
let that = this; let that = this;
function onSelect() { function onSelect() {
that.addACyli(); that.addACyli();
} }
// that.addACyli(); // that.addACyli();
this.controller = this.renderer.xr.getController(0); this.controller = this.renderer.xr.getController(0);
this.controller.addEventListener("select", onSelect); this.controller.addEventListener("select", onSelect);
// this.controller.addEventListener("selectstart", onSelectStart); // this.controller.addEventListener("selectstart", onSelectStart);
// this.controller.addEventListener("selectend", onSelectEnd); // this.controller.addEventListener("selectend", onSelectEnd);
this.controller.userData.skipFrames = 0; this.controller.userData.skipFrames = 0;
this.scene.add(this.controller); this.scene.add(this.controller);
// 自动缩放 // 自动缩放
window.addEventListener("resize", this.onWindowResize); window.addEventListener("resize", this.onWindowResize);
// this.onWindowResize(); // this.onWindowResize();
}, },
addACyli() { addACyli() {
const material = new THREE.MeshPhongMaterial({ const material = new THREE.MeshPhongMaterial({
color: 0xffffff * Math.random(), color: 0xffffff * Math.random(),
}); });
const geometry = new THREE.CylinderGeometry(1, 1, 2, 32); const geometry = new THREE.CylinderGeometry(1, 1, 2, 32);
const mesh = new THREE.Mesh(geometry, material); const mesh = new THREE.Mesh(geometry, material);
mesh.position.set(0, 0, -10); mesh.position.set(0, 0, -10);
this.scene.add(mesh); this.scene.add(mesh);
}, },
addCubes(controller) { addCubes(controller) {
this.group = new THREE.Group(); this.group = new THREE.Group();
// this.group.position.set(0, 0.1, 0); // this.group.position.set(0, 0.1, 0);
for (let i = 0; i < 10; i++) { for (let i = 0; i < 10; i++) {
const material = new THREE.MeshPhongMaterial({ const material = new THREE.MeshPhongMaterial({
color: 0x2399d3, color: 0x2399d3,
}); });
const geometry = new THREE.CylinderGeometry( const geometry = new THREE.CylinderGeometry(
0.1, 0.1,
0.1, 0.1,
0.2, 0.2,
32 32
).translate(0, 0.1, 0); //new THREE.BoxGeometry(1, 1, 1); ).translate(0, 0.1, 0); //new THREE.BoxGeometry(1, 1, 1);
const cube = new THREE.Mesh(geometry, material); const cube = new THREE.Mesh(geometry, material);
cube.position.x = Math.random() * 4 - 2; cube.position.x = Math.random() * 4 - 2;
cube.position.y = Math.random() * 4 - 2; cube.position.y = Math.random() * 4 - 2;
cube.position.z = Math.random() * 4 - 2; cube.position.z = Math.random() * 4 - 2;
cube.scale.set(0.5, 0.5, 0.5); cube.scale.set(0.5, 0.5, 0.5);
// if (this.cursor) // if (this.cursor)
// cube.position.setFromMatrixPosition(this.cursor.matrix); // cube.position.setFromMatrixPosition(this.cursor.matrix);
// cube.applyMatrix4(this.controller.matrixWorld); // cube.applyMatrix4(this.controller.matrixWorld);
this.scene.add(cube); this.scene.add(cube);
} }
// this.group.applyMatrix4(controller.matrixWorld); // this.group.applyMatrix4(controller.matrixWorld);
// this.scene.add(this.group); // this.scene.add(this.group);
// setInterval(() => { // setInterval(() => {
// console.log(this.camera.position); // console.log(this.camera.position);
// console.log(this.painter.mesh.position, 123); // console.log(this.painter.mesh.position, 123);
// }, 5000); // }, 5000);
}, },
handleController(controller) { handleController(controller) {
const userData = controller.userData; const userData = controller.userData;
this.cursor this.cursor
.set(0, 0, -0.2) .set(0, 0, -0.2)
.applyMatrix4(this.controller.matrixWorld); .applyMatrix4(this.controller.matrixWorld);
// if (!this.group) { // if (!this.group) {
// this.addCubes(controller); // this.addCubes(controller);
// } // }
// this.group.position // this.group.position
// .set( // .set(
// this.camera.position.x, // this.camera.position.x,
// this.camera.position.y, // this.camera.position.y,
// this.camera.position.z // this.camera.position.z
// ) // )
// .applyMatrix4(controller.matrixWorld); // .applyMatrix4(controller.matrixWorld);
// console.log(this.cursor); // console.log(this.cursor);
if (userData.isSelecting === true) { if (userData.isSelecting === true) {
if (userData.skipFrames >= 0) { if (userData.skipFrames >= 0) {
// TODO(mrdoob) Revisit this // TODO(mrdoob) Revisit this
userData.skipFrames--; userData.skipFrames--;
this.painter.moveTo(this.cursor); this.painter.moveTo(this.cursor);
} else { } else {
this.painter.lineTo(this.cursor); this.painter.lineTo(this.cursor);
this.painter.update(); this.painter.update();
} }
} }
}, },
onWindowResize(event) { onWindowResize(event) {
const width = window.innerWidth; const width = window.innerWidth;
const height = window.innerHeight; const height = window.innerHeight;
this.camera.aspect = width / height; this.camera.aspect = width / height;
this.camera.updateProjectionMatrix(); this.camera.updateProjectionMatrix();
this.renderer.setSize(width, height); this.renderer.setSize(width, height);
}, },
animate() { animate() {
this.renderer.setAnimationLoop(this.render); this.renderer.setAnimationLoop(this.render);
// requestAnimationFrame(this.animate); // requestAnimationFrame(this.animate);
// this.render(); // this.render();
}, },
render() { render() {
// this.handleController(this.controller); // this.handleController(this.controller);
this.renderer.render(this.scene, this.camera); this.renderer.render(this.scene, this.camera);
}, },
addAnimation() { addAnimation() {
// 自旋转 // 自旋转
gsap.to(this.group.rotation, { gsap.to(this.group.rotation, {
y: -Math.PI * 2, y: -Math.PI * 2,
x: 0.1, x: 0.1,
duration: 5, duration: 5,
// yoyo: true, // yoyo: true,
// repeat: -1, // repeat: -1,
onUpdate: () => { onUpdate: () => {
// this.renderer.toneMappingExposure = Math.pow( // this.renderer.toneMappingExposure = Math.pow(
// this.params.exposure, // this.params.exposure,
// 4.0 // 4.0
// ); // );
// this.render(); // this.render();
// console.log(this.params.scene); // console.log(this.params.scene);
}, },
}); });
}, },
}, },
}; };
</script> </script>
<!-- Add "scoped" attribute to limit CSS to this component only --> <!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less"> <style scoped lang="less">
.c-shader { .c-shader {
width: 100vw; width: 100vw;
height: 100vh; height: 100vh;
position: relative; position: relative;
z-index: 0; z-index: 0;
.camra-data { .camra-data {
.paLayout(0,0,150px,80px,10); .paLayout(0,0,150px,80px,10);
background: rgba(255, 255, 255, 0.75); background: rgba(255, 255, 255, 0.75);
border-radius: 0 0 10px 0; border-radius: 0 0 10px 0;
color: #333; color: #333;
text-align: center; text-align: center;
line-height: 20px; line-height: 20px;
} }
.select-btn { .select-btn {
// background-color: #fff; // background-color: #fff;
.paCenterBottom(2%,50%,auto,10); .paCenterBottom(2%,50%,auto,10);
} }
} }
</style> </style>

100
src/page/index/Drawing/index.vue Normal file
View 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>

12
src/page/index/Home/index.vue
View File

@ -8,7 +8,7 @@
--> -->
<template> <template>
<div class="home"> <div class="home">
<Shader class="shader"></Shader> <!-- <Shader class="shader"></Shader> -->
<div class="overlay"></div> <div class="overlay"></div>
<div <div
class="page grid js_show dialog" class="page grid js_show dialog"
@ -45,12 +45,12 @@
<script> <script>
// @ is an alias to /src // @ is an alias to /src
import { gsap } from "gsap"; import { gsap } from "gsap";
import Shader from "@/components/shader/index.vue"; // import Shader from "@/components/shader/index.vue";
export default { export default {
name: "Index", name: "Index",
components: { components: {
Shader, // Shader,
}, },
data() { data() {
return { return {
@ -98,6 +98,12 @@ export default {
name: "三维文字曲线运动", name: "三维文字曲线运动",
active: false, active: false,
}, },
{
fontIconCode: "&#xe606;",
target: "Drawing",
name: "画板",
active: false,
},
], ],
}; };
}, },

11
src/page/index/router/index.js
View File

@ -16,6 +16,7 @@ import Camera from '../Camera/index.vue'
import HandTrack from '../HandTrack/index.vue' import HandTrack from '../HandTrack/index.vue'
import Video from '../Video/index.vue' import Video from '../Video/index.vue'
import Curve from '../modifier_curve/index.vue' import Curve from '../modifier_curve/index.vue'
import Drawing from '../Drawing/index.vue'
@ -103,7 +104,15 @@ const routes = [
keepAlive: false, // 是否保持活跃 keepAlive: false, // 是否保持活跃
}, },
}, },
{
path: "/drawing",
name: "Drawing",
component: Drawing,
meta: {
title: "Drawing Board", // 标题
keepAlive: false, // 是否保持活跃
},
},
// { // {
// path: "/example", // path: "/example",