threejs 正交视图详解
用正交就是因为能更好的用像素
canvaswidth = 750; canvasheight = 1206; renderer = new THREE.WebGLRenderer({ alpha: true }); renderer.setSize(canvaswidth, canvasheight,false); document.body.appendChild(renderer.domElement); // camera = new THREE.OrthographicCamera (canvaswidth / - 2, canvaswidth / 2, canvasheight / 2, canvasheight / - 2, 1, 1000 ); camera.position.z = 350; scene = new THREE.Scene(); var geometry = new THREE.PlaneGeometry(750, 1206, 1, 1); // A begin geometry.vertices[0].uv = new THREE.Vector2(0, 0); geometry.vertices[1].uv = new THREE.Vector2(1, 0); geometry.vertices[2].uv = new THREE.Vector2(1, 1); geometry.vertices[3].uv = new THREE.Vector2(0, 1); // A end // B begin // 纹理坐标怎么弄 var texture1 = THREE.ImageUtils.loadTexture("/moban/images/tietu.png", null, function(t) {}); var material = new THREE.MeshBasicMaterial({ map: texture1, transparent: true, side: THREE.DoubleSide }); mesh = new THREE.Mesh(geometry, material); mesh.position.z = 0; mesh.position.x = 0; mesh.position.y = 0; mesh.rotation.x = 0; mesh.rotation.y = 0; mesh.rotation.z = 0; scene.add(mesh); //用于自适应 window.addEventListener('resize', onWindowResize, false); var tm = new TimelineMax();
里面的坐标就是按照像素来的 所以一般2D转3D 一般用正交视图 方便坐标变换
透视视图 就有从远到近效果
一般这些像素参数是固定的不用去改他