o3d - render cube data

This commit is contained in:
dntzhang 2019-06-27 12:09:26 +08:00
parent 10ec7af2e3
commit ca0a33a7e5
5 changed files with 92 additions and 11 deletions

View File

@ -2423,8 +2423,14 @@
//w0.002 100
//w0.0033333333333333335 300
//w 0.01 500
};this.testP = new Vector3(100, 100, 500);
};this.test1 = new Vector3(100, 100, 500);
this.test2 = new Vector3(100 + 100, 100, 500);
this.test3 = new Vector3(100 + 100, 100 + 100, 500);
this.test4 = new Vector3(100, 100 + 100, 500);
this.test5 = new Vector3(100, 100, 600);
this.test6 = new Vector3(100 + 100, 100, 600);
this.test7 = new Vector3(100 + 100, 100 + 100, 600);
this.test8 = new Vector3(100, 100 + 100, 600);
this.pv = new Matrix4();
}
@ -2433,9 +2439,24 @@
//p*v*m
//face z-sort !!! w-sort !!
//render
this.testP.applyMatrix4(this.pv);
this.test1.applyMatrix4(this.pv);
this.test2.applyMatrix4(this.pv);
this.test3.applyMatrix4(this.pv);
this.test4.applyMatrix4(this.pv);
this.test5.applyMatrix4(this.pv);
this.test6.applyMatrix4(this.pv);
this.test7.applyMatrix4(this.pv);
this.test8.applyMatrix4(this.pv);
console.log(this.test1);
console.log(this.test2);
console.log(this.test3);
console.log(this.test4);
console.log(this.test5);
console.log(this.test6);
console.log(this.test7);
console.log(this.test8);
console.log(this.testP.w);
window.xxx = [this.test1, this.test2, this.test3, this.test4, this.test5, this.test6, this.test7, this.test8];
};
return Cube;
@ -2511,7 +2532,7 @@
camera: new Camera({
x: 0,
y: 0,
z: 600,
z: 1000,
rotateX: 0,
rotateY: 0,
fov: 60,

File diff suppressed because one or more lines are too long

View File

@ -7,6 +7,36 @@
<div id='root'></div>
<script src="b.js"></script>
<canvas width="700" height="700" style='border: 1px solid #ccc;'></canvas>
<script>
var canvas = document.querySelector('canvas')
var ctx = canvas.getContext('2d')
ctx.moveTo(xxx[0].x*1000,xxx[0].y*1000)
ctx.lineTo(xxx[1].x*1000,xxx[1].y*1000)
ctx.lineTo(xxx[2].x*1000,xxx[2].y*1000)
ctx.lineTo(xxx[3].x*1000,xxx[3].y*1000)
ctx.lineTo(xxx[0].x*1000,xxx[0].y*1000)
ctx.lineTo(xxx[4].x*1000,xxx[4].y*1000)
ctx.lineTo(xxx[5].x*1000,xxx[5].y*1000)
ctx.lineTo(xxx[6].x*1000,xxx[6].y*1000)
ctx.lineTo(xxx[7].x*1000,xxx[7].y*1000)
ctx.lineTo(xxx[4].x*1000,xxx[4].y*1000)
ctx.moveTo(xxx[5].x*1000,xxx[5].y*1000)
ctx.lineTo(xxx[1].x*1000,xxx[1].y*1000)
ctx.moveTo(xxx[6].x*1000,xxx[6].y*1000)
ctx.lineTo(xxx[2].x*1000,xxx[2].y*1000)
ctx.moveTo(xxx[7].x*1000,xxx[7].y*1000)
ctx.lineTo(xxx[3].x*1000,xxx[3].y*1000)
ctx.stroke()
</script>
</body>
</html>

View File

@ -4,7 +4,7 @@ const stage = new Stage({
camera: new Camera({
x: 0,
y: 0,
z: 600,
z: 1000,
rotateX: 0,
rotateY: 0,
fov: 60,

View File

@ -19,8 +19,14 @@ class Cube {
//w0.002 100
//w0.0033333333333333335 300
//w 0.01 500
this.testP = new Vector3(100, 100, 500)
this.test1 = new Vector3(100, 100, 500)
this.test2 = new Vector3(100+100, 100, 500)
this.test3 = new Vector3(100+100, 100+100, 500)
this.test4 = new Vector3(100, 100+100, 500)
this.test5 = new Vector3(100, 100, 600)
this.test6 = new Vector3(100+100, 100, 600)
this.test7 = new Vector3(100+100, 100+100, 600)
this.test8 = new Vector3(100, 100+100, 600)
this.pv = new Matrix4()
}
@ -29,9 +35,33 @@ class Cube {
//p*v*m
//face z-sort !!! w-sort !!
//render
this.testP.applyMatrix4(this.pv)
this.test1.applyMatrix4(this.pv)
this.test2.applyMatrix4(this.pv)
this.test3.applyMatrix4(this.pv)
this.test4.applyMatrix4(this.pv)
this.test5.applyMatrix4(this.pv)
this.test6.applyMatrix4(this.pv)
this.test7.applyMatrix4(this.pv)
this.test8.applyMatrix4(this.pv)
console.log(this.test1)
console.log(this.test2)
console.log(this.test3)
console.log(this.test4)
console.log(this.test5)
console.log(this.test6)
console.log(this.test7)
console.log(this.test8)
console.log(this.testP.w)
window.xxx = [
this.test1,
this.test2,
this.test3,
this.test4,
this.test5,
this.test6,
this.test7,
this.test8
]
}
}