Fix issues with new threejs version

This commit is contained in:
JannisX11 2021-07-25 18:27:46 +02:00
parent 4afa9c4363
commit 407ccca7bc
6 changed files with 180 additions and 200 deletions

View File

@ -310,7 +310,6 @@ class refModel {
var mat = new THREE.MeshLambertMaterial({
color: 0xffffff,
map: tex,
vertexColors: THREE.FaceColors,
side: 2,
alphaTest: 0.05
});
@ -319,7 +318,7 @@ class refModel {
scope.material = mat
things.forEach(function(s) {
var mesh = new THREE.Mesh(new THREE.CubeGeometry(s.size[0], s.size[1], s.size[2]), mat )
var mesh = new THREE.Mesh(new THREE.BoxGeometry(s.size[0], s.size[1], s.size[2]), mat)
if (s.origin) {
mesh.position.set(s.origin[0], s.origin[1], s.origin[2])
mesh.geometry.translate(-s.origin[0], -s.origin[1], -s.origin[2])
@ -332,6 +331,25 @@ class refModel {
mesh.r_model = s.model
}
function getUVArray(face) {
var arr = [
[face.uv[0]/16, 1-(face.uv[1]/16)],
[face.uv[2]/16, 1-(face.uv[1]/16)],
[face.uv[0]/16, 1-(face.uv[3]/16)],
[face.uv[2]/16, 1-(face.uv[3]/16)]
]
var rot = (face.rotation+0)
while (rot > 0) {
let a = arr[0];
arr[0] = arr[2];
arr[2] = arr[3];
arr[3] = arr[1];
arr[1] = a;
rot = rot-90;
}
return arr;
}
for (var face in s) {
if (s.hasOwnProperty(face) && s[face].uv !== undefined) {
var fIndex = 0;
@ -343,11 +361,14 @@ class refModel {
case 'up': fIndex = 4; break;
case 'down': fIndex = 6; break;
}
mesh.geometry.faceVertexUvs[0][fIndex] = [ getUVArray(s[face])[0], getUVArray(s[face])[1], getUVArray(s[face])[3] ];
mesh.geometry.faceVertexUvs[0][fIndex+1] = [ getUVArray(s[face])[1], getUVArray(s[face])[2], getUVArray(s[face])[3] ];
let uv_array = getUVArray(s[face]);
mesh.geometry.attributes.uv.array.set(uv_array[0], fIndex*4 + 0); //0,1
mesh.geometry.attributes.uv.array.set(uv_array[1], fIndex*4 + 2); //1,1
mesh.geometry.attributes.uv.array.set(uv_array[2], fIndex*4 + 4); //0,0
mesh.geometry.attributes.uv.array.set(uv_array[3], fIndex*4 + 6); //1,0
mesh.geometry.attributes.uv.needsUpdate = true;
}
}
mesh.geometry.elementsNeedUpdate = true;
scope.model.add(mesh);
})

View File

@ -28,12 +28,16 @@ var codec = new Codec('obj', {
https://github.com/mrdoob/three.js/blob/dev/examples/js/exporters/OBJExporter.js
*/
var output = '# Made in Blockbench '+appVersion+'\n';
var materials = {};
var indexVertex = 0;
var indexVertexUvs = 0;
var indexNormals = 0;
let materials = {};
let output = '# Made in Blockbench '+appVersion+'\n';
let indexVertex = 0;
let indexVertexUvs = 0;
let indexNormals = 0;
const vertex = new THREE.Vector3();
const color = new THREE.Color();
const normal = new THREE.Vector3();
const uv = new THREE.Vector2();
const face = [];
output += 'mtllib ' + (options.mtl_name||'materials.mtl') +'\n';
@ -47,99 +51,123 @@ var codec = new Codec('obj', {
var geometry = mesh.geometry;
var element = OutlinerNode.uuids[mesh.name];
const normalMatrixWorld = new THREE.Matrix3();
if (!element) return;
if (element.export === false) return;
output += 'o ' + element.name + '\n';
var vertices = geometry.vertices;
const vertices = geometry.getAttribute( 'position' );
const normals = geometry.getAttribute( 'normal' );
const uvs = geometry.getAttribute( 'uv' );
const indices = geometry.getIndex(); // name of the mesh object
for ( var i = 0, l = vertices.length; i < l; i ++ ) {
output += 'o ' + mesh.name + '\n'; // name of the mesh material
var vertex = vertices[ i ].clone();
vertex.applyMatrix4( mesh.matrixWorld );
if ( mesh.material && mesh.material.name ) {
output += 'v ' + (vertex.x*scale) + ' ' + (vertex.y*scale) + ' ' + (vertex.z*scale) + '\n';
nbVertex ++;
}
// uvs
var faces = geometry.faces;
var faceVertexUvs = geometry.faceVertexUvs[ 0 ];
var hasVertexUvs = faces.length === faceVertexUvs.length;
output += 'usemtl ' + mesh.material.name + '\n';
if ( hasVertexUvs ) {
} // vertices
for ( var i = 0, l = faceVertexUvs.length; i < l; i ++ ) {
var vertexUvs = faceVertexUvs[ i ];
if ( vertices !== undefined ) {
for ( var j = 0, jl = vertexUvs.length; j < jl; j ++ ) {
for ( let i = 0, l = vertices.count; i < l; i ++, nbVertex ++ ) {
vertex.x = vertices.getX( i );
vertex.y = vertices.getY( i );
vertex.z = vertices.getZ( i ); // transform the vertex to world space
vertex.applyMatrix4( mesh.matrixWorld ); // transform the vertex to export format
output += 'v ' + vertex.x + ' ' + vertex.y + ' ' + vertex.z + '\n';
var uv = vertexUvs[ j ];
output += 'vt ' + uv.x + ' ' + uv.y + '\n';
nbVertexUvs ++;
}
}
}
// normals
} // uvs
var normalMatrixWorld = new THREE.Matrix3();
normalMatrixWorld.getNormalMatrix( mesh.matrixWorld );
for ( var i = 0, l = faces.length; i < l; i ++ ) {
if ( uvs !== undefined ) {
var face = faces[ i ];
var vertexNormals = face.vertexNormals;
for ( let i = 0, l = uvs.count; i < l; i ++, nbVertexUvs ++ ) {
if ( vertexNormals.length === 3 ) {
uv.x = uvs.getX( i );
uv.y = uvs.getY( i ); // transform the uv to export format
for ( var j = 0, jl = vertexNormals.length; j < jl; j ++ ) {
output += 'vt ' + uv.x + ' ' + uv.y + '\n';
var normal = vertexNormals[ j ].clone();
normal.applyMatrix3( normalMatrixWorld );
output += 'vn ' + normal.x + ' ' + normal.y + ' ' + normal.z + '\n';
nbNormals ++;
}
} else {
var normal = face.normal.clone();
normal.applyMatrix3( normalMatrixWorld );
for ( var j = 0; j < 3; j ++ ) {
output += 'vn ' + normal.x + ' ' + normal.y + ' ' + normal.z + '\n';
nbNormals ++;
}
}
} // normals
if ( normals !== undefined ) {
normalMatrixWorld.getNormalMatrix( mesh.matrixWorld );
for ( let i = 0, l = normals.count; i < l; i ++, nbNormals ++ ) {
normal.x = normals.getX( i );
normal.y = normals.getY( i );
normal.z = normals.getZ( i ); // transform the normal to world space
normal.applyMatrix3( normalMatrixWorld ).normalize(); // transform the normal to export format
output += 'vn ' + normal.x + ' ' + normal.y + ' ' + normal.z + '\n';
}
}
// material
for (var face in element.faces) {
var tex = element.faces[face].getTexture()
for (let key in element.faces) {
let tex = element.faces[key].getTexture()
if (tex && tex.uuid && !materials[tex.id]) {
materials[tex.id] = tex
}
}
// faces
if ( indices !== null ) {
for ( var i = 0, j = 1, l = faces.length; i < l; i ++, j += 3 ) {
for ( let i = 0, l = indices.count; i < l; i += 3 ) {
var face = faces[ i ];
var f_mat = getMtlFace(element, face.materialIndex)
if (f_mat) {
let f_mat = getMtlFace(element, geometry.groups[ Math.floor(i / 6) ].materialIndex)
if (f_mat) {
if (i % 2 === 0) {
output += f_mat
if (i % 2 === 0) {
output += f_mat
}
for ( let m = 0; m < 3; m ++ ) {
const j = indices.getX( i + m ) + 1;
face[ m ] = indexVertex + j + ( normals || uvs ? '/' + ( uvs ? indexVertexUvs + j : '' ) + ( normals ? '/' + ( indexNormals + j ) : '' ) : '' );
} // transform the face to export format
output += 'f ' + face.join( ' ' ) + '\n';
}
output += 'f ';
output += ( indexVertex + face.a + 1 ) + '/' + ( hasVertexUvs ? ( indexVertexUvs + j ) : '' ) + '/' + ( indexNormals + j ) + ' ';
output += ( indexVertex + face.b + 1 ) + '/' + ( hasVertexUvs ? ( indexVertexUvs + j + 1 ) : '' ) + '/' + ( indexNormals + j + 1 ) + ' ';
output += ( indexVertex + face.c + 1 ) + '/' + ( hasVertexUvs ? ( indexVertexUvs + j + 2 ) : '' ) + '/' + ( indexNormals + j + 2 ) + '\n';
}
} else {
for ( let i = 0, l = vertices.count; i < l; i += 3 ) {
for ( let m = 0; m < 3; m ++ ) {
const j = i + m + 1;
face[ m ] = indexVertex + j + ( normals || uvs ? '/' + ( uvs ? indexVertexUvs + j : '' ) + ( normals ? '/' + ( indexNormals + j ) : '' ) : '' );
} // transform the face to export format
output += 'f ' + face.join( ' ' ) + '\n';
}
}
// update index

View File

@ -18,34 +18,6 @@ function getRescalingFactor(angle) {
break;
}
}
function getUVArray(side, frame, stretch) {
//Used by display preview models
if (stretch === undefined) {
stretch = -1
} else {
stretch = stretch*(-1)
}
var arr = [
new THREE.Vector2(side.uv[0]/16, (side.uv[1]/16)/stretch+1), //0,1
new THREE.Vector2(side.uv[0]/16, (side.uv[3]/16)/stretch+1), //0,0
new THREE.Vector2(side.uv[2]/16, (side.uv[3]/16)/stretch+1), //1,0
new THREE.Vector2(side.uv[2]/16, (side.uv[1]/16)/stretch+1) //1,1
]
if (frame > 0 && stretch !== -1) {
//Animate
var offset = (1/stretch) * frame
arr[0].y += offset
arr[1].y += offset
arr[2].y += offset
arr[3].y += offset
}
var rot = (side.rotation+0)
while (rot > 0) {
arr.push(arr.shift())
rot = rot-90;
}
return arr;
}
const Canvas = {
materials: {},
meshes: {},
@ -61,6 +33,8 @@ const Canvas = {
}),
solidMaterial: (function() {
var vertShader = `
attribute float highlight;
uniform bool SHADE;
varying float light;
@ -85,7 +59,7 @@ const Canvas = {
}
if (color.b > 1.1) {
if (highlight == 1.0) {
lift = 0.12;
} else {
lift = 0.0;
@ -126,7 +100,6 @@ const Canvas = {
},
vertexShader: vertShader,
fragmentShader: fragShader,
vertexColors: THREE.FaceColors,
side: THREE.DoubleSide
});
})(),
@ -523,14 +496,16 @@ const Canvas = {
//Object handlers
addCube(obj) {
//This does NOT remove old cubes
var mesh = new THREE.Mesh(new THREE.BoxGeometry(1, 1, 1))
var mesh = new THREE.Mesh(new THREE.BoxGeometry(1, 1, 1), emptyMaterials[0]);
Canvas.meshes[obj.uuid] = mesh;
mesh.name = obj.uuid;
mesh.type = 'cube';
mesh.isElement = true;
Canvas.adaptObjectFaces(obj, mesh)
mesh.geometry.setAttribute('highlight', new THREE.BufferAttribute(new Uint8Array(24).fill(1), 1));
Canvas.adaptObjectPosition(obj, mesh)
Canvas.adaptObjectFaces(obj, mesh)
//scene.add(mesh)
if (Prop.view_mode === 'textured') {
@ -624,12 +599,13 @@ const Canvas = {
// Keep down face if no faces enabled
geometry.groups.push(geometry.all_faces[6], geometry.all_faces[7]);
}
geometry.elementsNeedUpdate = true;
},
getLayeredMaterial(layers) {
if (Canvas.layered_material && !layers) return Canvas.layered_material;
// https://codepen.io/Fyrestar/pen/YmpXYr
var vertShader = `
attribute float highlight;
uniform bool SHADE;
varying vec2 vUv;
@ -657,7 +633,7 @@ const Canvas = {
}
if (color.b > 1.1) {
if (highlight == 1.0) {
lift = 0.1;
} else {
lift = 0.0;
@ -717,7 +693,6 @@ const Canvas = {
vertexShader: vertShader,
fragmentShader: fragShader,
side: Canvas.getRenderSide(),
vertexColors: THREE.FaceColors,
transparent: true
});
Canvas.layered_material = material_shh;
@ -772,7 +747,6 @@ const Canvas = {
if (Prop.view_mode !== 'textured') return;
var mesh = cube.mesh
if (mesh === undefined || !mesh.geometry) return;
//mesh.geometry.faceVertexUvs[0] = [];
if (Project.box_uv) {
@ -875,50 +849,35 @@ const Canvas = {
},
updateUVFace(vertex_uvs, index, face, frame = 0, stretch = 1) {
stretch *= -1;
//if (!vertex_uvs[index]) vertex_uvs[index] = [];
//if (!vertex_uvs[index+1]) vertex_uvs[index+1] = [];
/*
var arr = [
vertex_uvs[index][0],
vertex_uvs[index][1],
vertex_uvs[index+1][1],
vertex_uvs[index+1][2],
]
for (var i = 0; i < 4; i++) {
if (arr[i] === undefined) {
arr[i] = new THREE.Vector2()
}
}*/
var pw = Project.texture_width;
var ph = Project.texture_height;
vertex_uvs.array.set([face.uv[2]/pw, (face.uv[1]/ph)/stretch+1], index*8 + 0); //0,1
vertex_uvs.array.set([face.uv[0]/pw, (face.uv[1]/ph)/stretch+1], index*8 + 2); //1,1
vertex_uvs.array.set([face.uv[2]/pw, (face.uv[3]/ph)/stretch+1], index*8 + 4); //0,0
vertex_uvs.array.set([face.uv[0]/pw, (face.uv[3]/ph)/stretch+1], index*8 + 6); //1,0
var arr = [
[face.uv[0]/pw, (face.uv[1]/ph)/stretch+1],
[face.uv[2]/pw, (face.uv[1]/ph)/stretch+1],
[face.uv[0]/pw, (face.uv[3]/ph)/stretch+1],
[face.uv[2]/pw, (face.uv[3]/ph)/stretch+1],
]
if (frame > 0 && stretch !== -1) {
//Animate
var offset = (1/stretch) * frame
vertex_uvs.array[index*8 + 0*2 + 1] += offset
vertex_uvs.array[index*8 + 1*2 + 1] += offset
vertex_uvs.array[index*8 + 2*2 + 1] += offset
vertex_uvs.array[index*8 + 3*2 + 1] += offset
arr[0][1] += offset
arr[1][1] += offset
arr[2][1] += offset
arr[3][1] += offset
}
var rot = (face.rotation+0)
while (rot > 0) {
vertex_uvs.array[index*8 + 2*2 + 0] = vertex_uvs.array[index*8 + 3*2 + 0];
vertex_uvs.array[index*8 + 2*2 + 1] = vertex_uvs.array[index*8 + 3*2 + 1];
vertex_uvs.array[index*8 + 1*2 + 0] = vertex_uvs.array[index*8 + 2*2 + 0];
vertex_uvs.array[index*8 + 1*2 + 1] = vertex_uvs.array[index*8 + 2*2 + 1];
vertex_uvs.array[index*8 + 0*2 + 0] = vertex_uvs.array[index*8 + 1*2 + 0];
vertex_uvs.array[index*8 + 0*2 + 1] = vertex_uvs.array[index*8 + 1*2 + 1];
vertex_uvs.array[index*8 + 3*2 + 0] = vertex_uvs.array[index*8 + 0*2 + 0];
vertex_uvs.array[index*8 + 3*2 + 1] = vertex_uvs.array[index*8 + 0*2 + 1];
//arr.push(arr.shift())
let a = arr[0];
arr[0] = arr[2];
arr[2] = arr[3];
arr[3] = arr[1];
arr[1] = a;
rot = rot-90;
}
vertex_uvs.array.set(arr[0], index*8 + 0); //0,1
vertex_uvs.array.set(arr[1], index*8 + 2); //1,1
vertex_uvs.array.set(arr[2], index*8 + 4); //0,0
vertex_uvs.array.set(arr[3], index*8 + 6); //1,0
},
//Outline
getOutlineMesh(mesh, line) {
@ -927,13 +886,13 @@ const Canvas = {
});
let points = [
vs[2], vs[3],
vs[7], vs[6],
vs[6], vs[7],
vs[2], vs[0],
vs[1], vs[3],
vs[1], vs[5],
vs[4], vs[6],
vs[7], vs[5],
vs[4], vs[0]
vs[1], vs[4],
vs[5], vs[0],
vs[5], vs[7],
vs[6], vs[4],
vs[1], vs[3]
].map(a => new THREE.Vector3().fromArray(a))
if (!line) {
var geometry = new THREE.BufferGeometry();

View File

@ -1949,7 +1949,6 @@ function initCanvas() {
markerColors.forEach(function(s, i) {
var thismaterial = new THREE.MeshLambertMaterial({
color: 0xffffff,
vertexColors: THREE.FaceColors,
map: tex
})
thismaterial.color.set(s.pastel)
@ -2034,26 +2033,20 @@ function updateShading() {
Canvas.solidMaterial.uniforms.BRIGHTNESS.value = settings.brightness.value / 50;
}
function updateCubeHighlights(hover_cube, force_off) {
return;
Cube.all.forEach(cube => {
if (cube.visibility) {
var mesh = cube.mesh;
mesh.geometry.faces.forEach(face => {
var b_before = face.color.b;
if (
Settings.get('highlight_cubes') &&
((hover_cube == cube && !Transformer.dragging) || cube.selected) &&
Modes.edit &&
!force_off
) {
face.color.setRGB(1.25, 1.28, 1.3);
} else {
face.color.setRGB(1, 1, 1);
}
if (face.color.b != b_before) {
mesh.geometry.colorsNeedUpdate = true;
}
})
let highlighted = (
Settings.get('highlight_cubes') &&
((hover_cube == cube && !Transformer.dragging) || cube.selected) &&
Modes.edit &&
!force_off
) ? 1 : 0;
if (mesh.geometry.attributes.highlight.array[0] != highlighted) {
mesh.geometry.attributes.highlight.array.set(Array(24).fill(highlighted));
mesh.geometry.attributes.highlight.needsUpdate = true;
}
}
})
}

View File

@ -57,6 +57,8 @@ class Texture {
img.tex.name = this.name;
var vertShader = `
attribute float highlight;
uniform bool SHADE;
varying vec2 vUv;
@ -83,7 +85,7 @@ class Texture {
}
if (color.b > 1.1) {
if (highlight == 1.0) {
lift = 0.1;
} else {
lift = 0.0;
@ -136,7 +138,6 @@ class Texture {
vertexShader: vertShader,
fragmentShader: fragShader,
side: Canvas.getRenderSide(),
vertexColors: THREE.FaceColors,
transparent: true,
});
mat.map = tex;

View File

@ -1,75 +1,53 @@
THREE.BufferGeometry.prototype.setShape = function(from, to) {
let {position} = this.attributes;
// East
position.array.set([
to[0], to[1], to[2],
to[0], to[1], from[2],
to[0], from[1], to[2],
to[0], from[1], from[2],
], 0)
// West
position.array.set([
from[0], to[1], to[2],
from[0], to[1], from[2],
from[0], from[1], to[2],
from[0], to[1], to[2],
from[0], from[1], from[2],
from[0], from[1], to[2],
], 12)
// Up
position.array.set([
from[0], to[1], from[2],
to[0], to[1], from[2],
from[0], to[1], to[2],
to[0], to[1], to[2],
], 24)
// Down
position.array.set([
from[0], from[1], from[2],
to[0], from[1], from[2],
from[0], from[1], to[2],
to[0], from[1], to[2],
from[0], from[1], from[2],
to[0], from[1], from[2],
], 36)
// South
position.array.set([
from[0], to[1], to[2],
to[0], to[1], to[2],
from[0], from[1], to[2],
to[0], from[1], to[2],
], 48)
// North
position.array.set([
from[0], to[1], from[2],
to[0], to[1], from[2],
from[0], from[1], from[2],
from[0], to[1], from[2],
to[0], from[1], from[2],
from[0], from[1], from[2],
], 60)
position.needsUpdate = true;
}
THREE.BoxGeometry.prototype.to = function(arr) {
return;
//X
this.vertices[0].setX(arr[0])
this.vertices[1].setX(arr[0])
this.vertices[2].setX(arr[0])
this.vertices[3].setX(arr[0])
//Y
this.vertices[0].setY(arr[1])
this.vertices[1].setY(arr[1])
this.vertices[4].setY(arr[1])
this.vertices[5].setY(arr[1])
//Z
this.vertices[0].setZ(arr[2])
this.vertices[2].setZ(arr[2])
this.vertices[5].setZ(arr[2])
this.vertices[7].setZ(arr[2])
this.verticesNeedUpdate = true
}
Object.assign( THREE.Euler.prototype, {
setFromDegreeArray: function ( arr, invert ) {