Treejs系列--4纹理贴图

序言

相信通过前两章的阅读，在项目中你能根据实际情况快速选定需要的几何体与材质。本章将优化这个物体，实质更加真实，加上一些纹理，让其更加细腻。

添加纹理

treejs提供了 TextureLoader，可以使得我们非常方便的添加纹理贴图。

构造函数
TextureLoader() 创建一个新的TextureLoader.

方法
共有方法请参见其基类Loader。
.load ( url : String) : Texture
url — 文件的URL或者路径，也可以为 Data URI.

效果图
Treejs系列--4纹理贴图
纹理贴图(bg2.jpg)
Treejs系列--4纹理贴图

var texture = new THREE.TextureLoader().load( "./bg2.jpg" );
var material = new THREE.MeshPhongMaterial({
    color: 0xffffff,
    map: texture,
    specular:0xd0c7be,
});

完整代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            *{margin: 0; width: 0;}
            body{overflow: hidden;}
        </style>
        <script src="three.js" type="text/javascript" charset="utf-8"></script>
        <script src="OrbitControls.js" type="text/javascript" charset="utf-8"></script>
        
    </head>
    <body>
    </body>
    <script type="text/javascript">
        //创建场景
        var scene = new THREE.Scene();
        scene.background = new THREE.Color(0xbbbbbb);
        scene.position.x = -1;
        scene.position.y = -1;
        
        //创建相机
        var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
        //创建渲染器
        var renderer = new THREE.WebGLRenderer();
        //设置渲染器大小
        renderer.setSize(window.innerWidth, window.innerHeight);
        //将渲染器添加到页面中
        document.body.appendChild(renderer.domElement);
        
        //点光源
        var point = new THREE.PointLight(0xeeeeee);
        point.position.set(400, 200, 300); //点光源位置
        scene.add(point); //点光源添加到场景中
        
        //辅助线开始
        var arrowHelper = new THREE.AxesHelper( 115 );
        scene.add(arrowHelper)
        
        var spotLight = new THREE.SpotLight( 0xeeeeee );
        spotLight.position.set( 0, 380, 0 );
        scene.add( spotLight );
        
        var spotLightHelper = new THREE.SpotLightHelper( spotLight );
        scene.add( spotLightHelper );
        
        
        var helper = new THREE.CameraHelper( camera );
        scene.add( helper );
        //辅助线结束
        
        var texture = new THREE.TextureLoader().load( "./bg2.jpg" );
        //创建立方体
        var geometry = new THREE.TorusKnotBufferGeometry( 10, 4);
        var material = new THREE.MeshPhongMaterial({
            color: 0xffffff,
            map: texture,
            specular:0xd0c7be,
        });
        
        var torusKnot = new THREE.Mesh( geometry, material );
        //创建网格 包含立方体与立方体上的材质
        scene.add(torusKnot)
        
        //可以适当调整相机位置
        camera.position.z = 56;
        //渲染循环、动画循环
        
        function render() {
          renderer.render(scene,camera);//执行渲染操作
        }
        render();
        var controls = new THREE.OrbitControls(camera,renderer.domElement);//创建控件对象
        controls.addEventListener('change', render);//监听鼠标、键盘事件
    </script>
</html>