Web实训项目：THREE.js学习记录(用three.js在网页上浮动3D模型场景)

THREE.js学习记录

前言

一直自己没有学习做笔记的习惯，所以为了加强自己对知识的深入理解，决定将学习笔记写下来，希望向各位大牛们学习交流！

不当之处请斧正！在此感谢！

大牛们对此文可以忽略！

硬推：欢迎大家访问我的个人网站www.zsy.ink(不适合手机端访问)

基于three.js框架

为了做Web实训项目，搜寻八方资料，参考各路大神代码，捣鼓了将近一个月，边学边做，终于搞出来了，主题是艺术画廊，就琢磨着搞个相机？


three.js:
github:https://github.com/mrdoob/three.js
官网:https://threejs.org/

ps:
由于chrome的安全设置，threejs在chrome里显示不出来外部模型。

有些问题国内搜不到就去github/StackOverflow/google(需要番·羽·土·啬 )

用three.js在网页上浮动3D模型场景

效果如下：

场景：

 //创建场景-------------------------------------------------------------------------

    scene = new THREE.Scene();

    //设置场景背景色

    //scene.background = new THREE.Color( 0x474b52 );
    
    // 创建 雾化效果----------------------------------------------------
    // scene.fog=new THREE.FogExp2( 0xffffff, 0.015 );//指数雾化，雾化效果默认是全局影响的
    scene.fog = new THREE.Fog(0x111111,50,400); //设置雾化，线性雾化


    //场景中添加网格辅助

    //scene.add( new THREE.GridHelper( 400, 10 ) );

相机：

//创建一个透视相机，设置相机视角60度，最远能看1000，最近能看1--------------------------------------

    camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 1000 );

    camera.position.set( 0, 20, 150);    //设置相机位置
    // camera.up.x = 0;
    // camera.up.y = 1;
    // camera.up.z = 0;
    // camera.lookAt({
    //     x : 0,
    //     y : 0,
    //     z : 0
    // });
    //控制相机--------------------------------------------------------------------------------

    //controls = new THREE.OrbitControls( camera );

	//设置相机移动距离

    //controls.minDistance = 100;

    //controls.maxDistance = 900;

渲染器：

//实例化一个渲染器--------------------------------------------------------------------------------

    renderer = new THREE.WebGLRenderer( { antialias: true } );
    renderer.setPixelRatio( window.devicePixelRatio );
    renderer.setSize( window.innerWidth, window.innerHeight );
    renderer.setClearColor(0x474b52, 1.0); //设置canvas背景色(clearColor)
    document.body.appendChild( renderer.domElement );
    renderer.shadowMap.enabled = true;
    renderer.shadowMap.type = THREE.PCFSoftShadowMap;

    window.addEventListener( 'resize', onWindowResize, false );

灯光：

// 灯光----------------------------------------------------------------------------------

// 给场景添加一个环境光

     ambientLight = new THREE.AmbientLight( 0xffffff );
     ambientLight.intensity = 0.1;
     scene.add( ambientLight );

// // 给场景添加一个半球光出来

    hemiLight = new THREE.HemisphereLight( 0xffffff, 0xffffff, 0.8 );

    //hemiLight.color.setHSL( 0.6, 1, 0.6 );

    //hemiLight.groundColor.setHSL( 0.095, 1, 0.75 );
    hemiLight.intensity=0.5;

    hemiLight.position.set( 0, 0, 0 );

    scene.add( hemiLight );

// 给场景添加一个平行光出来

    dirLight = new THREE.DirectionalLight( 0xffffff, 0.8 );

    //dirLight.color.setHSL( 0.1, 1, 0.95 );

    dirLight.position.set( -40, 30, 200);

    dirLight.position.multiplyScalar( 30 );
    dirLight.castShadow = true;
    dirLight.shadow.mapSize.width = 4096;
    dirLight.shadow.mapSize.height = 4096;
    dirLight.intensity=0.1;
    scene.add( dirLight );

    
//给场景添加一个聚光灯
    spotLight=new THREE.SpotLight(0xffffff);
    spotLight.position.set(0,400,40);
    spotLight.intensity=6;
    spotLight.distance = 500;
    spotLight.angle = Math.PI/9;
    spotLight.castShadow=true;
    spotLight.shadow.mapSize.width = 4096;
    spotLight.shadow.mapSize.height = 4096;
    scene.add(spotLight);
//给场景添加一个点光
    pointLight = new THREE.PointLight(0xffffff);
    pointLight.intensity=1;
    pointLight.distance = 150;
    //pointLight.castShadow=true;
    pointLight.position.set(0, 0, 0);
    scene.add(pointLight);

模型：

//当mtl中引用了dds类型的图片时，还需导入DDSLoader文件----------------------------------------

THREE.Loader.Handlers.add( /\.dds$/i, new THREE.DDSLoader() ); 

//mtl文件加载器

mtlLoader = new THREE.MTLLoader();

//你的模型材质文件的目录地方路径

mtlLoader.setPath('model/leica/');

