Javascript 圆柱面上的三个.js多个图像_Javascript_Three.js

Javascript 圆柱面上的三个.js多个图像

javascript three.js

Javascript 圆柱面上的三个.js多个图像,javascript,three.js,Javascript,Three.js,我正在尝试使用three.js在旋转圆柱体的外部（而不是顶部或底部）显示多个图像。我能够显示一个图像，但我的目标是并排显示多个图像。我已将3个纹理添加到材质数组中，但仅显示第一个纹理。感谢您的帮助 <html> <head> <title>My first three.js app</title> <span>Test</span> <style> body { margi

我正在尝试使用three.js在旋转圆柱体的外部（而不是顶部或底部）显示多个图像。我能够显示一个图像，但我的目标是并排显示多个图像。我已将3个纹理添加到材质数组中，但仅显示第一个纹理。感谢您的帮助

<html>
<head>
    <title>My first three.js app</title>
    <span>Test</span>
    <style>
        body { margin: 0; }
        canvas { width: 100%; height: 100% }
    </style>
</head>
<body>
    <script src="js/three.js"></script>
    <script>
        var scene = new THREE.Scene();
        var camera = new THREE.PerspectiveCamera( 100, window.innerWidth / window.innerHeight, 0.1, 1000 );
        camera.position.y = 24;

        var renderer = new THREE.WebGLRenderer();
        renderer.setSize( window.innerWidth, window.innerHeight );
        document.body.appendChild( renderer.domElement );

        var diameter = 20;
        var geometry = new THREE.CylinderGeometry( diameter, diameter, 15, 32 );

        var texture1 = new THREE.TextureLoader().load( 'images/image1.jpg' );
        var texture2 = new THREE.TextureLoader().load( 'images/image2.jpg' );
        var texture3 = new THREE.TextureLoader().load( 'images/image3.png' );

        texture1.wrapS = THREE.RepeatWrapping;
        //texture.wrapT = THREE.RepeatWrapping;
        //texture.repeat.set( 1, 4 );

        var materials = [];
        materials.push(new THREE.MeshBasicMaterial({ map: texture1 }));
        materials.push(new THREE.MeshBasicMaterial({ map: texture2 }));
        materials.push(new THREE.MeshBasicMaterial({ map: texture3 }));

        var cylinder = new THREE.Mesh( geometry, materials );
        cylinder.position.y = 25;
        scene.add( cylinder);

        camera.position.z = 40;


        function render() {
            requestAnimationFrame(render);
            //cylinder.rotation.z += 0.05;
          cylinder.rotation.y += 0.005;
            renderer.render(scene, camera);
        }
        render();
    </script>
</body>


我的前三个.js应用程序
试验
正文{页边距：0；}
画布{宽度：100%；高度：100%}
var scene=new THREE.scene（）；
var摄像机=新的三透视摄像机（100，window.innerWidth/window.innerHeight，0.11000）；
摄像机位置y=24；
var renderer=new THREE.WebGLRenderer（）；
renderer.setSize（window.innerWidth、window.innerHeight）；
document.body.appendChild（renderer.doElement）；
var直径=20；
var几何=新的三个圆柱几何（直径、直径、15、32）；
var texture1=new THREE.TextureLoader（）.load（'images/image1.jpg'）；
var texture2=new THREE.TextureLoader（）.load（'images/image2.jpg'）；
var texture3=new THREE.TextureLoader（）.load（'images/image3.png'）；
texture1.wrapps=3.repeat wrapping；
//texture.wrapT=3.0；
//纹理。重复。设置（1，4）；
var材料=[]；
材料.push（新的3.MeshBasicMaterial（{map:texture1}））；
push（新的3.MeshBasicMaterial（{map:texture2}））；
材料.push（新的3.MeshBasicMaterial（{map:texture3}））；
var圆柱体=新的三个网格（几何体、材质）；
气缸位置y=25；
场景.添加（圆柱体）；
摄像机位置z=40；
函数render（）{
请求动画帧（渲染）；
//圆柱旋转z+=0.05；
气缸旋转y+=0.005；
渲染器。渲染（场景、摄影机）；
}
render（）；

您希望在圆柱体上应用三种纹理

如果不想将纹理合并到单个纹理中，一个简单的解决方案是渲染三个圆柱体楔体，每个圆柱体楔体具有自己的纹理。使用如下模式：

var group = new THREE.Group();
scene.add( group );

var geometry = new THREE.CylinderBufferGeometry( 5, 5, 10, 16, 1, false, 0, 2 * Math.PI / 3 ); // 1/3 cylinder wedge

var endCapMaterial = new THREE.MeshBasicMaterial();

// mesh
mesh = new THREE.Mesh( geometry, [ new THREE.MeshBasicMaterial( { map: texture1 } ), endCapMaterial, endCapMaterial ] );
mesh.rotation.set( 0, 0, 0 );
group.add( mesh );

mesh = new THREE.Mesh( geometry, [ new THREE.MeshBasicMaterial( { map: texture2 } ), endCapMaterial, endCapMaterial ] );
mesh.rotation.set( 0, 2 * Math.PI / 3, 0 );
group.add( mesh );

mesh = new THREE.Mesh( geometry, [ new THREE.MeshBasicMaterial( { map: texture3 } ), endCapMaterial, endCapMaterial ] );
mesh.rotation.set( 0, 4 * Math.PI / 3, 0 );
group.add( mesh );

three.js r.89

另一种方法是使用

geometry.faces[i].materialIndex

属性为几何体的每个面指定纹理。在这种情况下，应使用三倍的径向分段数（如果有3个纹理）


我的前三个.js应用程序
正文{边距：0；溢出：隐藏；}
画布{宽度：100%；高度：100%}
var scene=new THREE.scene（）；
var摄像机=新的三透视摄像机（100，window.innerWidth/window.innerHeight，0.11000）；
摄像机位置y=24；
var renderer=new THREE.WebGLRenderer（）；
renderer.setSize（window.innerWidth、window.innerHeight）；
document.body.appendChild（renderer.doElement）；
var直径=20；
var径向分段=33；
var几何=新的三个圆柱几何（直径、直径、15、半径段）；
变量img1=”http://d2gg9evh47fn9z.cloudfront.net/800px_COLOURBOX9108127.jpg";
变量img2=”http://d2gg9evh47fn9z.cloudfront.net/thumb_COLOURBOX8923432.jpg";
变量img3=”http://d2gg9evh47fn9z.cloudfront.net/800px_COLOURBOX19377428.jpg";
var texture1=new THREE.TextureLoader（）.load（img1）；
var texture2=new THREE.TextureLoader（）.load（img2）；
var texture3=新的三个.TextureLoader（）.load（img3）；
THREE.DefaultLoadingManager.onLoad=函数（）{
var材料=[]；
材料.push（新的3.MeshBasicMaterial（{map:texture1}））；
push（新的3.MeshBasicMaterial（{map:texture2}））；
材料.push（新的3.MeshBasicMaterial（{map:texture3}））；
var l=几何体.faces.length；
对于（变量i=0；i