three.js贴图

首页 > 代码库 > three.js贴图

2024-08-22 07:22:14 220人阅读

使用图像作为材质。这时候，就需要导入图像作为纹理贴图，并添加到相应的材质中

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>
        <script type="text/javascript" src="libs/three.js"></script>
        
        <script type="text/javascript">
            function init() {
                var renderer = new THREE.WebGLRenderer({
                    canvas: document.getElementById(‘mainCanvas‘)
                });
                renderer.setClearColor(0x000000);
                var scene = new THREE.Scene();
                
                // camera
                var camera = new THREE.OrthographicCamera(-10, 10, 7.5, -7.5, 0.1, 100);
                camera.position.set(25, 25, 25);
                camera.lookAt(new THREE.Vector3(0, 0, 0));
                scene.add(camera);
                
                // light
                var light = new THREE.PointLight(0xffffff, 1, 1000);
                light.position.set(10, 15, 20);
                scene.add(light);
                //如果没有重绘函数，就需要在完成导入纹理的步骤后，重新绘制画面，这是在回调函数中实现
                var texture = THREE.ImageUtils.loadTexture(‘img/0.png‘, {}, function() {//将图片导入到纹理中
                    renderer.render(scene, camera);
                });
                var material = new THREE.MeshLambertMaterial({//将材质的map属性设置为texture：
                    map: texture
                });
                
                var cube = new THREE.Mesh(new THREE.CubeGeometry(5, 5, 5), material);
                scene.add(cube);
                //var sphere = new THREE.Mesh(new THREE.SphereGeometry(5, 25, 15), material);
                //scene.add(sphere);
                
                renderer.render(scene, camera);
            }
        </script>
    </head>
    
    <body onload="init()">
        <canvas id="mainCanvas" width="400px" height="300px" ></canvas>
    </body>
</html>

技术分享

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>
        <script type="text/javascript" src="libs/three.js"></script>
        
        <script type="text/javascript">
            function init() {
                var renderer = new THREE.WebGLRenderer({
                    canvas: document.getElementById(‘mainCanvas‘)
                });
                renderer.setClearColor(0x000000);
                var scene = new THREE.Scene();
                
                // camera
                var camera = new THREE.OrthographicCamera(-10, 10, 7.5, -7.5, 0.1, 100);
                camera.position.set(25, 25, 25);
                camera.lookAt(new THREE.Vector3(0, 0, 0));
                scene.add(camera);
                
                // light
                var light = new THREE.PointLight(0xffffff, 1, 1000);
                light.position.set(10, 15, 20);
                scene.add(light);
                
                var materials = [];
                for (var i = 0; i < 6; ++i) {//导入图像到六个纹理，并设置到六个材质中
                    materials.push(new THREE.MeshBasicMaterial({
                        map: THREE.ImageUtils.loadTexture(‘img/‘ + i + ‘.png‘, {}, function() {
                            renderer.render(scene, camera);
                        }),
                        overdraw: true
                    }));
                }
                
                var cube = new THREE.Mesh(new THREE.CubeGeometry(5, 5, 5),
                        new THREE.MeshFaceMaterial(materials));
                scene.add(cube);
                
                renderer.render(scene, camera);
            }
        </script>
    </head>
    
    <body onload="init()">
        <canvas id="mainCanvas" width="400px" height="300px" ></canvas>
    </body>
</html>

技术分享

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>
        <script type="text/javascript" src="libs/three.js"></script>
        
        <script type="text/javascript">
            function init() {
                var renderer = new THREE.WebGLRenderer({
                    canvas: document.getElementById(‘mainCanvas‘)
                });
                //renderer.setClearColor(0x666666);
                var scene = new THREE.Scene();
                
                // camera
                var camera = new THREE.OrthographicCamera(-10, 10, 7.5, -7.5, 0.1, 100);
                camera.position.set(0, 0, 25);
                camera.lookAt(new THREE.Vector3(0, 0, 0));
                scene.add(camera);
                
                // light
                var light = new THREE.PointLight(0xffffff, 1, 1000);
                light.position.set(10, 15, 20);
                scene.add(light);
                
                var texture = THREE.ImageUtils.loadTexture(‘img/chess.png‘, {}, function() {
                    renderer.render(scene, camera);
                });
                texture.wrapS = texture.wrapT = THREE.RepeatWrapping;//指定重复方式为两个方向（wrapS和wrapT）都重复
                texture.repeat.set(4, 4);//，设置两个方向上都重复4次，由于我们的图像本来是有2行2列，所以重复4次即为8行8列
                var material = new THREE.MeshLambertMaterial({
                    map: texture
                });
                
                var plane = new THREE.Mesh(new THREE.PlaneGeometry(12, 12), material);
                scene.add(plane);
                
                renderer.render(scene, camera);
            }
        </script>
    </head>
    
    <body onload="init()">
        <canvas id="mainCanvas" width="400px" height="300px" ></canvas>
    </body>
</html>

