美文网首页
webGL-three.js 3D贴图

webGL-three.js 3D贴图

作者: YomonAh | 来源:发表于2017-06-11 13:01 被阅读0次
    tietu.gif earth.gif

    上面两个例子都是应用webGL3D模型贴图实现的

    按照上一篇介绍的步骤:
    1、先初始化场景、光源、物体
    2、创建材质,在材质上添加贴图,再把材质添加到物体上,具体代码:

    let img = require('../../img/earth.jpg');
    let material = new THREE.MeshPhongMaterial({ map: THREE.ImageUtils.loadTexture(img)});
    box = new THREE.Mesh(geometry, material );
    

    这样就可以实现最基本的贴图功能了

    [demo1展示中心]:https://yomonah.github.io/project/app.html#/webGL-img
    [对应源码]:https://github.com/yomonah/react-demo/tree/master/src/components/webGL_img

    [demo2展示中心]:https://yomonah.github.io/project/app.html#/webGL-earth
    [对应源码]:https://github.com/yomonah/react-demo/tree/master/src/components/webGL_earth

    相关文章

      网友评论

          本文标题:webGL-three.js 3D贴图

          本文链接:https://www.haomeiwen.com/subject/oeehqxtx.html