i'm trying draw 3d curve plane in threejs, goes wrong. curve plane doesn't curve plane: doesn't cast shadows on self, , don't see roughness on , vertices doesn't show. when turn on wireframe on material - see, plane curve.
if turn on wireframe, picture looks this:
but when turn off wireframe - doesn't curve , points disappears
code mesh:
import meshesdb '../../databases/meshes'; import scene '../globals/scene'; import 3 'three'; import config 'config'; import gui '../debug/dat-gui'; meshesdb.getbyname('ground', config.coords.boxcoords.lat, config.coords.boxcoords.lon).then( /** * @param {meshgeometry} geometrydata */ function (geometrydata) { "use strict"; // let material = new three.meshphongmaterial({color: 0x56b65a, wireframe: true}); // var material = new three.meshphongmaterial( { color: 0xffffff, specular: 0x050505 } ); let material = new three.meshlambertmaterial({wireframe: true, color: 0xcd5c5c}); // geometrydata.vertices.foreach((x) => { // x.normalize(); // }); let mesh = new three.mesh(geometrydata, material); console.log(mesh); scene.add(mesh); if (config.debug) { let meshguiconfig = { set color (val) { mesh.material.color && mesh.material.color.sethex(val); }, color () { return mesh.material.color && mesh.material.color.gethex() || 0xffffff; }, set wireframe(val) { mesh.material.wireframe = val; }, wireframe () { return mesh.material.wireframe; } }; let guifolder = gui.addfolder('dummy ground'); guifolder.addcolor(meshguiconfig, 'color'); guifolder.add(meshguiconfig, 'wireframe'); guifolder.add(mesh, 'receiveshadow'); guifolder.add(mesh, 'castshadow'); } } ); code camera:
import 3 'three'; import scene './scene'; import config 'config'; import gui '../debug/dat-gui'; let width = window.innerwidth, height = window.innerheight; let camera = new three.perspectivecamera(45, width / height, 1, 1e4); camera.position.z = 7e3; scene.add(camera); console.log(camera); if (config.debug) { let camerafolder = gui.addfolder('camera'); let camerarotationfolder = camerafolder.addfolder('rotation'); let rotationconfig = { set rotationx(val) { "use strict"; camera.rotation.x = val * math.pi / 180; }, rotationx() { "use strict"; return camera.rotation.x * 180 / math.pi; }, set rotationy(val) { "use strict"; camera.rotation.y = val * math.pi / 180; }, rotationy() { "use strict"; return camera.rotation.y * 180 / math.pi; }, set rotationz(val) { "use strict"; camera.rotation.z = val * math.pi / 180; }, rotationz() { "use strict"; return camera.rotation.z * 180 / math.pi; } } camerarotationfolder.add(rotationconfig, 'rotationx', -90, 90); camerarotationfolder.add(rotationconfig, 'rotationy', -90, 90); camerarotationfolder.add(rotationconfig, 'rotationz', -90, 90); let cameralookatfolder = camerafolder.addfolder('look at'); let lookatvector = new three.vector3(); cameralookatfolder.add(lookatvector, 'x', -10000, 10000); cameralookatfolder.add(lookatvector, 'y', -10000, 10000); cameralookatfolder.add(lookatvector, 'z', -10000, 10000); lookatvector.look = function () { "use strict"; camera.lookat(lookatvector); }; cameralookatfolder.add(lookatvector, 'look'); } export default camera; code light:
import config 'config'; import gui '../debug/dat-gui'; import 3 'three'; import scene './scene'; let hemilight = new three.hemispherelight( 0xffffff, 0xffffff, 0.6 ); hemilight.color.sethsl( 0.6, 1, 0.6 ); hemilight.groundcolor.sethsl( 0.095, 1, 0.75 ); hemilight.position.set( 0, 2500, 0 ); scene.add(hemilight); let dirlight = new three.directionallight( 0xffffff, 1 ); dirlight.color.sethsl( 0.1, 1, 0.95 ); dirlight.position.set( -1, 1.75, 1 ); dirlight.position.multiplyscalar( 500 ); scene.add( dirlight ); if (config.debug) { let lightfolder = gui.addfolder('light'); let hemilightfolder = lightfolder.addfolder('hemi-light'); let colorhemi = { set skycolor(val) { "use strict"; hemilight.color.sethex(val); }, skycolor() { "use strict"; return hemilight.color.gethex(); }, set groundcolor(val) { "use strict"; hemilight.groundcolor.sethex(val); }, groundcolor() { "use strict"; return hemilight.groundcolor.gethex(); } }; hemilightfolder.addcolor(colorhemi, 'skycolor'); hemilightfolder.addcolor(colorhemi, 'groundcolor'); hemilightfolder.add(hemilight.position, 'x', -10000, 10000); hemilightfolder.add(hemilight.position, 'y', -10000, 10000); hemilightfolder.add(hemilight.position, 'z', -10000, 10000); let dirlightfolder = lightfolder.addfolder('directional-light'); let colordir = { set color(val) { "use strict"; hemilight.color.sethex(val); }, color() { "use strict"; return hemilight.color.gethex(); } }; dirlightfolder.addcolor(colordir, 'color'); dirlightfolder.add(dirlight.position, 'x', -10000, 10000); dirlightfolder.add(dirlight.position, 'y', -10000, 10000); dirlightfolder.add(dirlight.position, 'z', -10000, 10000); } export default null; code create renderer:
import 3 'three'; let appelement = document.getelementbyid('app'); let renderer = new three.webglrenderer(); let clientrect = appelement.getboundingclientrect(); renderer.setsize(clientrect.width, clientrect.height); app.appendchild(renderer.domelement); console.info('renderer', renderer); export default renderer; i tried normalize of vectors, doesn't help. bounding box screenshot:
{ "min": {"x": -5514.99560546875, "y": -8282.283203125, "z": -253.9999849195592}, "max": {"x": 5514.99560546875, "y": 8282.283203125, "z": 253.9999849195592} } sorry many code , english )
Comments
Post a Comment