Learn from the Dragon Boat Festival to threejs more than two weeks now, and now summarize what I gathered from the Internet relatively weighty material and stepped in a project the size of the pit, the following error if there is, thank you for the great God let me know.
First, the data threejs learning
- Threejs Getting Started
- Threejs official website
- Threejs Guo Columban technology blog
- Twilight Chi late to the technology blog
- Threejs source explained
- THREEJS Development Guide and chapters case
Second, the size of the project pit summary
1. To achieve the effect of:
2. Difficult point
- How to achieve load obj and mtl files
// Import obj external model function setObj () { //加载mtl for (let i =0;i<objUrl.length;i++){ // load display progress var the onProgress = function (XHR) { if ( xhr.lengthComputable ) { var percentComplete = xhr.loaded/xhr.total * 100; console.log( Math.round( percentComplete, 2 ) + '% downloaded' ); } }; // load error is called when var the onError = function () {}; new THREE.MTLLoader() .setPath( 'source/') .load( mtlUrl[i]+'.mtl', function ( materials ) { materials.preload(); new THREE.OBJLoader() .setMaterials( materials ) .setPath( 'source/' ) .load (objUrl [I] + '. obj', function (Object) { // set the location of the model object.position.x 20 is = 2 * I + ; object.position.y = 2; object.position.z = 2; object.castShadow = true; object.receiveShadow = true; // model is added to the scene to scene.add (Object); // objects.push (Object); }, onProgress, onError ); } ); } }
- How to achieve drag after import 3d model
Call the function drag is THREE.DragControls, but since we import external model, that it is the type group, and dragControls look for is the type of drag type mesh, if the direct write dragcontrols template, you'll find simply can not realize drag.
// model realize drag function Drag (Objects) { // Initialization drag control var dragControls = new new THREE.DragControls (Objects, Camera, renderer.domElement); dragControls.addEventListener ( 'hoveron', function (Event) { // make an object transform the selected control object and bind transform.attach (event.object); }); // start dragging dragControls.addEventListener ( 'dragStart', function () { controls.enabled = false; } ); // drag end dragControls.addEventListener ( 'the dragend', function () { controls.enabled = true; } ); }
This time you have to look threejs implement the principle of drag, you have to use THREE.Raycaster, emits a ray from the camera, to capture two-dimensional coordinates of the mouse, to convert the two-dimensional coordinates into world coordinates of the mouse, by clicking the mouse position (two-dimensional coordinates) and the current camera matrix to calculate the position of the beam, and then get an array of objects intersected by the ray, which sort of element in accordance with the distance, the closer the more forward, to allow inspection offspring, and finally to call dragControls.
Note: If you want to move the end of the page also realize drag, where the judge should pay attention to the current page in the mobile terminal or pc end, that it is retrieving the location mouse clicks or touchscreen click here:
// determines or is pc at the end of the moving end var OS = function () { var UA = the navigator.userAgent, isWindowsPhone = /(?:Windows Phone)/.test(ua), isSymbian = /(?:SymbianOS)/.test(ua) || isWindowsPhone, isAndroid = / (?: Android) / .test (ua) isFireFox = /(?:Firefox)/.test(ua), isChrome = / (?: Chrome | crios) / .test (ua) isTablet = /(?:iPad|PlayBook)/.test(ua) || (isAndroid && !/(?:Mobile)/.test(ua)) || (isFireFox && /(?:Tablet)/.test(ua)), isPhone = /(?:iPhone)/.test(ua) && !isTablet, isPc = !isPhone && !isAndroid && !isSymbian; return { isTablet: isTablet, isPhone: isPhone, isAndroid: isAndroid, ISPC: ISPC }; }(); ............ var mouse = new THREE.Vector2(); IF (os.isAndroid || os.isPhone) { // movement end position click var Touch event.touches = [0 ]; mouse.x = (touch.pageX / window.innerWidth) * 2 - 1; mouse.y = -(touch.pageY / window.innerHeight) * 2 + 1; } The else IF (os.isTablet) { // movement end position click var Touch event.touches = [0 ]; mouse.x = (touch.pageX / window.innerWidth) * 2 - 1; mouse.y = -(touch.pageY / window.innerHeight) * 2 + 1; } The else IF (os.isPc) { // mouse click position, calculates the position of the desired point Raycaster, to screen for the center, to the range of -1. 1 mouse.x = (event.clientX / window.innerWidth) * 2--1 ; mouse.y = -(event.clientY / window.innerHeight) * 2 + 1; }
- How to change the coordinate display
Demand requires the user to control the coordinate display is rotate or translate, in this case we use THREE gui to display. which is:
the init () { // set the option gui var gui_tag = new new function () { the this .translate = to true ; } was gui = new dat.GUI (); gui.add(gui_tag,'translate'); ...... } // time rendering function Animate () { ...... if (gui_tag.translate === true){ transform.setMode("translate"); } else { transform.setMode("rotate"); } }
- How to control the rotation and zoom camera
Use camera rotation orbitControl to control, but it is worth noting that when you rotate the camera plus the time, when dragging the model will find the camera will move together, this time to drag the model will become less liking, and this when we want to add:
transform.addEventListener( 'dragging-changed', function ( event ) { orbit.enabled = ! event.value; } );
The complete code is:
function the init () { // add the camera rotation Orbit = new new THREE.OrbitControls (Camera, renderer.domElement); orbit.enableDamping = true; orbit.update(); transform.addEventListener( 'dragging-changed', function ( event ) { orbit.enabled = ! event.value; } ); orbit.addEventListener( 'change', render ); } ... function animate() { .... orbit.update(); }
- How to display the page threejs embedded into the micro channel applet
Have a fixed label format on the micro-channel applet, then we can use the webview to jump to a specific page to browse threejs model.
3. The remaining issues
For the type of display can display aspects of coordinate conversion in a normal pc end page, but then moved to the end will fail.
4. Note that the lower pitfalls
- The index.html file can not double click to open, will be given as follows:
Solution: You can use webstorm to open, and this was http: localhost requests.
- There will be listening in the imported file touchstart the touch, this time will be given as follows:
At this time, followed by the {passive: false} can.
E.g:
scope.domElement.addEventListener( 'touchstart', onTouchStart, {passive: false} );