//导入材质文件

    mtlLoader.load('LEICA.mtl', function(materials) {

        materials.preload();

        //ob文件加载器

        objLoader = new THREE.OBJLoader();

        objLoader.setMaterials(materials);

//你的模型文件的目录地方路径

        objLoader.setPath('model/leica/');

        objLoader.load('LEICA.obj', function(object) {

//这里的object参数就是模型加载方法的回调函数，object就是你的模型，下面的属性自行设置

           
            object.position.y = 0;
            object.position.x = -10;
            //object.rotation.x = Math.PI/2;

            object.rotation.y = 0;

            object.rotation.z = 0;

            //自行调整模型比例
            object.scale.set(1, 1, 1);
            //给模型添加阴影
            for(k in object.children){
                object.children[k].castShadow = true;
                object.children[k].receiveShadow = true;
            }
            //加入到场景中
			mesh = object;
             //scene.add(object);
            scene.add(mesh);

            return object;

			//document.addEventListener('mousemove', onMouseMove, false);
			
        }, onProgress, onError);

    });

光源跟随鼠标：

//光源跟随鼠标--------------------------------------------------------------------------
// Follows the mouse event


function onMouseMove(event) {
    
  // Update the mouse variable
  event.preventDefault();
  mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
  mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
  // Make the sphere follow the mouse
  var vector = new THREE.Vector3(mouse.x, mouse.y, 0.5);
  vector.unproject(camera);
  var dir = vector.sub(camera.position).normalize();
  var distance = -camera.position.z / dir.z;
  var pos = camera.position.clone().add(dir.multiplyScalar(distance));
  //mesh.position.copy(pos);
  
  pointLight.position.copy(pos);

};

全屏功能实现：

//相机位移过渡动画实现-------------------------------------------------------
  
function TweenMax(){
    camera.position.set( 0, 20, 150);
    //camera.lookAt( scene.position );
    meshposition = false;
    
    var t = new TimelineMax();
    t.to(camera.position, 1, {
         x: 0,
         y: 15,
         z: 30,
         ease:Expo.easeInOut,
         onComplete: function (){
            window.location.href="http://www.zsy.ink"
         }
    })
}

参考资料：
[1]:官网:https://threejs.org/
[1]:基于Threejs的web 3D开发入门:http://www.10tiao.com/html/712/201710/2247484619/1.html
[1]:threejs概览:https://teakki.com/p/58a3ef1bf0d40775548c908f
[1]:Threejs基础教程:http://www.hewebgl.com/article/articledir/1
[1]:Three.js 现学现卖:http://web.jobbole.com/92335/
[1]: three.js初探，立体几何入手:https://www.cnblogs.com/hsprout/p/7865593.html
[1]: 首个threejs项目-前端填坑指南:http://www.cnblogs.com/pursues/p/5226807.html
[1]:初识three.js，搭建three.js+vue.js项目:https://www.codercto.com/a/27831.html
[1]: 用three.js在网页实现3D模型的展示:https://www.jianshu.com/p/0798a76121af?utm_campaign=maleskine&utm_content=note&utm_medium=reader_share&utm_source=weixin
[1]:threejs在chrome里显示不出来外部模型的解决办法:https://blog.csdn.net/keneyr/article/details/79485286
[1]:Three.js开发指南—使用构建three.js的基本组件:http://www.mamicode.com/info-detail-1639868.html
[1]: Three.js开发指南—使用three.js的材质:https://www.cnblogs.com/amy2011/p/6148736.html
[1]: threejs Light https://www.jianshu.com/p/af4e62aae14f
[1]: Three.js - 光源使用详解:http://www.hangge.com/blog/cache/detail_1812.html
[2]:Three.js的环境光源THREE.AmbientLight :https://blog.csdn.net/qq_30100043/article/details/77203329
[3]:Three.js的平行光THREE.DirectionalLight:
https://blog.csdn.net/qq_30100043/article/details/77466395
[2]:three.js笔记-光源:https://segmentfault.com/a/1190000008564099
[2]:Three.js的特殊光源THREE.HemisphereLight户外光照光源:https://blog.csdn.net/qq_30100043/article/details/77546888
[2]:Three.js开发指南—使用three.js里的各种光源:https://www.cnblogs.com/amy2011/p/5761174.html
[2]:codepen(Follow mouse position with light in three.js) :https://codepen.io/paulmg/pen/yJAwgx
[2]:TweenMax学习总结:https://blog.csdn.net/J__Max/article/details/82558421
[2]:TweenMax学习笔记整理:https://blog.csdn.net/lhjuejiang/article/details/80725844
[2]:tweenmax笔记:https://blog.csdn.net/leiwen_su/article/details/52061721
[2]:Three.js获取鼠标点击的三维坐标示例代码:https://www.jb51.net/article/109433.htm
[2]:three.js 鼠标拾取:https://blog.csdn.net/planckztd/article/details/79151400
[2]:three.js学习记录:https://blog.csdn.net/lger_Pro/article/details/78296379