技术分享

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>
        <script type="text/javascript" src="libs/three.js"></script>
        
        <script type="text/javascript">
            function init() {
                var renderer = new THREE.WebGLRenderer({
                    canvas: document.getElementById(‘mainCanvas‘)
                });
                renderer.setClearColor(0x000000);
                var scene = new THREE.Scene();
                
                // camera
                var camera = new THREE.OrthographicCamera(-2.5, 2.5, 1.875, -1.875, 0.1, 100);
                camera.position.set(5, 5, 20);
                camera.lookAt(new THREE.Vector3(0, 0, 0));
                scene.add(camera);
                
                var material = new THREE.MeshLambertMaterial({
                    color: 0xffff00
                });
                var geometry = new THREE.CubeGeometry(1, 2, 3);
                var mesh = new THREE.Mesh(geometry, material);//把几何形状与材质传入其构造函数
                scene.add(mesh);
                
                var light = new THREE.DirectionalLight(0xffffff);
                light.position.set(20, 10, 5);
                scene.add(light);
                
                // render
                renderer.render(scene, camera);
            }
        </script>
    </head>
    
    <body onload="init()">
        <canvas id="mainCanvas" width="400px" height="300px" ></canvas>
    </body>
</html>

技术分享

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>
        <script type="text/javascript" src="libs/three.js"></script>
        
        <script type="text/javascript">
            function init() {
                var renderer = new THREE.WebGLRenderer({
                    canvas: document.getElementById(‘mainCanvas‘)
                });
                renderer.setClearColor(0x000000);
                var scene = new THREE.Scene();
                
                // camera
                var camera = new THREE.OrthographicCamera(-2.5, 2.5, 1.875, -1.875, 0.1, 100);
                camera.position.set(5, 5, 20);
                camera.lookAt(new THREE.Vector3(0, 0, 0));
                scene.add(camera);
                
                var material = new THREE.MeshLambertMaterial({
                    color: 0xffff00
                });
                var geometry = new THREE.CubeGeometry(1, 2, 3);
                var mesh = new THREE.Mesh(geometry, material);
                scene.add(mesh);
                
                mesh.material = new THREE.MeshLambertMaterial({
                    color: 0xff0000
                });
                
                var light = new THREE.DirectionalLight(0xffffff);
                light.position.set(20, 10, 5);
                scene.add(light);
                
                // render
                renderer.render(scene, camera);
            }
        </script>
    </head>
    
    <body onload="init()">
        <canvas id="mainCanvas" width="400px" height="300px" ></canvas>
    </body>
</html>

技术分享

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>
        <script type="text/javascript" src="libs/three.js"></script>
        
        <script type="text/javascript">
            function init() {
                var renderer = new THREE.WebGLRenderer({
                    canvas: document.getElementById(‘mainCanvas‘)
                });
                renderer.setClearColor(0x000000);
                var scene = new THREE.Scene();
                
                // camera
                var camera = new THREE.OrthographicCamera(-2.5, 2.5, 1.875, -1.875, 0.1, 100);
                camera.position.set(5, 5, 20);
                camera.lookAt(new THREE.Vector3(0, 0, 0));
                scene.add(camera);
                
                var material = new THREE.MeshLambertMaterial({
                    color: 0xffff00
                });
                var geometry = new THREE.CubeGeometry(1, 2, 3);
                var mesh = new THREE.Mesh(geometry, material);
                scene.add(mesh);
                
                mesh.position.set(1.5, -0.5, 0);
                mesh.position = new THREE.Vector3(1.5, -0.5, 0);
                mesh.position.z = 1;//只设置其中一个属性
                //如果需要同时设置多个属性，可以使用以下两种方法： mesh.position.set(1.5, -0.5, 0);
                
                var light = new THREE.DirectionalLight(0xffffff);
                light.position.set(20, 10, 5);
                scene.add(light);
                
                drawAxes(scene);
                
                // render
                renderer.render(scene, camera);
            }
            
            function drawAxes(scene) {
                // x-axis
                var xGeo = new THREE.Geometry();
                xGeo.vertices.push(new THREE.Vector3(0, 0, 0));
                xGeo.vertices.push(new THREE.Vector3(1, 0, 0));
                var xMat = new THREE.LineBasicMaterial({
                    color: 0xff0000
                });
                var xAxis = new THREE.Line(xGeo, xMat);
                scene.add(xAxis);
                
                // y-axis
                var yGeo = new THREE.Geometry();
                yGeo.vertices.push(new THREE.Vector3(0, 0, 0));
                yGeo.vertices.push(new THREE.Vector3(0, 1, 0));
                var yMat = new THREE.LineBasicMaterial({
                    color: 0x00ff00
                });
                var yAxis = new THREE.Line(yGeo, yMat);
                scene.add(yAxis);
                
                // z-axis
                var zGeo = new THREE.Geometry();
                zGeo.vertices.push(new THREE.Vector3(0, 0, 0));
                zGeo.vertices.push(new THREE.Vector3(0, 0, 1));
                var zMat = new THREE.LineBasicMaterial({
                    color: 0x00ccff
                });
                var zAxis = new THREE.Line(zGeo, zMat);
                scene.add(zAxis);
            }
        </script>
    </head>
    
    <body onload="init()">
        <canvas id="mainCanvas" width="400px" height="300px" ></canvas>
    </body>
</html>

技术分享缩放对应的属性是scale，旋转对应的属性是rotation，具体方法与上例相同

three.js贴图

声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉：投诉/举报工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。

联系
我们

首页 > 代码库 > three.js贴图

three.js贴图

看完仍有疑问？有类似问题直接问程序猿